Chapter 1: Wireframing and Storyboarding Content

In This Chapter

check.png Learning the art of planning a website

check.png Harnessing the magic of the 960 grid

check.png Designing good-looking pages

check.png Planning user-friendly navigation

When you plan a site, what do you do first? Do you storyboard the site, which involves creating rough drawings of how the key pages will look? Or do you draw a sitemap that charts the navigation structure of the site?

It’s kind of a chicken-and-egg thing. You can’t really design pages without having some idea of what links will be in the menu bar at the top of those pages (or some alternate navigation approach). And, you can only get so far in drawing up a navigation structure without knowing how many key pages the site will have or working through what content will be on which page.

We return to the role of wireframes, sitemaps, and storyboarding shortly, and the terms are used differently in different contexts. But here are quick, working definitions to get started:

Wireframes are rough sketches of how pages will look, including navigation elements.

Sitemaps are flowcharts ...

Get Building Websites All-in-One For Dummies, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.