Storyboard

sunandaC

New member
Storyboard


A storyboard is a tool used in the production of multimedia, video, and film projects to show a frame-by-frame picture sequence of the action. In this book, however, the term refers to a non-graphical representation of every web page — the screen elements and their operations — which, when taken as a whole, constitute your website. Just as an outline helps to organize your thoughts before you write a paper or report, storyboards help to organize a visual production such as a website. By using the storyboard process, you can design your website while clearly envisioning all the possible paths that a customer might take.


Thus, your storyboard is the visual representation of how your website will look to your customers. A good, well thought out storyboard will enable you to marry the goals and priorities for your website into a good design.
Here is how: With the proper storyboard, you can map out the progression and relationship between individual web pages. It lets you visualize how each page will work within your website before you start building it.

This is an example of a simple storyboard that might be used to design a small online store.
While tedious, creating a storyboard will save time, money, and many sleepless nights. Map out every step of your design process so that each detail can be tested, measured, and validated.
Very detailed storyboards might include an overall site diagram that shows the website on all levels: major areas of the site, secondary areas, etc.

All Storyboards should include a basic layout of each individual web page.


To begin the storyboard process, generate a visitor-centric navigational scheme that defines the type of pages and content needed to provide your website with the necessary design elements. Take your “home” page for example: Using a single sheet of paper, describe the buttons, links, and key components that your customer should see when he or she first opens the link to your website. Then every other web page should be constructed in a similar a manner.

At each step of the process, incorporate your customers’ wants, needs, and perspectives. And remember that every layer of your website either precedes or supports specific choices a visitor makes, so your website’s design must make sense to your visitor so you can turn that person into a repeat customer.


As you lay out the storyboard, there is one essential question you should keep in mind: What’s the plot? In other words, why is the visitor here — what does your visitor want? Don’t forget that many times a visitor will not reach your website through the front door, i.e. your home page, so consider all contingencies. Determine as you outline each web page:

What do I want my visitors to do at this point, what do I want them to feel right now, where do I want a potential customer to go next, and how do I make it easy for them to get there?
Your final storyboard should allow your visitors to enter your website at any point — the “about us” page, the “check out” page, the “privacy policy” page — and to know where they are and to understand how they can get where they want to be quickly.

Here is a set of suggested guidelines to keep in mind as you create your storyboard.

• The storyboard should be legible. It can be created using pen and paper and does not have to be precise, but if using outside help for the design stage, it must be clearly understood by those people.

• The storyboard must be complete. Every page should be represented and every element on the page should be explained before actual design work is started or any of it programmed into HTML.

• Every design and layout element to be included on each page should be noted in the storyboard —
o Headings

o Text objects/blocks

o Links/Buttons

o Graphics images (photos and other arts).
• The typeface and print size of the headings should be exactly as they will appear on the final web pages.

• The number and the function of the buttons should be clearly indicated on each page.

• Links between pages should be clearly indicated using arrows.

• Each graphic image should be noted with a box identifying it as a graphic image with a short note

describing the content.

• Web pages should be numbered for easy reference.

Think in terms of who will see your web pages. Perhaps it will be a potential customer who has no idea who you are or what you have to offer.

Thus, the best way to layout your storyboard is to track the path of a hypothetical customer, with branches at every decision point — including those made by the customers and those made by the system. Have a meeting with all of your staff — sales and marketing, customer service, public relations — not just the website staff. Get everyone’s input; cover all the possibilities.

For example, in the purchasing process:

• Does the site require customer registration before the purchasing process can begin?

• Is there an option to skip registration but to allow the purchasing process to continue?

• If a customer wants to change or to remove an item from the shopping cart, is it easily done?

• At what point does the credit card authorization take place?

• Is there a confirmation page that also provides an order tracking number?

Decisions made at this point must not be rushed. Time is needed to study, absorb, and totally understand what’s required to implement the most creative ideas — the ideas that will make your website stand out from the crowd.


Use your storyboard as your guide throughout — design, build out, and beyond. Storyboarding helps not only to improve site navigability, but also to develop content and web copy. Furthermore, if you hire a web designer to design your web pages, or a web architect to oversee the entire build out phase, the storyboard will provide them with the details necessary to provide you with exactly what you want.


The author realizes that both layout and design are subjective topics, but to make the best first impression design a stylish page with your content laid out in a logical manner. Use a consistent theme in the colors, styles and fonts throughout your site.
 
When you are making a video for your company whether it is a short or long video, you need a preparation for the video. Probably the most essential stages of planning out your movie is making a storyboard. It is generally a visual reflection of how your video will occur, shot by shot.
 

bhautik.kawa

New member
Storyboard


A storyboard is a tool used in the production of multimedia, video, and film projects to show a frame-by-frame picture sequence of the action. In this book, however, the term refers to a non-graphical representation of every web page — the screen elements and their operations — which, when taken as a whole, constitute your website. Just as an outline helps to organize your thoughts before you write a paper or report, storyboards help to organize a visual production such as a website. By using the storyboard process, you can design your website while clearly envisioning all the possible paths that a customer might take.


Thus, your storyboard is the visual representation of how your website will look to your customers. A good, well thought out storyboard will enable you to marry the goals and priorities for your website into a good design.
Here is how: With the proper storyboard, you can map out the progression and relationship between individual web pages. It lets you visualize how each page will work within your website before you start building it.

This is an example of a simple storyboard that might be used to design a small online store.
While tedious, creating a storyboard will save time, money, and many sleepless nights. Map out every step of your design process so that each detail can be tested, measured, and validated.
Very detailed storyboards might include an overall site diagram that shows the website on all levels: major areas of the site, secondary areas, etc.

All Storyboards should include a basic layout of each individual web page.


To begin the storyboard process, generate a visitor-centric navigational scheme that defines the type of pages and content needed to provide your website with the necessary design elements. Take your “home” page for example: Using a single sheet of paper, describe the buttons, links, and key components that your customer should see when he or she first opens the link to your website. Then every other web page should be constructed in a similar a manner.

At each step of the process, incorporate your customers’ wants, needs, and perspectives. And remember that every layer of your website either precedes or supports specific choices a visitor makes, so your website’s design must make sense to your visitor so you can turn that person into a repeat customer.


As you lay out the storyboard, there is one essential question you should keep in mind: What’s the plot? In other words, why is the visitor here — what does your visitor want? Don’t forget that many times a visitor will not reach your website through the front door, i.e. your home page, so consider all contingencies. Determine as you outline each web page:

What do I want my visitors to do at this point, what do I want them to feel right now, where do I want a potential customer to go next, and how do I make it easy for them to get there?
Your final storyboard should allow your visitors to enter your website at any point — the “about us” page, the “check out” page, the “privacy policy” page — and to know where they are and to understand how they can get where they want to be quickly.

Here is a set of suggested guidelines to keep in mind as you create your storyboard.

• The storyboard should be legible. It can be created using pen and paper and does not have to be precise, but if using outside help for the design stage, it must be clearly understood by those people.

• The storyboard must be complete. Every page should be represented and every element on the page should be explained before actual design work is started or any of it programmed into HTML.

• Every design and layout element to be included on each page should be noted in the storyboard —
o Headings

o Text objects/blocks

o Links/Buttons

o Graphics images (photos and other arts).
• The typeface and print size of the headings should be exactly as they will appear on the final web pages.

• The number and the function of the buttons should be clearly indicated on each page.

• Links between pages should be clearly indicated using arrows.

• Each graphic image should be noted with a box identifying it as a graphic image with a short note

describing the content.

• Web pages should be numbered for easy reference.

Think in terms of who will see your web pages. Perhaps it will be a potential customer who has no idea who you are or what you have to offer.

Thus, the best way to layout your storyboard is to track the path of a hypothetical customer, with branches at every decision point — including those made by the customers and those made by the system. Have a meeting with all of your staff — sales and marketing, customer service, public relations — not just the website staff. Get everyone’s input; cover all the possibilities.

For example, in the purchasing process:

• Does the site require customer registration before the purchasing process can begin?

• Is there an option to skip registration but to allow the purchasing process to continue?

• If a customer wants to change or to remove an item from the shopping cart, is it easily done?

• At what point does the credit card authorization take place?

• Is there a confirmation page that also provides an order tracking number?

Decisions made at this point must not be rushed. Time is needed to study, absorb, and totally understand what’s required to implement the most creative ideas — the ideas that will make your website stand out from the crowd.


Use your storyboard as your guide throughout — design, build out, and beyond. Storyboarding helps not only to improve site navigability, but also to develop content and web copy. Furthermore, if you hire a web designer to design your web pages, or a web architect to oversee the entire build out phase, the storyboard will provide them with the details necessary to provide you with exactly what you want.


The author realizes that both layout and design are subjective topics, but to make the best first impression design a stylish page with your content laid out in a logical manner. Use a consistent theme in the colors, styles and fonts throughout your site.

Hey Friend,

I am also uploading a document which will give more detailed explanation on Storyboarding video and multimedia projects.
 

Attachments

  • Storyboarding video and multimedia projects.pdf
    3.1 MB · Views: 0
Top