How to Storyboard with Wireframes, Designs, Site Maps, and Flowcharts - dummies

How to Storyboard with Wireframes, Designs, Site Maps, and Flowcharts

By David Karlins, Doug Sahlin

Storyboarding generally refers to the process of drawing rough sketches and diagramming navigation between those pages. The combination of rough sketches of pages (often referred to as wireframes) and navigation flowcharts (often referred to as site maps) lays the basis for building a site that looks the way it’s supposed to look and works the way it’s supposed to work.

Website architecture refers to planning how all the elements of a website — content, usability (presenting content in a way that works on the web), technical planning (figuring out how the site is going to be built), and aesthetics (such as page design, artwork, color schemes, fonts, and other design elements) — will fit together.

If you think about website architecture as an analogy to what an architect does in designing a building, a wireframe of a web page is similar to a blueprint, and a set of wireframes is analogous to a set of blueprints that sketch how a whole building will look.

Wireframes are rough sketches of how a page will look, meaning they usually do not include developed artwork, typography, and colors. Sometimes wireframes are created using Photoshop, Illustrator, or Fireworks. Whereas wireframes usually demonstrate links to and from pages, flowcharts or site maps focus on a graphical depiction of a site’s navigation arteries.


The figure shows a wireframe, a rough sketch of a single web page. As you see, it has placeholder Ipsum Lorem text. And it has a navigation bar, which indicates the basic navigation flow from the home page, below the logo.

This wireframe can be pasted on a wall with other page wireframes to get a feel for how the different pages in the site will look linked to each other and come across to a user as a whole.

And, individual wireframes can be turned over to an artist, who will translate the rough sketch into a full-blown artistic design. For example, the space that has been blocked out for an ad is 324 x 648 pixels (px). Those dimensions will allow a designer to create a web ad that looks good at that size.

In the preceding example, in addition for specs for the ad size, the wireframe might come with notes, indicating that the dashed lines are for location purposes only, that the concept is a 60/40 split between the left and right sides of the page, and that the logo area should be 72 px high.

In the next step in this page’s journey, a designer replaces placeholder text with real text, placeholder images with real images, placeholder graphics with real graphics, and so on — pretty much providing a detailed model for the final web page.

Along the way, a designer will make some changes to how content is sketched out in a wireframe. Real life never quite fits blueprints. Content will be longer or shorter than anticipated. Often, when a wireframe is translated into a design, things that seemed like they might work aesthetically in the wireframe end up turn-offs when implemented.

Of course, if your website is a one-person project, you can fill the role of sketching wireframes (and flowcharts) and designing more precisely how pages will actually look.

Here’s what the wireframe might end up looking like after a designer creates a real ad and logo, fills in some real text, and plays around with a possible color scheme.


The arbitrator(s) of how a site is supposed to look might be a client, a collaborative team, or just you. In any of these scenarios, your wireframes and navigation flowchart together serve as the blueprint for your site.

Will you, along the way, make changes to that plan? Of course. But good basic sketches and a basic navigation chart can be the difference between a website plan that meanders forever and one that comes together more or less as envisioned, on schedule, and on budget.