Story Boards

Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists all on the same page while working together. This can save you large amounts of time and money while avoiding truly unpleasant surprises.

So what is a storyboard? Remember when you were a kid and you read picture books? They were mostly pictures and not much text. It was pretty easy, most of the time, to figure out the meaning of the words simply by looking at the pictures. Then as you got older the pictures in the books you read went away and you used your imagination instead. You may have even discussed some of you imaginings with some of your schoolmates and found that there were differences in what you and the other students imagined. Storyboards for web sites are more like picture books than books without pictures. You should not have to use your imagination to figure out what a storyboard is telling you. In fact, using your imagination could be dangerous for developers and clients alike, as no two people “imagine” the same thing.

What is a storyboard? A storyboard is a visual representation that conveys all the necessary components of the website to be developed. At this point it will be just one form or piece of paper for each webpage you will be creating. You will need to include the text, graphics, media (audio, video, animation), navigation, hyperlinks, font style, font size, font color and anything else you intend to use on the one piece of paper. If you can, then you’ve got a pretty good imagination! Essentially, storyboards are meant to tell the story of each web page in your site and are meant to help in the design of the web page Storyboards must tell the developer everything he is supposed to place on the site right down to the title font, hyperlinks, and navigation of all buttons. You may like to create a separate list of what graphics are needed

More on storyboards It is important to remember that storyboards play a very important role in designing and developing websites. They are the primary communication tool for all involved. Consequently, there is a dilemma; how do you create storyboards that don’t require imagination to use and don’t require drawing skills, and can be created in the most efficient way so that they can be viewed by everyone involved and kept up-to- date? Namely, your teacher.

Storyboards are documentation In addition to communicating information, storyboards are also the documentation for what you build. If you need to fix, change, or re-do something, you need the storyboards to figure out what was done. This is common sense, but when you’re in the middle of creating a site it is easy to let things slip. In real life…… You should be able to tell someone what was done to your site. That may be true for up to a month after the project is over, but not much longer. And what happens if you leave that department, or go to work for another company, or just throw up your hands in disgust and leave the working world for a tropical island? What then?

What Makes Up a Good Storyboard? Develop a list of things that you want in your site Links Font styles, sizes Tables / frames Images Content – what will it be? After you have the experience of writing more then one storyboard, look at previous storyboards you have designed and see what you can pull from it to include in your new project.

Basic Form The “main” storyboard will include a sketch for showing the placement of text and graphics, the actual text, and a sketch of the needed graphic. It also a good idea to include the following information: date storyboard was created or updated screen name, course name the menu bar the navigation buttons the author’s initials the revision number an area for a text description of what’s happening on the screen and to and from navigation

How do I create storyboards? At this point you will use paper and pen / pencil Use colored pencils / markers to show color and to be more descriptive Use a sheet 8.5” x 11” or 11” x 14” Create blocks that represent each page of your web site (remember for this project you need 5 pages) This means you should have a minimum of 5 blocks – one block for each web page Sketch put what will be included on each page Title, fonts, images, menu bar, links, text, etc Show how the pages will link to each other

It’s a good idea to… In addition to the storyboards themselves, it is a good idea to create a screen-by-screen flowchart of the website. This should represent the web sites navigation and a user’s path through the site. Sure, there are places to describe this on your storyboards, but it’s back to that adage: a picture is worth a thousand words. It’s essential to create a standards document that really gets into the nitty-gritty by specifying fonts, colors, etc. You may also want to use this flow chart to list the necessary code; if it is code you don’t use often you may want to write it down to save time when you are actually designing the web site. Storyboards are the blueprints of your website and development process. The more detailed they are, the better they are at fulfilling the needs of the web surfer. Making sure that your storyboards are complete and accurate can minimize questions that cause delays, assumptions that cause confusion, and errors that cause rework.

To help you start 1. Write a Synopsis of the website think of your meta tags Break up the website into pages you want to include in your site Flowchart it 2. Pencil in what you want to include 3. Analyze and review what you have created 4. Add to your Draft Use drawings, text, add more detail to the website 5. Analyze and look for Continuity. Make changes if necessary.