Website storyboarding
Posted in Design on: Thursday, August 25, 2005 by Paul Boag
With a project as complex as producing a new website, there is a lot of room for misunderstanding and confusion. That is why it is so important to have a clear specification of what the site will do and how it is structured. Enter the HTML storyboard.
Molly Holzschlag on her site has raised the issue of prototyping techniques and different ways of storyboarding a website. It would appear that everybody has his or her own method of doing this so I thought I would throw my approach into the ring.
Why storyboarding is important
Before I tell you how I go about storyboarding a site, let us recap on why it is so important. The structure and content of a site can have profound effects on design, budget, choice of technology and delivery timescales. Without a storyboard, there is room for confusion as to what exactly the nature of the site is. This can lead to last minute changes that in turn push out deadlines and increase costs. A good storyboard can provide everybody with a clear understand of the sites scope and minimise any late additions.
My approach
As I have already said, there are many approaches to storyboarding but my preferred approach is to create an HTML storyboard. This involves building a completely un-styled outline of the site using HTML. Although the storyboard does not include every individual page on the site, it does try to cover the major functional areas and main sections. Each page in the storyboard will include the main navigation, related links, a functional description of the page, and some notes on content for that page. Although each page has no design elements, it will indicate all of the major elements to appear on each page. Sometimes I also try to approximate the position of these elements to give a better impression of the final site.
The benefits of this approach
I believe that producing an HTML storyboard has several advantages beyond the improved communication I have already mentioned.
- It allows the client to navigate around the storyboard as if it is the final site. This helps them get a much better feel of how things fit together.
- You can also carry out valuable usability testing against this kind of wireframe
- It is possible to layer additional css formatting on top of the HTML in order to try out different design concepts
- If built right these HTML storyboards can also act as the basic HTML structure for the final site as well therefore reducing overall production time
Conclusion
Do I always use this approach? No. Sometimes the site (or budget) is too small to justify the work involved. I have also come to recognise that some of the theoretical benefits listed above do not always pan out in practice. However, on the right project, implemented in the right way, this can be a very powerful tool. A good HTML storyboard can act as the road map for the entire project.
11 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Storyboarding a website full of static webpages is relatively easy. How do you storyboard dynamic websites?
Yeah that is a fair comment and I should have included that in the post. Let me give an example. Let us say the dynamic site was an ecommerce site. I would storyboard one route through the site to the final confirmation page. You would see a category page listing all the product categories. Whichever category you click you would be taken to a generic product-listing page. Then whichever product you click on you would go to the same generic product page. Does that make sense?
Also using an (X)HTML storyboard can save time later, as you already have the XHTML structure built. Just a matter of styling it with CSS then…
Hi Mark,
yes that is what I meant when I said:
“If built right these HTML storyboards can also act as the basic HTML structure for the final site as well therefore reducing overall production time”
Sometimes I also try to approximate the position of these elements to give a better impression of the final site.
I’m a little edgy about this statement… since you’re talking about unstyled content, how would you go about approximating position of the presentation without it affecting semantics?
“Unstyle” does mean “non-presentational markup” after all, doesn’t it?
Absolutely, unstyled does mean non-presentational markup. However what I meant when I made that comment was that you could then start to layer in some basic CSS styling on top of the markup.
Well then, okay! That makes much more sense.
Thanks!
Great article. Helps a lot.
If it’s a med to large sized project, you should probably do wireframing before the storyboard/functional spec stage…
Actually, as I understand it, your storyboard should come before your wireframes (larger site of course).
Can anyone confirm this?
It makes sense that your storyboard contains the more general information on what each page does and the paths that are taken.
While the wireframes are to be drawn from the storyboard with very detailed information as to the specific way that the site and page should be constructed.
Dan, if you are using storyboards then I don’t think wireframes are necessary.
The information in storyboards would encompass what you would need a wireframe for, is my understanding.