A short presentation on the relationship between wireframes and the design concepts that are based on them. Design is not meant to be a literal interpretation of the wireframes.

1. Creative strategy. Concepts. Execution. Follow the thread…
One Cognizant
Example of the relationship between wireframe and design
April 8, 2010
Friday, April 9, 2010

2. Wireframe
The wireframe depicts general navigation, major content/functional areas, and the relative
prominence of information elements relative to others on the page.
Page 2 | © 2009 Gabardine LLC - all rights reserved - gabardine.com
Friday, April 9, 2010

3. Design Concept A
Page design adheres to the information hierarchy depicted in the wireframe, but is not bound to it.
Page 3 | © 2009 Gabardine LLC - all rights reserved - gabardine.com
Friday, April 9, 2010

4. Design Concept B
A different, less-literal page design that’s nevertheless based on the same wireframe.
Page 4 | © 2009 Gabardine LLC - all rights reserved - gabardine.com
Friday, April 9, 2010

5. Comparison
Side-by-side view of different but equally valid design solutions derived from a single wireframe.
Page 5 | © 2009 Gabardine LLC - all rights reserved - gabardine.com
Friday, April 9, 2010