Web Design : Visual story-telling in web design

What is visual story-telling?

Visual story telling is exactly what is says on the tin. It is a process where by information is expressed through the use of imagery. Think art, film, photography, performance, illustration; they all contribute to a visualisation of an idea or concept but offer a completely different way to digest it other than through reading it.

Why is visual story-telling used in web design?

Visual story-telling can simplify complex concepts and open engagement across all languages, cultures and societies. If you use powerful visual elements within your website content you are offering viewers the opportunity to engage deeply with the information you are sharing, provoking emotional connections that can only be established through seeing.

Story-telling is a practice that is rooted in many cultural traditions that people recognise as a tool for entertaining, educating, engaging and explaining. If you can establish a intuitive way to integrate visual story-telling into your online presence then you will allow yourself the opportunity to engage a wider audience, and potentially grow returning interest in your company.

Three concepts of visual story-telling

• Showing rather than tellingIt is said that a person can gain understanding of a visual scene in 1/10th of a second, whilst it takes approximately 60 seconds to read only 200 to 250 words. The image below shows 4 words and a photograph. The photograph basically shows what is explained in the text, however it takes you less time to digest. With the image you are able to understand colour, texture, depth of field and orientation which is all in addition to what the text shows you.
• Humanising your brandBy showing web visitors that you are more than just a business and that you are made-up of real people with real thoughts and real lives, you show that you are approachable and relatable. Web vistors engage more with brands that are easy to understand and that show personality rather then hiding behind an machine-like facade. Being human is important however it is also important not to overshare – you want to gain clients, not friends.
• Enhancing your contentVisual-story telling can be a brilliant way to engage clients in content that is already on your site. If the subject you are trying to convey is difficult to explain or includes complex descriptions, you may want to enhance this – and offer an alternative way of understanding it – through visual story-telling. The below image shows three illustrations by Katy Jackson which were used in a campaign for an insurance company.
  

  Q & A with Reactive Graphics illustrator, Katy

  Illustration is a key part of visual story-telling on the web and Reactive Graphics illustrator Katy Jackson shares her wisdom on the importance of visual story-telling and how she works for a client brief.

  Q. How do you think visual story-telling can impact the way web content is viewed?

  KJ: Visual story telling, be it in the form of a story board or an illustration with narrative, can engage the user in a different way to normal website interaction. Obviously it isn’t suitable for every business, but when it is used well it can communicate further understanding in your product. It can also help get across your message and make it stick. The viewer often has to slow down to ‘read’ and interpret the illustration which, in a fast paced browsing environment, can be a good thing.

  Q. How do you think illustration can affect web design?

  KJ: The use of illustration can cut down written content. It can also lighten up a text heavy website, adding character, personality and communicating the tone of the brand.

  Q. Do you think visual story-telling can help business ideas be understood?

  KJ: It obviously depends on the business and what they are looking to communicate. But yes it can be a useful tool when used well. For instance if you are wanting to explain stages of an online ordering process to consumers, to have this laid out in an illustration is a great option. Another example is a b2b market research company (shown here) who I provided illustrations for recently. They wanted to illustrate case studies of their market research work. The illustrations not only helped summarise the key points their market research threw up, it underlined their understanding of their subject and an ability to communicate their findings effectively to their clients.

  Q. How do you work when illustrating a concept or working to a client brief?

  KJ: When I receive a brief from a client it is good to start by discussing a few ideas by phone or email to make sure I’m on the right track with tone and content. Once agreed I progress to rough sketches which are sent to the client for approval before continuing to final artwork. Most of my work is created digitally but I usually start with pencil and paper to generate ideas quickly.

  Other ways to engage with visual story-telling in web design

  • VideoVideo is an extremely versatile and flexible visual format for engaging people in stories.In the past 2 years, online video consumption has quadrupled and video now takes up over 50% of overall web usage. As it is a format that is recognised mostly for entertainment, our natural reaction when viewing video is that the content is going to be engaging and won’t take up too much of your precious time.According to Forbes A massive 75% of executives watch at least 1 work-related video a week to enhance their work. There are also other ways you can use video in visual story-telling:-Create a video explaining what you do
    -Create a stop motion video with Vine
    -Create an animation
    -Create a time-lapse of one of your projects
    -Create an video infographic showing off your products and services
  • Social mediaSocial media is a powerful tool to utilise as part of your visual-story telling work. The layout and overall purpose of social media offers companies the opportunity to share real life stories and show personality by offering you the option to choose colours for your profile layout, add photographs and video in a format that is easily accessible, and therefore offer content that is easy to digest within a sense of community and social interaction.
  • PhotographsPhotographs are a great way to engage visitors with your business as they are can offer snapshots of relatable situations. If your business is a service provider or an ecommerce site then photographs of what you do and what you sell will be extremely valuable when you want to secure clients. It offers a sense of reality and trust, showing that you can deliver what you say you will. Spending money on getting a professional to capture photographs for your site, will pay off in the long run, as it will show a professionalism and attention to detail that you simply don’t get from stock photos.
  • Mascots/charactersAdding a mascot to your website can ‘bring to life’ information that is particularly dry. Illustrated mascots also bring personality to your brand and can make it a little bit more recognisable.
  • BackgroundsBackgrounds can offer a glimpse of what your company is about with out giving too much away. Adding a background image can also add depth to a web page and simply make your content look more appealing.
  • Creative Typography
  • This is a form of visual story-telling that often gets forgotten about. However it can be a really great way to offer a unique way to display text. Creative typography can be there to offer direction or simply to look beautiful.
  • Parallax Scrolling
  • The parallax scrolling web design technique is a brilliant way to display elements of visual story-telling. The narrative and 3D structure of parallax design offers a way to guide visitors through material incorporating several different types of visual stimulation. This allows the user to have control over the speed of digestion of material and shows them all the important details of the website in a succinct and engaging manner. 
  • Interactivity
  • Interactivity is a massive trend at the moment in web design as it offers visitors a unique user experience and a sense of personal attention to detail as they browse the website. Interactive navigation can be a great way to engage visitors in your story. It can offer a playful way to engage with quite an intense subject. It is important to mention that this isn’t used to be disregarding of the subject however it is simply a different way to approach difficult subject matter.
    

    5 things that make visual-storytelling websites stand out

    1. Authenticity
    2. Cultural relevancy
    3. Relationship value
    4. Relatable
    5. Interactivity

  Powerful visual story-telling websites

  Slavery footprint

  

  Flat design vs Realism

  

  Numero 10/

  

  5 Story telling tools that can be easily integrated into your website

  1. Integrating live tweets
  2. Interactive maps
  3. Blog feeds
  4. Infographics
  5. Illustrated case studies

  If you would like Reactive Graphics to develop a website that works with the concept of visual story-telling then please get in touch.

  We also produce illustration, video design and print design should you require any further materials for your business.

Save