HTML and CSS Reference
In-Depth Information
Typically, at this stage in the process, wireframes should steer clear of the more visual aspects of design,
and should lack any strong color, detailed typography, or complex imagery. Wireframes should be simple
and clear, a skeletal framework that supports the layers to come, like chicken wire under papier-mâché.
Wireframes are a plan, not a product; they're a step on the way to a finished design. They're meant to be
loose and non-committal, and many wireframing tools deliberately limit design options to force you to focus
on hierarchy and utility instead of graphics and branding. Some wireframing software will even simulate
hand-drawn sketches, complete with squiggly lines and scribbles, just to prevent you from getting bogged
down in details too early in the process. Of course, you don't need to use any special software to put
together wireframes; a pencil and paper can be just as constructive.
You can see some example wireframe diagrams in Figure 10-2, plotting a few different pages for the
Power Outfitters website. We've kept things loose and free, and we aren't thinking yet about the final,
polished presentation. We are, however, beginning to think about general layout and arrangement of
elements on the page, but only insofar as establishing the visual hierarchy of where the most important
content should fall.
Figure 10-2.
Wireframe diagrams of a few key pages on Power Outfitters
The page layout is still subject to change, and later we'll use color, texture, typography, and imagery to
emphasize different blocks of content and lead the viewer's eye where it needs to go. The greatest benefit
of drawing wireframes is that it helps you to understand your content and collect all the essential parts in
one place before you begin visual design and development. The wireframing stage is also a good time to
