First, you will need to first storyboard your solution.!

ou’ve got a big shoot coming up. You want to visualize the scenes you plan to shoot with a storyboard, but you’re wondering how to make a storyboard that touches on everything a good storyboard should.

Odds are many filmmakers create storyboards “wrong.” Or (*cough*) ignore the crucial step of storyboarding altogether. Drawing and formatting fears, technical limitations, concerns about budget — there are a lot of reasons to avoid storyboarding.

But it doesn’t have to be stressful. You just have to know how to create a storyboard in the most efficient way. These nine easy steps will have you storyboarding like a master filmmaker in no time.

Why storyboarding is essential?

Here at StudioBinder, we’ve made storyboards for commercials. We’ve made movie storyboards, video storyboards, animation storyboards, and pretty much any storyboard you can imagine. We’ve learned why the storyboard is important on so many levels.

It’s a presentation tool, indispensable for pitches.

It’s a planning tool, critical for pre-visualizing your project.

It’s a collaboration catalyst that puts your team on the same page and gets everyone’s creative wheels turning. We’ve figured out that the only wrong way to storyboard is to skip the step altogether.

Let’s go over how to create a storyboard the right way. It’s easier than you may think.

But before we go too much further, let’s answer the question: What is a storyboard?

STORYBOARD DEFINITION

What is a storyboard?

A storyboard is a visual representation of a film sequence and breaks down the action into individual panels. It sketches out how a video sequence will unfold. A storyboard is similar to a trial-run for your finished film, video, or commercial, laid out in a comic book-like form.

How to make a storyboard (guidelines):

• Comprised of a sequence of drawings, sketches, reference images or photographs of stand-ins.
• Provides a visual guidance for look, feel and movement.
• Indicates the staging of actors and camera placement.
• May include dialogue and sound direction.

Ready to learn how to make a storyboard?

Here’s your guide to writing a storyboard like a pro.

HOW TO CREATE A STORYBOARD

1. Mark up your screenplay

Before you start gathering images, drawing storyboards, hiring a storyboard artist, or doing any nuts-and-bolts illustration and previsualization work — before you even ask, “What does a storyboard look like?” — you’ll need to know what story you’re telling.

This means considering the details of every scene. The physical space, wardrobe, blocking, staging, action, etc. This phase is considered breaking down the script (aka “marking the script”) where you highlight all of the key elements that will affect the storyboards.

And so the very first step is to read your script and visualize it as an audience would.

Go ahead.

Good, you’ve read it.

Now break it down and mark it up!

The breakdown shapes the vision of the project.

If we went back two decades, marking the script would commonly be done with highlighters and pens right on a print-out of a script. Every scene’s markings would then be summarized on a script breakdown sheet, printed, copied, collated, and distributed between the production staff.

But we live in a digital world and we need to be able to share our breakdowns in the cloud, and make adjustments without the rigmarole of printing. Preferably you’d use script breakdown software, but you can still do this the old fashioned way if you like.

We’ll import our script into StudioBinder, and automatically get all our scenes lined up. Now we can immediately click-and-drag to identify key elements.

What are the locations? Costumes? Props? Sets? Who are the cast members? How important is each element, and how will it look?

All of these elements affect what will eventually needs to be included in the storyboard. It’s also the foundation of identifying your project’s budget (which we cover in another post).

This is sample of what a scene breakdown looks like. Notice all the tagged (colored) elements that comprise a single scene!

How to write a storyboard: Start by marking up your script

As you go scene to scene, analyze the screenplay. Decide how you want each scene to look, and how you want to shoot it.

Whether it’s a movie storyboard, video storyboard, or commercial visualization, a script breakdown tells you what storyboards you need to create.

Notice we haven’t drawn a single storyboard yet. At this point, it’s all in the breakdown.

If you’re a seasoned director or just learning how to make a storyboard, marking up the screenplay in great detail is the first step.

How to storyboard a video: Start with this script breakdown video

What you need to mark up varies from script to script and from writer to writer. Some writers are incredibly detailed. They’ll coordinate every punch and kick of a fight sequence.

Others will simply write “They fight.”

Both are valid. Your job is to fill in any blanks. And rest assured, there will be blanks — this is good!

RELATED POSTS

• Start marking up your script online here →
• FREE Download: Free Script Breakdown Sheet Template →
• Video Budgeting 101: How to Budget a Script Breakdown →

HOW TO MAKE A STORYBOARD FOR A MOVIE

2. Determine your aspect ratio

Even if you think you know nothing about how to storyboard a video, even if you’ve only just learned what a storyboard is, you probably know that a lot of framed boxes are involved.

But how big should those storyboard frames be?

Creating your storyboard panel is simply a matter of determining your aspect ratio — the size and shape of the frame of your camera.

Not sure how to pick your aspect ratio? Check out the following video and you’ll know.

Sketch the user flow on a whiteboard or on paper!

Paper Prototyping: The 10-Minute Practical Guide

In the high-tech digital UX design world, pen and paper are still the preferred choices for fast low-fidelity prototyping.

Contrary to assumptions, UX teams spend a lot of time away from the computer, writing on sticky notes, whiteboards, notepads, and adding annotations to paper prototypes.

The more planning and preparation designers can do before sitting down at the computer, the quicker they can design wireframes, mockups, and prototypes.

Paper prototyping is a crucial part of the early UX design thinking process because it fosters collaboration, allowing designers to explore lots of ideas at a minimal cost.

With UXPin’s design systems, UX teams can jump straight from paper prototypes to high-fidelity prototyping, significantly accelerating the design process. Sign up for a free trial and explore UXPin’s prototyping features today!

What Is Paper Prototyping?

Paper prototyping is the process of developing ideas and designing user flows using hand-sketched “screens” that represent a digital product. Paper prototypes test on a high-level user experience rather than interaction design.

Paper prototypes are low-fidelity because they don’t have any functionality. For this reason, paper prototypes designers rarely share paper prototypes outside of the department.

The primary goal of paper prototyping is to map our information architecture and visualize user flows.

Design teams often lay paper screens on a desk or flow and imagine how real users would navigate to reach an end goal. The designs are rudimentary and usually sketched in black and white. Content is limited, with only headlines and call to action links displaying any legible text.

Sometimes, teams will build a mock iPhone or Android device using a piece of cardboard to simulate swipes, scrolls, and other basic functionality. These mock devices also allow designers to see how their designs might look within the confines of a mobile phone — especially useful if you’re designing a mobile app!

While the main benefit of paper prototyping is speed, some designers use tools like UI Stencils to design accurate, aesthetically pleasing screen layouts — vital if you plan to present paper prototypes to stakeholders or testing participants.

UXPin’s journey started with a similar paper prototyping product called Web Kit. A paper pad paired with a design tool that automatically turns paper prototypes into wireframes.

Paper Prototyping Digitally

With tools like reMarkable and Apple Pencil, teams can collaborate remotely while enjoying the speed and versatility of the physical paper experience.

Using digital sketch tools can accelerate the paper prototyping process. Designers can make changes faster (without needing to redraw a screen), attach detailed notes, and upload finished prototypes instantly to design tools like UXPin to build high-fidelity prototypes or go with wireframing.

Paper prototyping digitally also reduces paper and plastic waste, which is better for the environment :)

Advantages and Disadvantages of Paper Prototyping

Aside from speed and flexibility, there are several advantages and disadvantages to paper prototyping.

Here are some of the pros and cons of paper prototyping from our free eBook: The Ultimate Guide to Prototyping.

Advantages:

• Rapid iteration — It’s easier to discard a paper design that took 5 minutes vs. a digital mockup that you spent more than an hour perfecting.
• Low cost — Paper is cheap, and even additional tools and kits won’t break the bank.
• Increased creativity — The freedom of pencil and paper fosters experimentation and new ideas. Design tools have their place in the design process but can stifle creativity in the early design stages.
• Team-building — Paper prototyping is a rare opportunity where teams get together in a creative environment. Working with pen and paper brings out child-like energy, which can help form bonds and strengthen coworker relationships.
• Minimal learning curve — Everyone can sketch ideas, making paper prototyping a great way to involve other departments like marketing, development, and stakeholders.
• Documentation — Paper prototypes serve as excellent documentation. Designers can make notes and outline ideas to reference throughout the project.

Disadvantages:

• No user reactions — With no user feedback, it’s difficult to know whether or not your ideas will work. Even if you test your paper prototypes with participants, the feedback will be limited.
• Inaccurate feedback — Outside of UX teams, paper prototypes might be challenging to interpret, limiting any accurate or meaningful feedback.
• Potentially unnecessary — With rapid prototyping tools like UXPin, paper prototyping might add additional, unnecessary steps to the design process. UXPin comes with pre-made design systems, so designers can quickly drag-and-drop high-fidelity elements to design and edit working prototypes quickly.

Sign up for a 14-day trial and see how quickly you can turn paper design concepts into high-fidelity prototypes that function like the final product using UXPin.

When to Paper Prototype

Jake Knapp of Google says that “paper prototyping is a waste of time“ — but admits that paper prototyping is useful for early-stage conceptualizing.

Once you move from paper to digital, there’s no reason to return. Some designers might return to paper prototyping for new features or a product redesign. But even then, returning to paper prototyping might be unnecessary.

For example, PayPal’s product team builds new products and features using UXPin Merge. UXPin Merge imports fully interactive UI code components to the design tool. So, instead of starting from scratch, PayPal’s product teams simply drag and drop fully functioning elements from the company’s design system to build new user interfaces. No need to return to paper and sketch out ideas!

Try UXPin Merge and start designing new features and user interfaces straight away!

That said, paper prototyping is perfect for early-stage conceptualizing. Its speed, ease, and simplicity make it accessible to all teams (including non-designers) while fostering experimentation and creativity — something you can’t achieve with a digital canvas.

Paper prototypes are ideal for:

• Brainstorming meetings and sessions
• Basic internal user testing early on

How to Paper Prototype

Paper prototyping is the fun part of product design. It’s an opportunity for team members to brainstorm and sketch ideas.

Don’t worry about how beautiful your sketches look. Even the best UX designers aren’t brilliant sketch artists! The goal is to visualize your ideas and get the creative juices flowing.

Six Tips to Building Paper Prototypes

1. Use printer paper and cheap pencils/pens. Ruled or line pads often stifle creativity as designers get side-tracked drawing between the lines rather than developing lots of ideas.

2. Start with a warm-up! Sometimes it takes a few sketches to loosen up and get into the flow. Crazy eights is a fantastic paper prototyping method to design many versions of the same screen fast. After a couple of crazy eights rounds, you’ll have many ideas to expand on.

3. Prototype mobile-first or progressive enhancement starts with the smallest screen and adjusts the layout as you scale the viewport (this applies to mobile and web design. Scaling up is much easier than scaling down because you prioritize content and avoid elaborate desktop layouts that don’t translate to mobile.

Side note: UXPin’s Auto Layout lets you automatically resize, fit, and fill your designs. A handy feature for mobile-first design.

4. Stick to one sketch per screen (a piece of paper). Paper prototyping requires you to create user flows by placing pieces of paper in sequences. You’ll also switch these around or add new screens. If you have more than one screen on a piece of paper, you lose this speed and flexibility.

5. Iterate as the ideas come to mind. The goal is quantity, not quality. When you create lots of paper prototype ideas, you often end up taking bits from each to get the final result — like a Lego set, but with paper.

6. Planning is crucial for a successful paper prototyping session! Ensure you have enough pens (black fine-tipped markers work best), paper, scissors, glue, post-it notes, index cards, tape, cardboard, and anything else you think your specific project might need. A whiteboard and marker are also great for outlining user flows collaboratively.

Pro tip — assign the job of preparing your paper prototyping to an arts & crafts enthusiast! Every team has at least one, and they always make sure you have more than enough of everything you need!

Testing & Presenting Paper Prototypes

Testing & presenting paper prototypes outside of the UX department is always tricky. The stakeholders or usability participants have to “imagine” what will happen, which can confuse or divert focus from what you’re trying to present.

Here are some tips for presenting and testing paper prototypes:

• Designate one person other than the presenter as play the “human computer” or product simulator — The person playing the human-computer will simulate scrolling, swiping, navigating to different screens, and other functionality.
• Rehearse — Rehearsing is essential so that the presenter and simulator are in sync. The presenter can work out a good cadence for the simulator to keep up with the presentation.
• Follow standard usability test best practices — Standards like using a minimum of 5 users and recording the tests still apply. You can download our free Guide to Usability Testing for more understanding of usability standards and practices.
• If you’re giving users a paper prototype to inspect, ensure you provide guidance and annotations, so they know where to focus and what they’re supposed to test.

Take a photo

Then, design the high-fidelity mockups in Figma!

• Wireframes are one of the simplest tools you can use to convey a big idea. But the value of a wireframe goes much further than simply getting your idea down on paper or down in Figma. In this post, we’ll look at what defines a wireframe, what a good wireframe does and does not include, when a wireframe is most helpful, and how you can easily get started wireframing.

What is a wireframe

A wireframe is a simple visual guide that represents the skeletal framework of a website or digital product. Think of it as the blueprint for your final design. You’re providing enough detail so that everyone knows the shape of the wall, but you’re not getting so deep into it that you’re giving exact details on the type of brick the walls should be made of (that comes later). Though wireframes are most often created by designers, they need to be basic enough so that everyone from other designers, stakeholders, devs, and users can understand the ideas.

Wireframes are not the time to set anything in stone. In fact, the opposite. The power of wireframes is that they provide an opportunity to gather more information through usability research and stakeholder input. Because wireframes are so simple, people can more easily focus on functionality and the user experience rather than getting hung up on colors and other aesthetic elements.

Types of wireframes

In a traditional design process, wireframes come after on-the-fly hand-drawn sketches and right before high-fidelity mockups or prototypes. There are two levels of wireframing, low fidelity and high fidelity — though you can go straight from a low fidelity wireframe to a prototype and skip high fidelity wireframing as a distinct step.

Low fidelity wireframing

Low fidelity is the most basic type of wireframing. It’s so simplistic, that paper and pen will still suffice as a way to represent your ideas, however, creating your wireframes in Figma will allow you to easily share them and make sure your team has access to your latest thinking as you iterate. Low fidelity wireframes are done in grayscale with a focus on layout and high-level interactions. UI elements and content are represented by basic shapes like squares, triangles, circles, and lines.

Low fidelifty wireframes utilize basical shapes to communicate page structure and layout.

High fidelity wireframing

High fidelity wireframing takes what you put together in the low fidelity stage and sprinkles in more of the detailed elements. High fidelity wireframes include visual markers and branding signifiers like colors, graphics, and font style. UI elements look realistic and might even include textures and shadows. At this stage, a designer might also choose to add in images and copy. This wireframing kit will get you started with all the basics you need to create great looking high fidelity wireframes.

To duplicate the above file, click here.

Best practices for creating wireframes

There are no hard and fast rules for what you need to include in your wireframe and what you must leave out, but there are some best practices to help you get the most out of your work.

Keep aesthetic elements simple

Colors should be grayscale: white, black, and the grays in between.

Use two fonts max

At this stage you are using typography to communicate the hierarchy of information. Limit yourself to two fonts to make the hierarchy clear. Change the font size and use bold and italic as needed to differentiate and call attention to different pieces of information in your wireframe.

Represent graphics and images with boxes

Keep the focus on the layout by using simple symbols that relay the future placement of graphics and images. Call out video placements with a triangle as a play button on applicable boxes. Image placement can be represented as squares or rectangles with Xs through them.

How to represent videos and images in a wireframe.

Consider screen size

Wireframes should be equally creative and technical. Consider the many different places, stages, and ways your design might be used. Three questions that might drastically influence your wireframe or versions of your wireframe include:

Supported devices — Your design adapts to support desktop and mobile. You’ll want to wireframe how the design changes in each instance.

Screen orientation — Depending on if you’re looking at the design in portrait or landscape, some things might need to shift and resize.

Context of use — If a specific feature in your product is more geared to desktop use, consider cutting it from the mobile version upfront. Reducing the design to match how people will actually use it saves a lot of time and money.

When to use a wireframe

There’s almost no wrong time to use a wireframe, but there are some instances when they can be extra helpful. Whether you’re trying to explain your idea to someone, get all the stakeholders on the same page, force a group decision, or validate your plan, a wireframe presents a simple visual representation that everyone can point to.

Get stakeholders to focus — Because the magic of a wireframe lies in the simplicity, your clients, colleagues, and execs won’t get hung up on downstream details like colors and images. Instead, they’ll be forced to zero in on important structural elements.

Catch problems early — Though they don’t present the actual functionality of a page, wireframes allow you to map out how all the elements will look and interact once the design is put into a working prototype. It’s way easier to re-work part of a wireframe than it is to rebuild a prototype or web application.

Cut down on revision time — Related to catching problems early, putting an idea in front of the team or a client in a wireframe gives everyone the opportunity to chime in at a time when it’s relatively easy to adjust and revise. By getting collective feedback early, you’ll cut down on revision time later.

Decide content prioritization — Wireframes naturally reveal space constraints and the hierarchy of elements on the page, without relying on the content itself. Seeing the elements laid out anonymously will help everyone decide if the right weight is given to the most important content.

Test usability with users — When you’re testing out a new idea with someone, they don’t need to see every little detail for you to determine if the idea is going to work. Wireframes give you just enough to work with so that you can validate your approach or pinpoint where adjustments are needed.

Wireframing in Figma

Some designers like to continue sketching wireframes by hand using a blank sheet of computer paper, or dot grid journals. For those that want to jump into designing on-screen, Figma has a wireframe template to get you started. Figma is browser-based, so sharing your wireframes is as easy as sharing a link. Your team can leave comments right on the file so you can easily get feedback and field questions.

Your wireframe is the blueprint for what happens next in the process. Once it’s in a good place, add in the content and copy and keep building from there. Eventually, what started as a line drawing will become a fully functioning product.

To come up with a proper design, product teams use a lot of different tools and techniques. The information gathered from contextual inquiries and user interviews become product requirements on top of which the actual design is built. But somewhere in all of this, there are the real people for whom the products are designed for. To design products that make the user’s life better, product teams must understand what’s going on in the user’s world. And that’s where storyboards come in.

In this article, I will explore the concept of UX storyboards and how storyboarding help designers create better products.

Grow your business with the Shopify Partner Program

Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.

Sign up

What is a storyboard?

A storyboard is a linear sequence of illustrations, arrayed together to visualize a story. As a tool, storyboarding comes from motion picture production. Walt Disney Studios has used sketches of frames to visualize a story since the 1920s. Storyboarding became an essential tool of movie makers because it allowed them to create the world of a future film without investing too much time and resources into the actual production.

How storyboarding can help product design

A UX storyboard is a great instrument for ideation. Storyboarding helps visually predict and explore a user’s experience with a product. Visualizing interactions leads to an explosion of creativity in problem solving.

Here are some ways storyboarding can help product teams to design better products.

Build empathy for users

Many product teams use the concept of user personas when they work on a product. A user persona is an extremely valuable tool for product designers because it brings empathy in design process. It helps product creators recognize that different people have different needs, wants, and expectations. But all this happens only when a persona is considered in the context of a specific flow.

Without proper context, a user persona will be nothing more than a design artifact. A product team can use it as a reference, but it won’t deliver much value.

By visualizing the user journey in the form of a UX storyboard, you create context for user interactions. Well-designed storyboards make you believe that a real person in a real place is doing real things. And this brings empathy in interactions — as human beings, we often empathize with characters who have challenges similar to our own.

You might also like: Using JQuery Image Zoom and JavaScript Zoom for Product Images on Shopify.

Gain a better understanding of a user journey

After reading the previous point, some designers might argue that they can create context using user journey mapping. That’s true. A journey map is a tool designers use to visualize experiences from the user’s point of view, across all the different touch points they have with a product as they seek to achieve a specific goal or goals.

But similar to user personas, user journey map can be limiting. Of course, a well-designed user journey map will help you find barriers people face when using a product, but it will be hard to step into the user’s shoes and walk through an actual process of interaction, step-by-step.

By illustrating a user journey, you help people understand it. An image speaks more powerfully than just words because it adds extra layers of meaning. Storyboards allow you to visualize the user’s actions as well as the emotions they feel during each interaction. And this ultimately leads to a better user experience — product creators start to think through a process in a step-by-step manner, and it allows them to design in a streamlined way. See Chelsea Hostetter’s storyboard as an example of how they can build strong, clear narratives.

When storyboarding is especially useful

Storyboards are excellent tools for communicating ideas and building empathy. They are particularly useful in the following scenarios.

When you want to shape product strategy

If a product team is at an early stage of the design process, storyboarding allows product designers to quickly and inexpensively test multiple product visions. This is especially crucial for innovative products because a UX storyboard will help to visually predict and explore a user’s experience with a future product. A team can easily create multiple storyboards and evaluate different approaches to find the most efficient concept.

Airbnb is an excellent example of how storyboarding can help a company understand the customer experience and shape a product strategy. One of the most valuable insights the team gained from storyboarding is that their service isn’t the website — most of the Airbnb experience happens offline, in and around the homes it lists on the site. This understanding forced Airbnb to focus on the mobile app as a medium that links online and offline.

When you need to get buy-in from stakeholders

It’s fairly common that in order to design a product, a team needs to get some funds from investors. Many teams try to sell ideas to stakeholders by talking about the benefits a product will bring. But words alone are not enough to express how people will use the product.

Storyboarding can be an excellent tool for communicating ideas. But showing storyboards, you can reach stakeholders on an emotional level. Stakeholders can empathize with users, their pain points, and how a proposed product can improve their lives.

When you want to minimize miscommunication

Having an agreement on a particular direction is key to successful product development.

Storyboards are great for “pitch and critique” sessions — when a team member introduces an idea, which is then critiqued by all team members. Approaching product design with storytelling inspires collaboration, which results in a clearer picture of what’s being designed.