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 dedication to getting the details right. Practice makes perfect.
Getting Started
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 storyboarding.
There are three basic purposes for a storyboard for a website. These include the following:
- It acts as an outline for the design of the site.
- It defines each element that goes onto a page.
- It provides a map of where information and navigational items go to give an idea of how pages work together for users can have a truly interactive experience.
Multiple types of storyboards can be used for web projects. All of them should provide a conceptual design of a site so everyone involved can see what is on the site and how it is organized. Some of the storyboards used for this purpose include:
- Maintenance storyboard – This board gives insight into what parts of the site should be maintained or updated and which should be avoided or only handled by a professional. This provides information about the upkeep needed on the site as time goes on.
- Presentation storyboard – With this type of board, you’ll show the design model and visualization of the site. Once this storyboard is complete, it shows the framework for creating a design. After approval, this board can be used to create an execution plan before moving forward.
- Production storyboard – The last type of storyboard shows a picture of what happens throughout the entire site. This includes what individual pages look like and who is responsible for what part. This has detailed info about everything from font size and type to colors, text, sound, video, graphics, and more.
What Storyboarding Is All About
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 website 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.
The storyboard for a web project can be likened to a blueprint for a home. It’s a tool used to show all elements of a webpage, such as graphic elements, navigation, text, banners, and images. When creating a site for a client, it’s also an excellent tool to present the project to them.
Understanding Site Maps
Most site maps that you see on websites 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 estimator page can be viewed here; you get to it by filling out the contact form on the landing page. Dynamic Site Map
