{"id":27240,"date":"2019-07-01T08:23:07","date_gmt":"2019-07-01T08:23:07","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=27240"},"modified":"2019-07-01T08:23:07","modified_gmt":"2019-07-01T08:23:07","slug":"storytelling-in-web-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/","title":{"rendered":"How to Use Storytelling in Web Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"27240\" class=\"elementor elementor-27240\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-98de089 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"98de089\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ebc7245\" data-id=\"ebc7245\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-13499ec elementor-widget elementor-widget-text-editor\" data-id=\"13499ec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This week, we examine several ways to use design elements to tell a story, directing the viewer to the main message of your <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/webpage-website\/\"   title=\"webpage\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5018\">webpage<\/a>.<\/p><p>We love storytelling and not just on the receiving end. Publicists, promoters, politicians and pedlars, anyone selling an idea, product or service, relies on the human need and love of story.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-131ae69 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"131ae69\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1ef7536\" data-id=\"1ef7536\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9cf2725 elementor-widget elementor-widget-heading\" data-id=\"9cf2725\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What is Story?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-987375a elementor-widget elementor-widget-text-editor\" data-id=\"987375a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Story or narrative is defined as \u201ca spoken or written <a href=\"https:\/\/www.lexico.com\/en\/definition\/narrative\" target=\"_blank\" rel=\"noopener\">account of connected events<\/a>.\u201d But we know that stories are not limited to speech and text. Moreover, stories can be told with the aid of visual elements, just as easily and successfully. From prehistoric cave paintings to Pixar\u2019s Wall-E (2008), human minds have been scanning groups of visual elements (in close proximity) to deduce a logical connecting pattern. This pattern, linear or not, is the narrative.\u00a0<\/p><p>The question is how, as authors or designers, do we ensure that all our audience members understand the story the way we intended?<\/p><p>The easiest way for the human mind to understand a pattern, is by comparing new information to known patterns. Relying on a well-known and elementary structure of story makes it easier for the audience to focus on the content itself, saving the audience time, confusion, and possibly frustration.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-463c6e3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"463c6e3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a7870fe\" data-id=\"a7870fe\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7f54a13 elementor-widget elementor-widget-heading\" data-id=\"7f54a13\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is Efficient Story Structure? <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd9a0e0 elementor-widget elementor-widget-text-editor\" data-id=\"dd9a0e0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If we want to tell our story efficiently and convey our message swiftly and directly, we must rely on well-established story structures, those first discussed by. Those structures were first discussed by Aristotle who explained that all narrative has three main parts or \u2018acts\u2019:\u00a0<\/p><h3>Act 1<\/h3><p>The audience is exposed to the characters, their relationships and their setting (the environment they live in). Here we also have an \u201cinciting incident\u201d, a call-to-action, a reason or catalyst that motivates the main character\/protagonist to move forward with a series of events.<\/p><h3>Act 2<\/h3><p>The momentum of the events rises, as the outcome of actions becomes progressively worse, solving the main problem, caused by the inciting incident becomes more desperate.\u00a0<\/p><h3>Act 3\u00a0<\/h3><p>An action or choice results in a resolution of all most or all of the main problems.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d83d56 elementor-widget elementor-widget-image\" data-id=\"1d83d56\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"373\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=373\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.01_3ActStructure-1024x478.png\" class=\"attachment-large size-large wp-image-27330\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.01_3ActStructure-1024x478.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.01_3ActStructure-300x140.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.01_3ActStructure-768x358.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1400\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.01_3ActStructure.png 1400w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-770751d elementor-widget elementor-widget-text-editor\" data-id=\"770751d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Two and a half millennia past, and the theory behind story has made some wonderful developments. But whether you subscribe to <a href=\"https:\/\/mckeestory.com\/\" target=\"_blank\" rel=\"noopener\">Robert McKee<\/a>\u2019s famous story seminars, Christopher Booker\u2019s <em>The Seven Basic Plots<\/em>, or <a href=\"http:\/\/storymind.com\/dramatica\/\" target=\"_blank\" rel=\"noopener\">Melanie Anne Phillips&#8217;<\/a> more recent <em>Dramatica<\/em>, the basic principles haven\u2019t changed whether we\u2019re using words or pictures.<\/p><p>Spoken or written stories rely on grammar and words found in dictionaries and thesauruses. In comparison, the basic materials and tools we could use to create a story in pictures seem meager and limited.<\/p><p>&#8230;or is it?\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0e6e130 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0e6e130\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2e4017f\" data-id=\"2e4017f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f030120 elementor-widget elementor-widget-heading\" data-id=\"f030120\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is Story in Web Design?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01202b8 elementor-widget elementor-widget-text-editor\" data-id=\"01202b8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When telling a story using web design elements, we shouldn\u2019t forget that we can still rely on the principles of non-web design:<\/p><ul><li>Color\u00a0<\/li><li>Line\u00a0<\/li><li>Shape<\/li><li>Values of light (and darkness)<\/li><li>Form\u00a0<\/li><li>Composition<\/li><li>Perspective<\/li><li>Space<\/li><li>Texture<\/li><\/ul><p>All elements and principles that designers or consumers of design are well aware of. Elements that, when applied to a hyper-digital environment, gain a whole new dimension.\u00a0<\/p><p>You could suggest that turning the leaf of a page is equal to scrolling down a page, in terms of viewer engagement. But unlike page turning, the actions of scrolling and clicking animate motionless design elements.\u00a0<\/p><p>Therefore when creating a visual narrative on web pages, we have far more design principles to consider:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e871d3f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e871d3f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4056007\" data-id=\"4056007\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-340d513 elementor-widget elementor-widget-heading\" data-id=\"340d513\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Animation<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cab63ac elementor-widget elementor-widget-text-editor\" data-id=\"cab63ac\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Take all the principles and elements of non-web design that were once fixed in value and location, and let them loose; Blend from one color to another, brighten and cast shadows, shift position and point-of-view, shrink or expand in size, morph from one shape and to another.\u00a0<\/p><p>Beyond the boundaries physical materials, outside the box you are only limited by your imagination and ingenuity (and your clients\u2019 brief, if we\u2019re honest).\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-741a412 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"741a412\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2734d6c\" data-id=\"2734d6c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5e00c61 elementor-widget elementor-widget-heading\" data-id=\"5e00c61\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Functionality<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b74b2b9 elementor-widget elementor-widget-text-editor\" data-id=\"b74b2b9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>All the activity within the design action can be set as a reaction to a user\u2019s action; scrolling could trigger transitions, hovering could highlight an element.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2f8f501 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2f8f501\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ffd23ea\" data-id=\"ffd23ea\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4e18373 elementor-widget elementor-widget-heading\" data-id=\"4e18373\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Embedded Elements<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c32f66e elementor-widget elementor-widget-text-editor\" data-id=\"c32f66e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Enabling use to create a medley of different mediums, combining video and audio. Directing users to click on hyperlinks create further engagement. And it shouldn\u2019t be news to you that these also drive up your SEO.\u00a0<\/p><p>Needless to say, without story structure these elements amount to nothing more than cool decoration. But how are we to know whether a story exists among the visual elements or not?\u00a0<\/p><p>We already pointed out that story is the connecting pattern created in the audience&#8217;s mind. Storytelling, however, means that the pattern is predetermined by an author or a designer in our case.<\/p><p>To help discern whether or not a designer is indeed telling us a story through their choices of composition and color on their web page, we have some basic criteria to follow:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3b33572 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3b33572\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d0600d2\" data-id=\"d0600d2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9ff03ae elementor-widget elementor-widget-heading\" data-id=\"9ff03ae\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Message<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2fff4e elementor-widget elementor-widget-text-editor\" data-id=\"e2fff4e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The main idea that the website is trying to convey to the visitor. Or, to borrow storytelling lingo\u00a0 \u2018the moral of the story\u2019.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d3f305c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d3f305c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8bf3c86\" data-id=\"8bf3c86\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e4ad2d7 elementor-widget elementor-widget-heading\" data-id=\"e4ad2d7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Emotion<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73b1303 elementor-widget elementor-widget-text-editor\" data-id=\"73b1303\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The emotion or feeling that is used as a vehicle to convey the message to the audience (happiness, fear, nostalgia etc.). It is a feeling that the design awakens in the viewer by using certain conventions of composition and color, and deliberately pulling at those strings, to invoke a particular feeling in us, to affect the way we perceive and interpret the information that the site is presenting. All this is to drive the viewer, to convince them to eventually commit to an action.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cb7252f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cb7252f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-27e210d\" data-id=\"27e210d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6b7b390 elementor-widget elementor-widget-heading\" data-id=\"6b7b390\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Characters<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08cfea8 elementor-widget elementor-widget-text-editor\" data-id=\"08cfea8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>These are the main figures, the stars of the story on the web page. Chief among them is the hero, who in many cases is, in fact, the viewer.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ddd4e90 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ddd4e90\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5005dd9\" data-id=\"5005dd9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-52c64db elementor-widget elementor-widget-heading\" data-id=\"52c64db\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Opening Scene<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c88365 elementor-widget elementor-widget-text-editor\" data-id=\"2c88365\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is our Act One, the exposition where we establish the setting the tone, presenting a problem (inciting incident), or perhaps a solution to a known problem. All this helps to pull the audience in, and entices them to stay, to continue reading and engaging. <br \/>It should have a hook, that also hints of what is to come in the following sections.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e42748c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e42748c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dec6bbe\" data-id=\"dec6bbe\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-13375e5 elementor-widget elementor-widget-heading\" data-id=\"13375e5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Story Development\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc394e0 elementor-widget elementor-widget-text-editor\" data-id=\"cc394e0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">This our Act Two , where on our story develops, by expanding upon our opening scene.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ecf56a6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ecf56a6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-79d0fcf\" data-id=\"79d0fcf\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7145bdc elementor-widget elementor-widget-heading\" data-id=\"7145bdc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Call to Action<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d7e44e elementor-widget elementor-widget-text-editor\" data-id=\"7d7e44e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">The point to where the story leads the user; the moment when the situation in the story has left the viewer no choice but to take action and create the solution and resolution to the situation. In short, Act Three.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c99c775 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c99c775\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a258cd0\" data-id=\"a258cd0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0909c3c elementor-widget elementor-widget-heading\" data-id=\"0909c3c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Examples of Storytelling Through Design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83e5aea elementor-widget elementor-widget-text-editor\" data-id=\"83e5aea\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The following examples were chosen, not just for their interesting use of design elements, but also for the way in which the design drew the viewer to action, on its own merits.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-da57179 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"da57179\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0e3d332\" data-id=\"0e3d332\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f364ce4 elementor-widget elementor-widget-heading\" data-id=\"f364ce4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><a href=\"http:\/\/natkam.cat\/\" target=\"_blank\">Camp Natkam<\/a><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce92207 elementor-widget elementor-widget-image\" data-id=\"ce92207\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"398\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=398\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.02_Camp.Natkam-1024x509.png\" class=\"attachment-large size-large wp-image-27331\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.02_Camp.Natkam-1024x509.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.02_Camp.Natkam-300x149.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.02_Camp.Natkam-768x382.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbf4633 elementor-widget elementor-widget-text-editor\" data-id=\"cbf4633\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This website is a website for Camp Natkam, a youth camp in northern Spain.\u00a0<\/p><p>Even without understanding the text, written in Catalan, in the opening scene we sense a clear and specific emotion. This site is related to something playfully youthful, happy, sporty, energetic and fun. The splashes and scribbles of color give us that feeling that kids could have contributed to this design, and they were having so much fun doing it. Notice the recurring colors, like the teal, or turquoise and the orange or terracotta that create a sort of motief that teases to follow it down the page and join the fun.<\/p><p>The characters of this particular story are of course the children, who have had a wonderful time, as well as those who are promised this wonderful experience in the future.\u00a0<\/p><p>There may also be elements of nostalgia for the adult visitors revisiting memories of themselves when they were younger and going to a summer camp. Perhaps then hoping that their children will enjoy a similarly wonderful experience here.<\/p><p>The overall message in this site\u2019s story is this: if there is one place that can almost guarantee the wonderful experiences of nature, activities, and friendship &#8212; that place is Camp Natkam. Finally, we find the <strong>call to action:<\/strong> an invitation to join the camp &#8230;and perhaps live happily ever after.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f09bec2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f09bec2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3f6fb37\" data-id=\"3f6fb37\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dda1182 elementor-widget elementor-widget-heading\" data-id=\"dda1182\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/ikbenonbetaalbaar.nl\/\" target=\"_blank\">Ik Ben Onbetaalbaar<\/a><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b37b7a elementor-widget elementor-widget-image\" data-id=\"4b37b7a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"413\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=413\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.03_Ik.Ben_.Onbetaalbaar-1024x528.png\" class=\"attachment-large size-large wp-image-27332\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.03_Ik.Ben_.Onbetaalbaar-1024x528.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.03_Ik.Ben_.Onbetaalbaar-300x155.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.03_Ik.Ben_.Onbetaalbaar-768x396.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9fd264f elementor-widget elementor-widget-text-editor\" data-id=\"9fd264f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This site was created by <a href=\"https:\/\/exxpose.nl\/\" target=\"_blank\" rel=\"noopener\">Exxpose<\/a>, a nonprofit organization dedicated to fighting human trafficking. You may recognize this site, and the previous example, as they have both being created using Elementor (both sites have also appeared in our monthly Showcase in the past).<\/p><p>At the top of the page, we have our opening scene (known in movies as the establishing shot). The feeling, or emotion, is that something here is sinister, seedy and shady. Here there&#8217;s a dark Amsterdam skyline and in the foreground a facade of a building familiar to the red light district. Scrolling down we discover that the facade is, in fact, a vending machine, using the same symbolic colors, selling something as \u2018priceless&#8217; a human being, as a cheap commodity. This is Act one. We have a setting, a situation, and a problem.<\/p><p>And suddenly there&#8217;s action. We&#8217;re now in the second part of our story ark. This printout receipt appears. It&#8217;s clearly printed on used crumpled paper. The receipt documents the outcome of purchasing sexual services, the reality of people forced to work in the industry, and what these people, mostly women, suffer as a result. Things are going from bad to worse, and continue that way in a snowball effect.<\/p><p>Suddenly, in Act three, there is hope. The receipt is shredded, thrown away and turned into money that helps these victims rather than continues to fund immoral activities. Still, we&#8217;re drawn downwards as, as we find out how we can help the victims and stop human trafficking, making it illegal and putting tax money to good use. We learn how we can take action now, to make this happen: -share the video, donate or follow the site. This is the end of the second act and the beginning of the third. It&#8217;s the cusp of the last part of the story ark. Notice that the tone has slowly turned from dark to light. There is hope. There is a solution. If we take action, the right action, this story will have a good or happy ending.<\/p><p>The characters of this story are clearly the people who are being forced into the industry. There&#8217;s powerful use of emotion that makes us feel that having been made aware of these facts, we too are part of this story. Here the viewer is the classic hero on the journey, and having witnessed this terrible injustice throughout Act 2, knowing that there is a solution at the beginning of Act 3, this is what the designer has led us up to and where they leave us.<\/p><p>At the place where we must decide if we are going to take action and save the day.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8a152a8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8a152a8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1df72a3\" data-id=\"1df72a3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cdd902b elementor-widget elementor-widget-heading\" data-id=\"cdd902b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/www.vg.no\/spesial\/2019\/tindersvindleren\/english\/\" target=\"_blank\">The Tinder Swindler<\/a><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-288f913 elementor-widget elementor-widget-image\" data-id=\"288f913\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"412\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=412\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.04_Tinder.Swindler-1024x527.png\" class=\"attachment-large size-large wp-image-27333\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.04_Tinder.Swindler-1024x527.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.04_Tinder.Swindler-300x155.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.04_Tinder.Swindler-768x396.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb65803 elementor-widget elementor-widget-text-editor\" data-id=\"cb65803\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>What we have here is an actual story, a true and troubling story, told through great use of mechanics of the design elements themselves. It is the story of the investigation of the Tinder Swindler, an unscrupulous man who has seduced and swindled young women out of millions.<\/p><p>The format is episodical. You might see the parts as chapters in a book, or episodes of a TV series. In Act 1 we have the setting, the storyteller introduces us to the Tinder Swindler, a catchy nickname for the criminal. We\u2019re also introduced to Cecilie, one of his victims.\u00a0<\/p><p>The emotion is the same form of suspense we are familiar with from TV crime drama or documentaries. At the beginning of the story, things are good. Then things become bad real fast, and throughout Act 2 they get progressively worse.<\/p><p>Each of these episodes, clever use of a series of video clips and animated gifs, draws us in and hooks us very quickly.<\/p><p>By the end of Act 2 we\u2019re dying to know &#8211; does this guy get captured, is there going to be a happy ending?\u00a0<\/p><p>The message here is clear: to generate awareness of the Tinder Swindler and his crimes.<\/p><p>The call to action, which is less direct, asks that visitors keep their eyes open for this criminal, who is still at large somewhere in the world.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cdc9c2c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cdc9c2c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9d36c7f\" data-id=\"9d36c7f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eafcdb7 elementor-widget elementor-widget-heading\" data-id=\"eafcdb7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/humaan.com\/about\/\" target=\"_blank\">Humaan<\/a><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-347d410 elementor-widget elementor-widget-image\" data-id=\"347d410\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"401\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=401\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.05_Humaan-1024x513.png\" class=\"attachment-large size-large wp-image-27334\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.05_Humaan-1024x513.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.05_Humaan-300x150.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/07\/Screen.Shot_.05_Humaan-768x385.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9d7993 elementor-widget elementor-widget-text-editor\" data-id=\"e9d7993\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The Opening scene on this agency\u2019s welcome page is very stylized and very dramatic, probably drawing on our experience of Agatha Christie murder-mysteries, creating a similar emotion.\u00a0<\/p><p>We\u2019re drawn to the attributes, the odd accessories, that each character has. There is clear mental engagement. We\u2019re trying to solve a puzzle.\u00a0<\/p><p>It gives us the impression that this agency has a unique style, and that they\u2019re adventurous and avant-garde. This alone gets the intrigued visitor to continue scrolling down,\u00a0<\/p><p>where we\u2019ll find a series of portraits. Some are stills some animated. But each one is an essay about the person in the portrait. They give us an idea of their sense of humor, what styles they like. Some are more eccentric than others. We continue to get a peek into what life is like at this office. We learn the in-jokes and catch up with the cool stuff that goes on throughout the day.\u00a0<\/p><p>This is something that a TV sit-com does very well. It establishes the fact that there is great chemistry among a colorful group of people and have shared some intimate details about their inner circle, they invite you to join them and be a part of this wonderful lifestyle.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0abbe37 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0abbe37\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8ce79e6\" data-id=\"8ce79e6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1aef6bb elementor-widget elementor-widget-heading\" data-id=\"1aef6bb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Summary<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf3d2a3 elementor-widget elementor-widget-text-editor\" data-id=\"cf3d2a3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Web design is an exciting new frontier in narrative and storytelling. It will, in fact, become more so as design and visual innovations continue to create more possibilities.<\/p><p>There are probably as many ways to tell a story as there are story types. Regardless, if a story is to be told in a clear way, if it is to achieve a specific experience and lead to a specific action we must rely on the basics that are the common denominators of story and have existed as such since the dawn of time.<\/p><p>There are many great examples of storytelling through design out there. Choosing these examples was an arduous process. If you can think of other great examples, please share them in the comments. Who knows where the inspiration may lead?<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this Monday Masterclass, we examine some great examples of sites that manage to nail storytelling in web design.<\/p>\n","protected":false},"author":162405,"featured_media":27329,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[37],"tags":[79,173],"marketing_persona":[],"marketing_intent":[],"class_list":["post-27240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-masterclass","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use Storytelling in Web Design | Elementor<\/title>\n<meta name=\"description\" content=\"In this Monday Masterclass, we examine some great examples of sites that manage to nail storytelling in web design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Storytelling in Web Design | Elementor\" \/>\n<meta property=\"og:description\" content=\"In this Monday Masterclass, we examine some great examples of sites that manage to nail storytelling in web design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-01T08:23:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2019\/07\/2019.06.27-Using-Storytelling-in-Web-Design-1-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Simon Shocket\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simon Shocket\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/\"},\"author\":{\"name\":\"Simon Shocket\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6\"},\"headline\":\"How to Use Storytelling in Web Design\",\"datePublished\":\"2019-07-01T08:23:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/\"},\"wordCount\":2378,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.06.27-Using-Storytelling-in-Web-Design-1-1.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Monday Masterclass\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/\",\"url\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/\",\"name\":\"How to Use Storytelling in Web Design | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.06.27-Using-Storytelling-in-Web-Design-1-1.png\",\"datePublished\":\"2019-07-01T08:23:07+00:00\",\"description\":\"In this Monday Masterclass, we examine some great examples of sites that manage to nail storytelling in web design.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.06.27-Using-Storytelling-in-Web-Design-1-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.06.27-Using-Storytelling-in-Web-Design-1-1.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Monday Masterclass\",\"item\":\"https:\/\/elementor.com\/blog\/category\/masterclass\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Storytelling in Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6\",\"name\":\"Simon Shocket\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g\",\"caption\":\"Simon Shocket\"},\"description\":\"With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that\u2019s a lot to live up to.\",\"sameAs\":[\"http:\/\/simon.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/simon-shocket\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Storytelling in Web Design | Elementor","description":"In this Monday Masterclass, we examine some great examples of sites that manage to nail storytelling in web design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Storytelling in Web Design | Elementor","og_description":"In this Monday Masterclass, we examine some great examples of sites that manage to nail storytelling in web design.","og_url":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2019-07-01T08:23:07+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2019\/07\/2019.06.27-Using-Storytelling-in-Web-Design-1-1.png","type":"image\/png"}],"author":"Simon Shocket","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Simon Shocket"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/"},"author":{"name":"Simon Shocket","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6"},"headline":"How to Use Storytelling in Web Design","datePublished":"2019-07-01T08:23:07+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/"},"wordCount":2378,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.06.27-Using-Storytelling-in-Web-Design-1-1.png","keywords":["Build","Video"],"articleSection":["Monday Masterclass"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/","url":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/","name":"How to Use Storytelling in Web Design | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.06.27-Using-Storytelling-in-Web-Design-1-1.png","datePublished":"2019-07-01T08:23:07+00:00","description":"In this Monday Masterclass, we examine some great examples of sites that manage to nail storytelling in web design.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/storytelling-in-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.06.27-Using-Storytelling-in-Web-Design-1-1.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/07\/2019.06.27-Using-Storytelling-in-Web-Design-1-1.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/storytelling-in-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Monday Masterclass","item":"https:\/\/elementor.com\/blog\/category\/masterclass\/"},{"@type":"ListItem","position":3,"name":"How to Use Storytelling in Web Design"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6","name":"Simon Shocket","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g","caption":"Simon Shocket"},"description":"With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that\u2019s a lot to live up to.","sameAs":["http:\/\/simon.com"],"url":"https:\/\/elementor.com\/blog\/author\/simon-shocket\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/27240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/162405"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=27240"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/27240\/revisions"}],"predecessor-version":[{"id":92409,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/27240\/revisions\/92409"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/27329"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=27240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=27240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=27240"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=27240"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=27240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}