Skip to content

A podcast for those who design, develop and run websites.

Boagworld is the web design blog of Paul (the Wurzel) Boag who lives in the heart of rural Dorset. He produces a weekly podcast with Marcus (pop star) Lillington on all things relating to building and running websites. They also run web design agency - Headscape.

Latest Shows

199. Time to generalise
This week on Boagworld: The changing role of web designers, Colin Firth on content and Becky Jones talks about the changes at Google.
198. jQuery goodness
This week on Boagworld: Dave interviews Remy Sharp creator of jQuery for Designers and Matt Bee dares to review the Website Owners Manual.
197. Energise your ecommerce
This week on Boagworld: We examine ways to improve the conversion rate on your ecommerce site, review CSS Mastery 2nd Edition and take a look at Zen Coding.
196. Interview with Kevin Rose
This week on Boagworld: We interview the founder of Digg.com Kevin Rose, take a first look at Codeslam and plan the future of the show.
195. Christmas Cheer
On our 2009 christmas special: Your favourite tweets of the year, a review of 24 ways, gifts for geeks and web design trends for 2010.

or view all shows

Have your say

Become a part of the Boagworld community...

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.

What did you think about this post?

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

  • Varun says:

    Storyboarding a website full of static webpages is relatively easy. How do you storyboard dynamic websites?

  • Paul Boag says:

    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?

  • Mark says:

    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…

  • Paul Boag says:

    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”

  • Anton says:

    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?

  • Paul Boag says:

    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.

  • Anton says:

    Well then, okay! That makes much more sense.
    Thanks!

  • nq says:

    Great article. Helps a lot.

  • Dennis says:

    If it’s a med to large sized project, you should probably do wireframing before the storyboard/functional spec stage…

  • Dan Acuff says:

    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.

  • james says:

    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.

Additional comments powered by BackType

Additional Information

Produced by Headscape

Boagworld is produced by the web design agency Headscape founded by Marcus, Paul and Chris Scott. Headscape also has a number of other talented guys who blog. Check them out.

  • Craig Rowe is one of our amazing developers and writes some superb posts on everything from .net to AIR apps.

  • Ed Merritt is a Headscape designer who's blog contains examples of his work and a number of free Wordpress themes.

  • Dave McDermid is a Headscape developer who has an excellent blog. He blogs on everything from AJAX to security.

  • Rob Borley is one of our project managers and blogs regularly on client and project management issues.

  • Leigh Howells is our multimedia design guru (whatever one of those is). He blogs on a mixture of design and music.

Paul elsewhere

Paul just can't shut up. He publishes regular audioboos, has a personal blog and is addicted to twitter. He also writes and speaks regularly. Check out the most recent below:

close
Are you ready for the 200th Boagworld? Join us for 12 hours of streaming video on Friday 12th February from 10AM (UK time).