Designing a website from scratch can be a daunting task, with so many variables at each stage of the project, it can be easy for the original vision or basic functionality of the website to become compromised.
How do you organize a layout that can handle a wide variety of elements? What is the best way to articulate a final product before it hits production? Can the design process improve the ability of my interactive programers to spot a programming issue earlier in the production cycle? We can answer these questions with one word: storyboarding. Traditionally associated with animation and movie production, storyboarding has now become an essential part of the interactive design process.
Film & Design – Parallel Processes?
Storyboards help establish hierarchy for elements within a page, clearly define the grid and structure of the site, and help communicate to the team what the final piece should look like. A traditional synopsis of storyboarding draws strong parallels to the design process creatives have become familiar with: “Storyboards guide the crew of a production to achieve what has been designed by the director” – this is applicable both in traditional film mediums and interactive programming design.
Even if at first glance they look more like random sketchings or a congregation of abstract geometric shapes, storyboards are the blueprint for your website. They should visually answer some basic questions about the functionality and layout of the site, and provide enough context to show how variables like advertising, rich media, and future content will be formatted. As a general rule, the more planning you do beforehand, the better the results are afterward.
“Weaving A Good Yarn” – Developing Your Storyboards
First, you want to make sure a few parameters are in place before beginning the storyboarding phase. Your projects flowchart / site map is critically important to creating a satisfying user experience, as understanding how the user will interact with the site will give you insight into where and how certain elements should be developed. A grid will need to be established as well, as this will be the bedrock that your website will be built upon. Designing your storyboards with a pre-established grid optimizes your layout for cross-browser functionality and determines flexibility when it comes to mobile devices or tablet applications.
Start out developing your storyboards with a general outline – where are your global navigation, header, and hero images or rich media elements? These will be the defining features of each page, and most likely the elements which will be viewed or used first by the user. Based on your flowchart, should some of these elements be more important than others? Experiment with divergent concepts, storyboarding is a great way to assess multiple options in the rough, before selecting your final layout. Specify where the copy will go next, keep in mind how different headers will affect the environment, or how other typographic treatments like pull-out quotes, linkage, or bulleted lists will be implemented.
Keep in mind who will be managing the site once it’s finished, and how the usability can be enhanced through accurate storyboarding. Single admins with a broad range of interactive skills can work from a more precise storyboard, where a more complex system of rules and regulations would be advantageous. Product teams or admin groups overseeing the entire site might benefit more from a more abstract layout, which clearly defines the hierarchy of elements, rather than specific placement of individual pieces.
The Final Product – “Happy Ever After”
The parameters defined in a storyboard establish a definitive benchmark for the entire website design process. The effectiveness of the style, brand, and functionality of the final product relies heavily on the roadmap set forth in the storyboarding phase. Using storyboards effectively for interactive projects reduces wasted time in development due to last minute modifications, which otherwise would result in elongated timeframes and unnecessary costs. A well crafted product starts with a clearly defined project, and storyboarding is an essential step in achieving these goals throughout the creative process.