Wednesday, June 03, 2009

Web Design/Development - How We Use Wireframes

A lot of the clients we work with have never seen a wireframe before or maybe they have, but its been in an entirely different context than how we use wireframes at Cascade Web Development.

For us, wireframes serve as the visual blueprint for the initial design. Our standard wireframe will be presented in grayscale, with minimal design work. The goal here is to establish the placement of key elements on the page rather than those elements’ final presentation.

Here is an example of the initial wireframe we designed for Michigan Primary Care Association. The layout was based on conversations had with the MPCA team prior to its drafting.



Two days later we hopped on the phone and went over their likes and dislikes, things they wanted tweaked, etc. We had a few of these types of back-and-forths in the ensuing week and half, ultimately resulting in the following final wireframe:



Once we had delivered a wireframe that all parties were excited about, we passed the wireframe and corresponding Creative Request document on to our creative design team. A week later, here’s what resulted:



Two rounds of revisions later, here’s the final design!



Page through the slideshow below to see how the MPCA design evolved from conception.

No comments:

Post a Comment