Website storyboarding
Published on: 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.
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
Post by Varun on August 25, 2005 11:13 AM
Post by Paul Boag on August 25, 2005 11:18 AM
Post by Mark on August 25, 2005 12:57 PM
Post by Paul Boag on August 25, 2005 1:00 PM
Post by Anton on August 25, 2005 5:26 PM
Post by Paul Boag on August 25, 2005 5:29 PM
Post by Anton on August 25, 2005 5:39 PM
Post by nq on August 26, 2005 9:37 PM
Post by Dennis on October 19, 2005 4:29 PM
Post by Dan Acuff on August 24, 2006 4:44 PM
Post by james on June 20, 2008 3:23 PM