Extensive Storyboarding Guide

Before anything else, it’s important to answer this question in regard to storyboarding: Why is it important to storyboard a website? The answer for this would be, storyboarding could make the design process more easier and efficient. Likewise, through this, you’ll me able to save a lot of time and money, while having a medium that would help you visualize the possible result of your project.

Extensive Storyboarding Guide

Website Usability and Storyboarding

As you think of the ‘building blocks,’ it’s advisable to get a sheet of paper and start to draw the website you’re planning to create. Begin with the homepage, mainly because it’s one of the most important pages of your site. Keep in mind that you only have 5 seconds to attract the visitors to your site. Likewise, try to consider this: if your website is hard to use, then there’s a huge risk that no one would even try to use it.

The key for this is “SIMPLICITY.” After completing your first storyboard, try to see yourself as a first time visitor. Would you be interested in browsing the site? If the answer is yes, that means your storyboard design is captivating.


Using a Sitemap

Once you have an idea of what your website should look like, then it’s now time to take another step and produce a sitemap. This would be the breakdown of the pages that must be included in your website. For this, you could begin from the homepage going to the categories and subcategories. No need to be detailed, but draw simple boxes that would serve as a representation to the different sections and pages of your site.

Consistency Is a Must

As much as possible, keep the pages consistent. It’s never recommended to alter the navigation between the pages or layout. Try to find a place where your header should be located, as well as the columns, navigation, and footer. After creating a couple of pages, try to ask yourself this question, “If I was here, how would I return to the homepage?” Make everything as simple as it can be.

User Experience

In storyboarding, you should have one statement in mind. “What’s the best way to make the design stand out even more, but simple to use?” Obviously, your design should be fresh, yet exciting. Aside from that, it should also be user friendly that everyone would find it easy to browse your site.

How Is it Used

A lot of web designers utilize storyboarding in order to specify how a user interface changes in reaction to a users’ response. Likewise, it also shows things that aren’t included (internally) to the system. A good storyboard would allow the design teams to relate to the users’ experience. Even though the storyboard isn’t detailed, it’s still a way to deliver a wider picture to a set of audience.

Key Elements of Storyboarding

Generally, when it comes to storyboarding, it’s essential that these following elements are present: a brief statement or rationale that discusses what the ‘package is all about; a set of objective learning outcomes that are clearly stated in terms of the user, together with the specifications of most conditions; a set of assumed pre-knowledge; a visual representation of the screen layout, such as the user interface and how this layout could be developed during the interaction process.

Though, sometimes, several pages would be needed for a one “screen” of software; the underlying equations, data, or information that a developer is going to need in order to successfully build the program; lastly, any kind of resources, such as videos or images that could relay the message effectively.


In this section, the module/unit should be discussed. Likewise, this should also answer the question in regard to why the user should exert some time and effort in learning the method of story boarding. Aside from that, storyboarding should also explain where the storyboard fits within the course or curriculum. The answer should be explained briefly– as much as possible, within 3 sentences.

Example of a Rationale:

This section discusses about the basic concepts of __________. It’s comprised of solutions and derivations for the first and second laws of the subject.

Learning Outcomes

In this section, the specific terms needed in storyboarding are discussed. This is comprised of what the learners would be able to do after studying the materials comprehensively.

Generally, it’s composed of the following:

  •  A statement given by the learners, such as what they’re capable of doing, not what they’re going to do.
  •  It should have an active verb that would encourage external verification, such as an explanation, description, proof, list, statement, derivations, relations, manipulation, and comparison.
  •  The conditions should also be specified, discussing if the objectives would be attained in a timely manner.
  •  The set of standards related to a successful attainment– if needed.

Assumed Pre-knowledge

The “entry level” to the software should be discussed by providing any information or skills that you think the users already have. Aside from that, it’s also essential to state what level of skills is required.

In case that there are technical terms in the storyboarding that could be quite useful to the users, this should be assessed before starting and short definitions should be given. Likewise, this should easily be accessed through the glossary.

Screen Layout

A kind of software is currently being developed and it could be accessed with the help of internet browsers, such as Microsoft Internet Explorer and Netscape Navigator. Usually, it would be composed of the following:

  •  A title of the package that needed to be discussed.
  •  An area of text– this could be informational, interrogative, or instructional.
  •  Graphics section.

As much as possible, in order to implement a successful storyboarding, the proportions and layout of the graphics and texts should promote flexibility. However, it’s also advisable to avoid creating a chunk of text, but be short and concise. In the storyboard, it should have the graphics and texts needed. Likewise, if it’s necessary, you could number the storyboard sheets– as a way to show the development of the project. Don’t forget to highlight the glossary links, as well as the hyperlinks in the text.

Furthermore, the instructions should also be written, but a different color should be used.

In the event that the screen looks too “crowded,” it’s advisable to create a number of successive pages.

Additional Resources

As a rule of thumb, you must never forget to include any photographs, diagrams, video, micrographs, data, and algorithms that would complete the package.

  • If it’s needed, you could include third party videos or images. Though, it’s important to ensure that the source reference would be mentioned.
  •  It’s important to incorporate any data or algorithms that are needed. This would speed up the development process and reduce the risks of committing errors.

Useful Storyboarding Techniques

Without a doubt, a lot of people don’t enjoy reading large amounts of text off-screen. Thus, it’s ideal to keep the text as short and concise as possible.

  • Don’t discuss about a particular subject excessively.
  • Never procrastinate and try to stuff a lot of words in a single page. Instead, try to build up challenging concepts all throughout the succession of pages.
  • Include several self-assessment exercises, if possible. “Ask. Don’t tell.”
  • A glossary of definitions should also be provided in order to lessen the amount of initial on-screen text.
  • Consider hiding additional explanatory texts if you can.
  • Hyperlinks should be included in other pages as well.


The graphics capabilities play a vital role, especially on a computer-based deliveries. For the purpose of storyboarding, it’s important to classify graphics in chronological order.

Static Graphics

This could be quite useful, especially when embellishing the software. However, because of lack of inactivity, this shouldn’t be the backbone of the entire package.


The preceding step would be the animations. These are the series of graphic images that run in sequence to give the concept of the package.


This gives the maximum level of interactivity, wherein the users are allowed to explore the concepts, relationships, processes, etc.

If there’s a need for video within the story, it should be discussed on an individual basis.

Pen and Paper

Lastly, the important tools should never be looked upon. However, instead of automatically storing and reusing the gathered data, the user should never forget to write down the parameters, data, etc. If needed, a data sheet could be printed afterwards.

Adding User Interactivity

There are several ways on how you could incorporate interactivity to a software, and it’s often limitless. Some of the most well-known methods are the following:


This would be recreated on the screen and the user could select and operate the apparatus in order to change the parameters and experiments.

  • Graph-plotting
  • Drag and drop
  • Equations and derivations
  • Matching
  • Self-assessment exercises
  • Sorting
  • Identifying


Overall, storyboarding is very important, especially in the development of applications and the like. It tackles about the scenes, controllers, views, hierarchies, and how certain scenes are connected to each other– the important components of storyboarding.


Jessica is the Lead Author & Editor of UsabilityLab Blog. Jessica writes for the UsabilityLab blog to create a source for news and discussion about some of the issues, challenges, news, and ideas relating to usability.