Applying Visual Storytelling to Website Designs

Throughout history, storytelling has been an important communication tool - it’s how people connect with one another through means of entertainment, education, and even to instill moral values in one another. While the earliest forms of storytelling were parlayed through oral communications with gestures and expressions, the landscape for storytelling has shifted with the advent of digital technologies. The role of the visual message in our communication processes has transcended mediums, not only helping people relate to a theme but allowing us as designers to intertwine content in presentation.

Applying Visual Storytelling to Website Designs


In our quest to create the perfect design, we often analyze components like style, layout, mark-up, usability, and the flow of content, that it’s easy to overlook a key element of design: storytelling. How do we relate storytelling into a web design? This article will break down the components inherent in visual storytelling.

Creating a Tale Online

"In every culture all around the world, storytelling is how people connect with one another. State-of-the-art technology will change, but state-of-the-heart storytelling will always be the same." – Sid Ganis.

The web is a medium in which content can grow and change on a whim, unlike its printed counterparts. Since the web is a platform for communication, it’s our job to create solutions that will adapt to its changing landscape while maintaining the theme, upholding its correct messaging, and applying an intuitive visual structure.

Gesture
Image credit: marcwathieu

Message

Creating a well-defined message is the first component of storytelling. You can consider the message as the "moral" of the story. Every aspect of the design - from the icons, typography, photography, and interaction - should be carefully and consciously selected to help to support the thread of the story. Let’s take a closer look at how you can weave together a message just by selecting the right images through a concept called Semiotics.

Semiotics

Images tell stories using semiotics, a sort of visual grammar. It’s through semiotics that visual cues, or signs, are combined into patterns that transmit messages to the viewer. The digital world often borrows from the physical world and uses metaphors to help enhance our understanding of something that would otherwise be incomprehensible to most people.

Iconic

An iconic sign looks like what it represents – a portrait or scientific illustration, for example.

Iconic

Symbolic

A symbolic sign does not look like what it represents and its meaning must be learnt. Its meaning is arbitrary because it’s based on cultural associations. For example, a stop sign or a company’s logo.

Symbolic

Indexical

An indexical sign is a clue that links meanings. Its association with this meaning is not arbitrary but is physically or casually connected. Smoke, for example, is an indexical sign of fire; a pointing finger is an indexical sign of whatever it is pointing at.

Indexical

All of these types of signs are used in combination in visual communication. This is how images tell stories. The message of the website can be extracted by choosing key ideas and visual elements that will drive the overall goals of what you’d like the user to take away after they’ve navigated on to somewhere else.

Interactivity

Another solution for exploring the narrative possibilities of the web as a communications medium is through interactivity. The web need not be boring since it can do a lot of things other media can’t do. For instance it doesn’t have to be linear or be predominantly text-based. It can also incorporate several media at once for a truly intimate experience. The more power a user has to control the narrative himself, the more a user will “own” that narrative.

Develop Personals

Knowing your story is important, but knowing who needs to hear your story is even more critical. By getting a better understanding of your reader, you will be able to frame your story more particularly to them. Imagine you were telling the story of your first job. You'd certainly tell that story in a different way to a friend over drinks than you would in an interview with a prospective employer.

Dustin Curtis
Dustin Curtis presents an interactive timeline of his life in a non-linear fashion, enabling the user to scroll right to learn more. Such non-linear navigation is a trend in modern web design, and allows for a unique viewing experience. On the web, we aren’t bound by constraints as books are. There’s no limit to the height of a web page. Web pages can extend beyond the boundaries of the viewport. That gives us a license to talk more.

Dustin Curtis

Setting the Tone

The tone of the website supports the message and is the back-story. The tone is used to help draw the viewer into the site by grabbing their attention and keeping it for the duration. It’s often established in the early planning stages through the use of moodboards and a creative definition. Remember your goal is to create a visual environment that will support the content (or message) and goals of your client. This can usually be achieved through:

Moodboards

Moodboards help establish the tone of your website quickly. It’s a collection of graphical elements that set the tone for your design. Typically these include examples of typography, imagery, color, layout, and style.

Graphic designers use mood boards to help gather colors, textures, typography, shapes, and other inspiring design elements to help set the tone for a more applied design.

Century Gothic

Typography

You can convey a site’s focus on modernity or traditionalism simply by choosing to use sans serif or serif fonts, respectively. You can call attention to particular parts of the content, and deemphasize others, by changing the font’s color, line-height, style, and size.

Elysium Burns
Elysium Burns infuses large, bold, sans serif fonts with traditional serif fonts to create a stunning design. CSS image backgrounds are used for the articles’ titles and site headings.

Elysium Burns

Finding A Voice

The voice of your website is what holds everything together. In defining your voice, play with descriptive keywords, asking questions like, “If this site was a car, what kind of car would it be?” or “Is my brand the Starbucks or Dunkin’ Donuts of our industry.” Think hotel chains, clothing stores, cities, beverages, game consoles, and so on. Wherever there is choice, there will be differences of personality. Not only does this give you creative direction, but it enables the client to view their project from multiple angles in doing so.

Also consider the written copy for the site and its role in the project. The content should shine just as much as its counterparts and not be an afterthought. In the wireframing stage, treat the content as an integral part of the process to avoid a formulaic, typical approach.

Knowing Your Audience

How you relay your story to an audience is also important, as it shows you’ve taken the time to understand how to reach them; which makes you seem a lot more professional. There are many tips on how to write online but generally follow these guidelines in structuring your content:

If it’s just you, write in the first-person. First person narrative means writing from the "I" point of view. If someone asks what I do for a living, I don’t say, "Stephanie’s a graphic designer." Use "I," not "he/she." It'll help make you seem more personable.

If it’s a corporation, write in third-person. Third person narrative form is writing from the omniscent point of view. Here, you use the he-she form. Writing in third person point of view conveys a very subtle and objective approach that you may have towards your company. It shifts the focus to the idea or proposal away from the author.

Showcase

Ben the BodyGuard
This website for an iPhone app exemplifies the concept of storytelling in web design. As you scroll vertically along the page, a man called Ben follows you along, describing in small snippets what the app is about and how it can benefit you.

Ben the BodyGuard

Ella Design
Ellas Design is the showcase of Hong Kong-born, US-based designer Ella, presenting a portfolio of her print design, interactive video work and web designs. She intends her website to be an online HTML5 and CSS3 ‘playground’, demonstrating her fluency in these technologies. You’ll see through the use of illustrations carried throughout the site that Ella presents her own method of storytelling.

Ella Design

A Tour of My Brain
A Tour of My Brain explores the author’s series of MRIs along with neuroanatomy facts. The site, which utlilizes HTML5, is a unique way of storytelling as we tour the brain. Again, we see the potential of storytelling given the unlimited height we have to work with on the web.

A Tour of My Brain

No One Belongs Here More Than You
This website is another example of how interesting stories can be told through designing for the web in a nonlinear format.

No One Belongs Here More Than You

A Brief Message
A Brief Message features design opinions expressed in short form. – 200 words or less. The staff solicits Brief Messages from individuals of all walks of design life, which are published weekly.

A Brief Message

SYP Partners
SYP Partners’ website is a truly interactive experience. It showcases a popular method of designing in such a way that it makes the users ask themselves questions like "Why?", "How?", "When?" and "Who?". On clicking the link, button or widget – they receive the appropriate answer. This helps them turn the interactive experience with your website into a narration they will find easier to remember, relate to and share with others.

SYP Partners

Globetrooper
Globetrooper is an interactive site allowing you to find travel partners from around the world. Uses are able to create their own trips and find members to join them.

Globetrooper

Seamco
Seamco provides efficient bottling and packaging lines for liquid products. The animation serves to illustrate this process, allowing the user to see the process from production to shipment.

Seamco

Atlantis in 1962
The Atlantis in 1962 is another website that showcases the potential of expanding a design outside the constraints of the viewport. As a result we learn about the Atlantis in a unique and compelling format.

Atlantis in 1962

The Moon in 2040
The Moon in 2040 utilizes HTML5 in its original, forward-thinking design.

The Moon in 2040

Showtime Sports
An engaging experience is created for fans on the website for Showtime Sports. Fans would be able to follow and learn about the full fight story online interactively through video. The experience theme guides not just the content but the functional requirements and website architecture.

Showtime Sports

Melitta Coffee
Melitta redefines what it’s like to enjoy coffee by putting us at eye level with the rest of the shop patrons, making us feel included and enjoying the coffee ourselves. With a large view of the shop’s exterior and by watching the patrons move and enjoy the experience, we are given an insight into the culture and experience of Melitta before we even step foot in the door.

Melitta Coffee

Condiment
Condiment presents visual storytelling through an interactive puzzle in their portfolio section. The user is tasked with moving the blocks in order to configure the design studios’ logo, Condiment.

Condiment

Forefathers Group
Original illustrations along with compelling copy, indicative of the same era, create a rich visual story for the design studio Forefathers Group. Creating a dynamic brand personality is a modern concept many design studios are using to set themselves apart from a sea of other designers.

Forefathers Group

Economy Check
Economy Check presents a story about Pakistan’s economic future in a clean format. Scroll vertically and the user is presented with five components of the country’s current economic situation – from where they stand now to growth. The information here is meant to stimulate debate, and a contact form at the bottom allows the user to present their own opinion to this end.

Economy Check

Resources

Conclusion

Stories are integral to human culture. Visual stories are a direct method of conveying information, ideas, and cultural wisdom in a powerful way. It’s through narrative that people are engaged, and the web is just another platform to expose this form of art.

You can have your slick style and meaty content, but without a mature voice, your site may fail to engage. So reevaluate how the data, content, and design are executed and how you can weave them together in a non-linear fashion in your storytelling endeavours.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.