Storyboarding Tips: Step by Step

Storyboarding is an essential component toward a streamlined web design process. In essence, the storyboard is the blueprint for your website. This simple sketch and pre-development exercise will greatly reduce the amount of time and energy spent on your actual development process.

According to the website WebHostDesignPost.com the goal of your storyboard should be to create a design that is unique yet simple. Your website should be fresh and intriguing but also user-friendly. In another recently posted article titled Tips on Programming Your Website after Storyboarding, there are a few basic website components to keep in mind when designing your layout. Basically, the most successful designs fall into one of two layout categories: single column and double column. According to the tips site the header and footer is also a must. Once you have decided on these framing features you can start working on the content and graphics that will be added.

While researching various web development processes I came across the official page for Web Designer Magazine (WDM) which featured a simple outline for storyboarding. According to WDM the first step in the storyboarding process is to gather information on your audience and determine the purpose for your page. Then you should define your objectives. What is the point you want to get across? What is your idea of success? Next, create user personas. Research your target users and see what interests them, or what makes them tick. Then build your site with their interests and concerns in mind. Once this portion of your storyboard brainstorming is finished (or you at least have a solid design concept) it is a good idea to proceed with a sitemap.

A sitemap is exactly what it sounds like, a map to your website. A sitemap should be a descriptive list that shows a hierarchy of links and the pages that your website will ultimately include. From the home page to the categories and subcategories, this map should show all the main topics that one can explore on your page.

This is a Digital Mood Board from WordPress Designers, but a physical board with taped print-outs is just as effective!

The most entertaining step (in my opinion) in this creative process involves making a mood board, according to webdesignermag.com. A mood board displays the websites that you like all on one physical medium, a desk, corkboard, etc. it doesn’t matter. Print out designs that inspire you and figure out what it is you like about these particular designs. Then take the aspects of the things you liked and apply those ideas to your own storyboard. The mood board is a great source of inspiration. Then you can start sketching.

It can be as messy as you like, as long as YOU know what's going on!

After you have sketched your storyboard try to take a step back and take an objective look at it as if you were a typical visitor. Observe where your eye went first; was it where you wanted it to go? Is the site appealing and easy to navigate through? What makes the visitor want to click one of your links? Evaluate your results and correct the page as necessary. Clearing up loose ends before development will save you time and stress. Storyboarding is an essential component to an efficient, low stress development process. For more information please visit the links below.

Hampton-Smith, Sam. Site Storyboarding and Design. Web Designer Magazine. Retrieved on May 18, 2010 from http://www.webdesignermag.co.uk/blog/site-storyboarding-and-design/

Articlesbase.com. Tips on Programming Your Website After Storyboarding. Retrieved on May 18, 2010 from http://www.articlesbase.com/seo-articles/tips-on-programming-your-website-after-storyboarding-2381497.html

Website Storyboarding | Examples, How To and Sitemap. WebHostDesignPost.com. Retrieved on May 18, 2010 from http://www.webhostdesignpost.com/website/websitestoryboarding.html.

Images:

http://www.flickr.com/photos/itzumedia/3648761942/

http://www.flickr.com/photos/wordpressdesigners/3726209741/sizes/o/