How to use wireframes to quicker work with design concepts and why this will help the client (Image examples included below)
At this phase of design, what AskMorris typically does is mock up each major section of the site concentrating on functionality and web page elements only.
What that means is 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 every thing 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 stage, 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
Wire frames 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)
