Sketch Out a Site Map for Web Design

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

The web site map shows the website’s major sections, and how the pages of your new website displayed for iPhone or iPad will link to each other.

A site map like the one shown provides a visual overview of the major sections of your website and serves as a guide for how you expect the traffic to flow from one section to the next. Think of the site map in terms of a blueprint, where architects lay out the rooms in a house and show the traffic patterns of how a family will walk around the building.

The initial site map often changes quite a bit by the time designers reach the final version of the wireframe, but the map serves as a guide that can help ensure your project doesn’t spiral out of control.

When you’re ready to decide which content appears on your site’s home page, use the goals you have already documented to prioritize your content on a wireframe of your home page. As you can see in this figure, the designers have determined that visitors to the mobile website need to see three elements: the featured exhibition, a sign up for news alerts, and a link to visitor information.

Also, note the diagram in the upper right corner of the wireframe page. The home page wireframe includes the information you want your mobile web users to see first. The diagram is a graphical expression of your location in the site, which can be quite handy when you’re working on a particularly complex site.