Posted on October 5, 2022 by Webfor I learned about storyboarding in college during my film and animation courses. Storyboarding is visually laying out the story the creator wants viewers to experience. The most common use of the term storyboarding is in the entertainment industry. A most extreme version of this would be storyboarding for animation. Artists will draw frame by frame: the focus/character of the scene, what emotion they want to portray, and the action they want the viewers to follow. ireframes and prototypes are to web design as storyboarding is to animation. The Benefits of Storyboarding/Prototyping There are several benefits to creating wireframes: Can see the visual flow of the site Helps arrange content Establishes the feel and brand of the site Helps clients visualize the site Makes the handoff between designer and developer easier Allows you a better opportunity to see missing content or potential improvements Storyboarding starts with the basic building blocks designers use to convince users to take action The point of creating a storyboard, outline, or prototype is ultimately to help ensure that you are getting your point across. How Do You Go About Creating Wireframes/Prototypes? As mentioned, the process of creating a wireframe/prototype is much like writing an essay. You start with a topic. Next, you research the topic. Then you create an outline, write your first draft, revise it, and then complete a final draft. The site’s topic would be (for example) creating a site for a flower shop. Research would include: speaking with the florist and learning about the shop; discovering features that would appeal to flower seekers; and learning about actions flower seekers can take after being sold their flowers. Next would be creating an outline, which would be your sitemap. Sitemaps show how to link between different topics/pages in a logical flow of information. The first draft would be equivalent to creating the wireframe. The general goal of the wireframe is to have the majority of your content flushed out so that it gives a general feeling while not yet being finalized. When revising a paper, you might ask your teacher or classmate to look at the paper and give you feedback. The design equivalent would be showing your wireframe to a coworker or the client for feedback and suggestions. At some point, your first draft evolves into a final draft. Thus, your wireframe becomes your prototype. You may be asking yourself: Shouldn’t your final draft be the live site? To understand the answer, you need to know the difference between high fidelity and low fidelity and between wireframes and prototypes. The definitions of high fidelity and low fidelity wireframes and high fidelity and low fidelity prototypes differ from person to person. How I Think About Wireframes and Prototypes Low-fidelity wireframes can be as casual as a bunch of boxes drawn on the back of a napkin or a document laid out in Adobe XD (RIP Figma?) with grey boxes and Lorem ipsum. High-fidelity wireframes have indicators that certain elements might have a particular behavior. For example, some text might have link styling but not necessarily link to anything yet. Low-Fidelity Wireframes vs. High-Fidelity Wireframes Low-fidelity prototypes are when the design has photos and videos, copy, colors, and branding applied to the site. A prototype becomes high fidelity when there are links between pages, hover effects, and customized features, such as having design elements animate onto the screen while scrolling. Some consider low-fidelity prototypes to be mockups. Low-Fidelity Prototypes vs. High-Fidelity Prototypes So the final draft is a prototype and not the live site because this would be the stopping point for the designer. They have created a design document to communicate to the client and developer what the site should look like, how it should flow, and what it should do. Prototyping is part of having a quality designed website that effectively reaches your target audience.