Web Storyboarding and Dynamic Site Maps

Like any art form, web development takes practice, skill, training, and focus. Wait a minute, you say. I’ve got a team for that and they really know what they’re doing? Don’t kid yourself. Even if you are engaged as a manager or investor, you are still engaged and you need to remain so.

But don’t worry; it’s actually pretty fun if you understand that web development is an iterative process. Like learning to play the piano, it requires repetition, patience, concentration, and a dedication to getting the details right. Practice makes perfect.

Look for ways to break the web project down into manageable chunks that can be completed within a four-month schedule. For me, four months is the magic number. Then work on each chunk one step at a time and move closer to a successful result.

The process can vary. In my work, though, I tend to focus on a few basic steps. The first step I call storyboarding. It’s similar to the concept of wireframing, but because I’m more visual I prefer to use the storyboarding.

In the film business, a storyboard is an illustration that visualizes how a scene should be shot. In web development, it means organizing the User-Interface elements – fields, buttons, descriptive text, and other elements – into common sense layouts. To save time, each layout should contain only the basic design elements so everyone involved can sense the logic.

Each layout should make sense. There should be a flow, preferably one that you can diagram. To understand the logic of a web site it helps to have a master diagram that shows how you get from point A to point B.

To comprehend the logic of a site, you need a diagram that shows a bird-eye view of all the pages. This is usually a site map drawn as a flow chart, or what I call a dynamic site map. Most site maps that you see on web sites are static by nature: they tend to be hierarchical with the home page at the top if you’re reading down or the left if you’re reading right. When planning the web development, it should resemble a flow diagram so you can see how the pages are interconnected.

Building a site map and storyboarding the individual pages go hand in hand. It’s tempting to rush the process and gloss over the important details. Just remember that it’s much easier to spot and correct during this pre-coding phase than later when you are in the thick of it.

Expect revisions. This will be the first time that you can see how the web project is supposed to fit together. Streamline the user experience as much as possible. Ask yourself this: could a child navigate your site? If not, why? Just remember that if they get lost or frustrated, they will abandon your site and it will be very hard to get them back. And check the egos at the door.

Even the web development planning process is iterative and can be perfected. This is a dynamic medium that is always open to a better method.

Download Links

These completed layouts were used to code the pages and reflected many design revisions.

Screen #1 – Bank Landing Page Screen #2 – Web Site Estimator App

The actual landing page can be viewed here. The estimator page can be viewed here; you get to it by filling out the contact form on the landing page. Dynamic Site Map

Table of Contents