How to create a storyboard

Most people commonly associate storyboarding with animation or video production. It's a rough sketch or comic strip detailing key scenes and mapping out the shot sequences, camera movement from scene to scene, and overall flow prior to video creation.

However, a UX design artist can immensely benefit from storyboarding. But what is a storyboard in web design, and how can it improve it?

Spend 20–40 minutes writing or sketching the steps that your customers will take or experience when using your product.

For example, I may want a visitor to my website to see my company logo first to start understanding my brand. In book writing, this may be the exposition: introducing the setting and characters, but this is often referred to as the ‘flow’ or customer journey of your product in the design discipline.

Consider what you what your customers to see and it what order.

If you’re completing these design exercises in sequence, use your design brief from the last section, and organize your ideas and information into the story that you want your customers to experience.

Use text, shapes, stick figures, arrows and images to create a story using the Frames in this file. Consider this a sketching phase of design UX design.

You are focusing on how your customers will engage with your product, not the visual polish. Don’t focus on color and font choices or laying out design elements yet. Instead, try using just basic shapes and text.

If you are designing a phone application, your first storyboard frame may be the home screen of the app and the second storyboard frame is the desired action that you hope they take next. Consider what you want your customers to see first and then use shapes and text boxes to create that here.

If you intend to design for a mobile phone, you may want to change the size of these frames to match. There is a Frame drop-down in the top right that appears when a Frame is selected. You can use this to change the shape of these Frames.

When you finish, press the Present button in the top right corner to see each Frame of your storyboard in order.

More about storyboards

A storyboard is a visual organization of the ideas and structure of a proposed experience in the form of illustrations, images, or screens presented in sequence for pre-visualizing and ordering.

They are great tools for explaining how a customer will progress through your product on their journey, but they are also incredibly useful for sharing your vision with your team or clients.

Storyboarding is commonly used in the television, film, animation, and video creation industries as well. The animators at Pixar created a course on building a traditional storyboard for storytelling, available on Khan Academy.

Storyboarding in web and app design

Websites and applications are also often designed or planned with storyboards and wireframes. The difference is subtle, but usually storyboarding better captures the experience that a customer would feel—the summary of the experience. Wireframes demonstrate the more practical story or interaction and user flow, primarily showing the structure of the information.

Go to next section