Back to Helpful Web Tips & Resources

How wireframes work and why they help us work better with clients

QWhat are wireframes and how do they help save time? 

When we get to this phase in the design process, what we typically do is mock up each major section of the site concentrating on functionality and web page elements only.

What that means is that we'll be creating some documents called wireframes for the client to look over and approve, and then we move on to the look and feel (the decoration) of the pages. Let's explain what the purpose of these wireframes is:

We've already begun looking at all the technical elements the clients site will need to include. Now we have to decide where all of these elements go: search form, contact info, links to each and everything else on the site, buttons and text boxes, etc...

The wireframe is a really basic layout of each major page that is really just gray boxes indicating the placement and prominence of the major bits of the site. We'll put things where we think they'll be most effective, and the client can feel free to argue with us and slap us back and forth through cyberspace if he/she doesn't  like what we come up with. At this point, we’re still not even thinking about how the site will actually look.

It’s definitely a lot easier to move and resize things when you’re only working with gray boxes. Once we finalize this live, we can move on to the actual visual design and have lots of fun.

For a better understanding on how effective wire frames work, click the image examples

 

WIREFRAME  
  
 
 
 DESIGN MOCKUP (after wireframe) 
AskMorris layout after the wireframe is done
 
 
WIREFRAME 
An example of a wireframe to a client  
 
 
DESIGN MOCKUP (after wireframe)
after this frames are done this is an example of the layout
 
 
Wireframes  definitely help to save time as the client only has to decide on one thing at a time (first the functionality and web elements, then the colors and style)