stevenclark.com.au

Using HTML storyboards is really just about going back to basics. Put your content and assets on each HTML page you mark up – it doesn’t have to be the entire site – and link them together. It provides a relatively quick and painless way to show how the site is fitting together, a kind of hyperlinking walkthrough. One of the benefits of which is the ability to quickly modify your design to meet changes in your client’s idea of what the site should be.

To be honest I’d suggest this is how you should really be developing in the first place – collect ideas, collate information, work out the architecture and then code up the pages. On the one hand you can create semantic meaningful markup and on the other you get to take this hyperlinking shell into the client meeting and let them play with the content. The term for that is ‘win/win’.

The added benefit to this is over a few iterations you can quickly nail down a lot of important information – and collate the content – about the design overview and some potential usability issues which might have been less obvious otherwise.

So why don’t you have design elements in with this HTML storyboard saga? Why don’t you just make quick HTML mockups of what you’re visually designing rather than sticking to the information contained within markup?

My answer to that has everything to do with the client’s perception. If you hand them something that looks like its nearly finished it can lead to higher client expectations (and grief). Also when colour and placement are on the page then you’re going to contest with their saying they think the banner should be pink or the sidecolumn needs to be on the left. That’s exactly what HTML storyboards are intended to sidestep!

By providing the basic source ordered markup you and your client can easily see whether it is meaningful and logically put together. You can look at the heading structure, whether the images are optimised for the information they relate to, whether site visitors can see a logical progression from point A to point B. Once again there are no nailed in stone answers to how to implement this technique. A good question to ask yourself is simply “does it go directly into the markup?”

If it does then its content and it goes into your HTML storyboard.

An added and obvious bonus to this is your artefact. By the end of this storyboarding process you are left with the bare bones of the site and you know in its own context it works.

This entry was posted on Tuesday, August 7th, 2007 at 7:04 am and is filed under design, web standards. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.