Story Boards. Creating and using storyboards Storyboards are an essential tool when designing...
-
Upload
dylan-matthews -
Category
Documents
-
view
213 -
download
0
Transcript of Story Boards. Creating and using storyboards Storyboards are an essential tool when designing...
![Page 1: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/1.jpg)
Story Boards
![Page 2: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/2.jpg)
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.
![Page 3: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/3.jpg)
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.
![Page 4: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/4.jpg)
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
![Page 5: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/5.jpg)
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.
![Page 6: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/6.jpg)
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?
![Page 7: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/7.jpg)
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.
![Page 8: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/8.jpg)
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
![Page 9: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/9.jpg)
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
![Page 10: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/10.jpg)
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.
![Page 11: Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.](https://reader036.fdocuments.in/reader036/viewer/2022081908/56649d9d5503460f94a86108/html5/thumbnails/11.jpg)
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.