Mikel Bruce — August 14, 2019 — August 14, 2019
A good story draws you in, even if it is set in a different era, or a different culture. Visual storytelling in web design does the same thing. It draws the audience in through visual elements, turning your business into a relatable, familiar one, and inviting the audience – the web visitors – to participate.
Storytelling can help your business stand out, especially in competitive spaces, and makes the information about your services/products more accessible and memorable.
Every business has a story to be told, and there’s no better place to tell your story than on your website.
7 Ways to Incorporate Visual Storytelling
1. Imagery & Illustrations
Ever heard the saying that a picture is worth a thousand words? This is just as true on your website. We can be told that a whale is 20 yards long, and that’s pretty impressive, or we can see a photo of a human in a tiny boat alongside a massive whale – and feel an immediate sense of awe as our heart skips a beat.
The images on your website are tools that communicate the story of your business and the role your customers can take in your business. Each image can either support your messaging or undermine it, so selecting the right image is critical, especially on the website homepage, where most visitors will begin their journey. The homepage is like the cover of a book or movie, showing something of the essence of the story.
Your website’s imagery can come from many sources: custom photography, stock photos, custom icons and graphics, and illustrations.
A skilled web designer can guide you in choosing the style of imagery that most supports your message. Consistency is important: an out of place image is like an abrasive typo that distracts the visitor and ruins the continuity of the site.
2. Animation & Interactive Elements
Adding some well-placed animation or an interactive element is a great way to draw attention to a specific aspect of the site, but remember, a little goes a long way. Like any successful design element, animation needs to have a purpose.
Too much movement can actually distract a visitor and deter them from continuing to explore the site, like a random action scene that disrupts the flow of a story, or has no bearing on plot.
There are several ways to make use of eye-catching interactive elements or movements on your site, including micro-animations and hover-overs. For example, judiciously placed micro-animations can help to emphasize the journey that you’re hoping your visitor will take.
So, before placing animations on your site, ask yourself: Does it make sense contextually? Does it highlight a main function of the site? Or, does it distract?
3. Use of Space
Space is an often overlooked element in web design. Any story that has too many characters or changes of scene quickly becomes overwhelming. In web design, this is resolved through the use of white space, which creates a sense of simplicity and heightens the effectiveness of the other design elements.
This simplicity may be a challenge to achieve if you are hoping to communicate a lot of information in a short space, but a keen eye for editing will make all the difference to your visitors, and keep them engaged throughout your site. As you peruse your site, remove anything that may distract or confuse a visitor, leaving only the most essential, cohesive elements.
Creating space on your site serves another purpose, as the remaining elements take on more purpose – as does their placement. Place your elements in such a way as to guide the visitor from section to section, directing the flow.
4. Color & Font Choice
Color is an excellent tool to convey emotions, strengthen the meaning of your message and elicit a mood. For example, blue is often used on websites because the color conveys trust, loyalty and wisdom. As the color of the ocean and the sky, it also promotes a sense of serenity, peacefulness, and quiet power. But there are many shades of blue: a pale blue has a different effect than a rich blue or a neon blue.
As you design your site, choosing 3-4 core colors will lay the foundation and create a flow across the site.
Additionally, the colors that you choose in combination with the font of the text sets the tone for your company’s story. A playful font might set a casual, friendly tone, but it could be at odds with content that is trying to state power and seriousness.
Ideally, your color palette and font will work together to create your intended mood and support what you’re trying to communicate.
5. Videos
Video is the very essence of visual storytelling, and is a popular element on websites. Videos can appear in various locations on your site, serving a variety of purposes.
One of the most prominently placed videos you can use is called a hero video – the background video that is displayed on the top part of the home page. This top area is called the hero area because it is such a critical part of the site. Whatever you put here needs to catch a visitor’s attention and of course, it needs to fit in with your overall message.
Ideally, your videos will connect with the story that you’re telling on your site, and contain an element of creativity. A powerful way to do this is to think of your value proposition: what is your story in one sentence? A great example of this came from a website for a financial advisor, whose statement was “we bring loans across the finish line.” Their video was simple, concise and to the point, showing a cyclist crossing the finish line of a race.
But just like animations, background videos with too much movement can distract a visitor from actually understanding the visual context.
6. Visual Hierarchy
Visual hierarchy refers to the use of font and font size on a website. Think of the visual hierarchy as the chapter headings of a novel, with the most important topics larger and the details a smaller size. The same goes for a website. Headings are a larger font size, while a subheading is a smaller font. The sizes guide the visitor along, helping them to read the story of your site in the right order.
Consistency is very important with visual hierarchy. If one page has a heading in one size and then the next page has headings and text in a different font size or switched around, you’ll create confusion which can cause the visitor to stop or to move on to another site.
7. Custom Web Page Design
No business is exactly alike, so it makes sense that no two websites will be exactly alike. Many sites are built on templates which makes web design very accessible, but the addition of a custom page, designed specifically for your site, helps to show off what’s special about your business. Custom web pages are also an ideal place to make use of visual storytelling on your site.
Normally, a website has a least 1 custom page, the home page, but some sites have more. Each custom page is designed by a web designer, giving you the chance to be even more selective with the placement of images and graphics. This is where your story comes alive – you can tell a mini-chapter, with design elements specific to the story you’re telling.
Along with the home page, websites will typically have a custom about page and/or service page. These are some of the most important chapters of your story, where the visitor makes up their mind as to what they think of your business and decides whether to stay on your site.
Know Your Website Audience
We all love a good story, but not all stories appeal to the same people. In order to tell an effective story on your site, you need to know who your audience is, so that you can tailor the design elements to your different website visitors.
Your site will likely have several types of visitors, from potential clients to returning clients, employees to collaborators. Consider the purpose of each item that you place on your site, and pay attention to whether the design elements speak to your visitors.
Digital & Social Articles on Business 2 Community
(55)
