Putting it All Together - HTML5 with CSS3 - page 328

Figure 10-1. A minimal site map drawn as a flow chart
The real point of drawing a site map is to get you to think about organization and how to reach one page
from another. Think about how your visitors will find their way to the content they need and how you can
guide them along the shortest route.
Stage 2: Design
Everything to this point has been centered around discovery and planning, and the next stage is the point
at which ideas begin to take tangible shape. Preparation is a huge part of the design process, but now it's
time to put that plan into action and let the creative juices flow. As always, think about your users—what
will they see, read, or hear, how will they interact, and how will the site respond to the users' needs and
actions? Figuring that out is what designers do; design is making a plan for a sensory experience.
Explore your site map and identify the different types of pages your site will need and what components
should appear on each page. Begin to think about hierarchy and what content is most important. You can
express that hierarchy of importance as a visual hierarchy , with the most vital content drawing the most
attention or taking up the most space, with less important, supporting content staying out of the way.
The wireframe is an invaluable tool for plotting the hierarchy and arrangement of elements on the page,
and for gauging how blocks of content relate to each other. It's a rough, schematic blueprint of the web
page, to act as a guide for the design and development steps that follow. Drafting wireframes is an
extension of information architecture and usually falls under the domain of user experience (UX) design or
interaction design.