
{"id":7084,"date":"2021-07-19T17:47:41","date_gmt":"2021-07-19T15:47:41","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/?p=7084"},"modified":"2021-09-15T10:44:32","modified_gmt":"2021-09-15T08:44:32","slug":"what-is-a-storyboard","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/what-is-a-storyboard\/","title":{"rendered":"What Is a Storyboard? Your Ultimate Storyboarding Guide"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Perhaps you\u2019ve heard the term \u201cstoryboard\u201d before from a character in a glamorous (and incredibly unrealistic) movie portrayal of an advertising agency. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Or, maybe it brings to mind a flurry of sketches tacked to a wall surrounded by creative types squinting at them with lowered brows, fingers stroking visible\u2014and invisible\u2014beards as they analyze the work in front of them. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The word \u201cstoryboard\u201d could even mean absolutely nothing to you at all; you may have arrived at this article because you\u2019re curious to learn more.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Whatever your particular knowledge of the term, by the time you finish this article, you\u2019ll have a much better understanding of what a storyboard is, why you might need one, when to use it, and a whole host of additional relevant information. Here\u2019s what we\u2019ll cover:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-is-a-storyboard\">What is a storyboard?<\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#storyboard-when-why\">When and why do you need a storyboard?<\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#storyboard-elements\">What elements make up a storyboard?<\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#storyboard-types\">What are the different types of storyboards?<\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#how-to-storyboard\">How to make a storyboard<\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#wrap\">Wrap-up and next steps<\/a><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">So: what&#8217;s a storyboard? Let\u2019s get started!<\/span><\/p>\n<h2 id=\"what-is-a-storyboard\"><span style=\"font-weight: 400;\">1. What is a storyboard?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s begin with the basics. A storyboard is a graphic portrayal of a narrative, concept, or script, divided into sequential scenes (panels). They are generally used to map out how a script or story will look once it is animated or acted out, but people utilize them for a variety of situations.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Think of the classic parable, \u201cGoldilocks and the Three Bears.\u201d If you were to create a storyboard for this tale, perhaps the first panel would show Goldilocks looking a little worse for wear in front of the bears\u2019 house. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The next few scenes would portray her eating different porridges with a sour look on her face, followed by a drawing with her eating yet another bowl of porridge, this time with a smile. The images break down the story into bite-sized scenes and help people visualize how it will come to life.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>\u201cStoryboarding\u201d is simply the act of creating a storyboard.<\/strong> For the best results, you\u2019ll need to strike a balance between providing enough visual information to be able to tell the story so others can understand it and making it overly detailed. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Some storyboards can be very rough and simple; other times, they can be very elaborate. It depends on the situation, how much time you have, and what stakeholders (your team, clients, etc.) are looking to use them for (more on that later).\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7095 size-full\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/A-guide-to-storyboarding.jpg\" alt=\"A designer in side profile, sketching a storyboard\" width=\"1200\" height=\"600\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/A-guide-to-storyboarding.jpg 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/A-guide-to-storyboarding-300x150.jpg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/A-guide-to-storyboarding-1024x512.jpg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/A-guide-to-storyboarding-768x384.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2 id=\"storyboard-when-why\"><span style=\"font-weight: 400;\">2. When and why do you need a storyboard?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Stories are an excellent way to communicate information. They make it easier for people to understand complex concepts and tend to be more interesting than informative text. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">And, since graphics are more straightforward than the written word, a storyboard can break down even more communication barriers. Given their versatility, it makes sense that people use them in a variety of situations.\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Who uses storyboards?\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">People typically use storyboards to map out scenes that comprise a movie or an animation. As a visual medium that\u2019s ideal for <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/ux-design-team-story\/\">storytelling<\/a>, video is incredibly popular for marketing and sales collateral, product use instructions, and even pitching internal strategies. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Marketers use videos to explain complicated value propositions, map out customer journeys, and entertain potential customers to boost brand awareness.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Storyboarding helps ensure the message is on point and achieves the intended goal, and that the scenes all work together fluidly before moving onto any actual film production\u2014which can save quite a lot of money in the long term!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While storyboard use is rife across virtually all industries, the movie industry heavily relies on them, especially for animated films. Filmmakers use them to pitch to studio bosses, tweak storylines, and map out scenery, among other things.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Storyboards are also excellent teaching vehicles for educators, especially when young children are the target audience. They can be low-budget (poster board, anyone?) and easy to create without a lot of resources. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Even better, they can illustrate concepts that youngsters may have trouble remembering without a visual aid, like how to wash their hands properly or how to react in case of a fire or other emergency.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What are the advantages of using a storyboard?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A storyboard can help get everyone on the same page quickly. Humans process images a stunning <\/span><a href=\"https:\/\/www.t-sciences.com\/news\/humans-process-visual-data-better\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">60,000 times faster than text<\/span><\/a><span style=\"font-weight: 400;\">, which means that no matter how brief you make your pitch or presentation, it will ultimately take longer for people to understand it because there are words involved.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In addition to communicating ideas faster, a storyboard is also a great way to hone an idea without going too deep into further production. A script or a concept can sound amazing in principle, but you may create a storyboard and realize it just doesn&#8217;t translate well into visual scenes.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A storyboard is an especially important part of the animation design process. Just like for any video, it provides a visual map that communicates the script or narrative, but it can also include critical requirements that will give clients an idea of cost and time to produce. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Establishing these parameters before moving forward into the drawing phase will lead to a much smoother process down the line, trust us!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Finally, storyboards are also helpful to video editors, as they\u2019ll be able to use them as points of reference to ensure the final cut adheres to the original vision.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So now you know why storyboards are so important and who uses them. Now onto how to create them!<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7096 size-full\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/What-is-a-storyboard-guide.jpg\" alt=\"A hand-drawn storyboard\" width=\"1200\" height=\"600\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/What-is-a-storyboard-guide.jpg 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/What-is-a-storyboard-guide-300x150.jpg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/What-is-a-storyboard-guide-1024x512.jpg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/What-is-a-storyboard-guide-768x384.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2 id=\"storyboard-elements\"><span style=\"font-weight: 400;\">3. What elements make up a storyboard?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A basic storyboard\u2019s components are very straightforward. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">In their basest form, all you\u2019ll need to start is a concept, script, or story\u2014this forms the basis for what you are trying to communicate through the visualization. However, the most comprehensive storyboards will include several of the following components:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dialogue or voiceover narration for each panel<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Time frame for each scene, which are especially critical for animation and film because they set the stage for budget, the feel of the final product, and the resources necessary to bring it to life<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Camera details, like the type of shot, camera location, and how to transition from scene to scene\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Aspect ratio<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Let\u2019s move onto the types of storyboards you can create.\u00a0<\/span><\/p>\n<h2 id=\"storyboard-types\"><span style=\"font-weight: 400;\">4. What are the different types of storyboards?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Storyboards have evolved over time. What started as a way for Walt Disney Studios to <\/span><a href=\"https:\/\/www.illustrationhistory.org\/genres\/moving-image-storyboard\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">explain the production process to animators<\/span><\/a><span style=\"font-weight: 400;\"> in the 1930s is now a ubiquitous part of the film process and quite helpful in a multitude of situations.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> Part of that evolution has included branching out beyond the traditional pencil-on-paper version to digital. So, what are the different types of storyboards you can create today?<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Traditional storyboards<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A traditional storyboard is probably what most people envision when they hear the term. The designer will typically use pencil to create conceptual sketches that form the basis of a movie or animation.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> The panels are detailed enough for the production team and client to comprehend the narrative but are intentionally rudimentary, so if changes need to be made, the designer can complete them quickly and efficiently.\u00a0\u00a0\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Thumbnail storyboards<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Thumbnail storyboards are used to hash out details of a scene in a movie. Though tiny and loosely drawn, they are more granular and detailed than a traditional storyboard because they include the type of shot you want for each part of the scene and how to position the camera.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The actual drawings in a thumbnail storyboard don\u2019t have to be anything more than stick figures! You can draw several versions of a thumbnail storyboard and choose the best one to add to your full storyboard.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Digital storyboards<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Many agencies and animation studios rely on digital storyboards to show what the final cut of an animation will look like. They design characters and scenery on computers, so by sharing a digital storyboard with a client, they achieve two goals with one output. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The client can see the character style and review the scenes, shots, and narration, all in one fell swoop. Pretty handy, right?<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7097 size-full\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/A-complete-guide-to-storyboarding.jpg\" alt=\"A hand-sketched storyboard\" width=\"1200\" height=\"600\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/A-complete-guide-to-storyboarding.jpg 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/A-complete-guide-to-storyboarding-300x150.jpg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/A-complete-guide-to-storyboarding-1024x512.jpg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/A-complete-guide-to-storyboarding-768x384.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>For inspiration, you can also take a further look at each of these four types in our <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/best-storyboard-examples\/\" target=\"_blank\" rel=\"noopener\">guide to the best UI storyboard examples<\/a>.<\/p>\n<h2 id=\"how-to-storyboard\"><span style=\"font-weight: 400;\">5. How to make a storyboard<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">For your first storyboard, start simply. You\u2019ll need to start by creating a script (or at least have a concept you can elaborate on with relative ease).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you have a script or some general notes on a narrative, you can start fleshing out ideas for portraying it visually in different scenes. A two-column chart can be helpful for this step. In one column you\u2019ll include the script; in the other, you can start jotting down rough sketches of what it could look like.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you\u2019re satisfied with your chart, you can begin creating the storyboard, opting for either the traditional or digital version. If you want to get more detailed, first do your thumbnail storyboard and integrate it into your final product. Let the drawing begin!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For a more in-depth tutorial, check out <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/how-to-storyboard\/\">this complete step-by-step guide on how to create a storyboard<\/a>.\u00a0<\/span><\/p>\n<h2 id=\"wrap\"><span style=\"font-weight: 400;\">6. Key takeaways and next steps<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">So there you have it! Now you know what a storyboard is, how to use a storyboard in a variety of situations, why they are so helpful, the different types, and even how to create your own. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019d like to learn more about animation but are completely new to the world of design, it\u2019s worth easing in with a <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/short-courses\/become-a-ui-designer\/\"><span style=\"font-weight: 400;\">free introductory UI design course<\/span><\/a><span style=\"font-weight: 400;\">. At the same time, you can delve deeper into the fascinating topic of animation design with these articles:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/ui-animation-beginners-guide\/\"><span style=\"font-weight: 400;\">What is UI animation? A guide for beginners<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/what-does-an-animation-designer-do\/\"><span style=\"font-weight: 400;\">What does an animation designer actually do?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/animation-tutorials-for-beginners\/\"><span style=\"font-weight: 400;\">9 Awesome UI animation tutorials for beginners<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Perhaps you\u2019ve heard the term \u201cstoryboard\u201d before from a character in a glamorous (and incredibly unrealistic) movie portrayal of an advertising agency. Or, maybe it brings to mind a flurry of sketches tacked to a wall surrounded by creative types squinting at them with lowered brows, fingers stroking visible\u2014and invisible\u2014beards as they analyze the work [&hellip;]<\/p>\n","protected":false},"author":109,"featured_media":7094,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[4],"tags":[],"class_list":["post-7084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design"],"acf":{"homepage_category_featured":false},"modified_by":"Matthew Deery","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/7084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/109"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=7084"}],"version-history":[{"count":0,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/7084\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/7094"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=7084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=7084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=7084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}