Storytelling is a major component of every successful brand. The ability to tap into the emotions of your target audience by crafting a compelling story can help them identify more with the products and services your brand offers.
Below are examples of top-notch stories told through design that you should strive for with your own website.
Museum of Mario
Made using HTML5, the Museum of Mario hosted at IGN traces the history of one of video game’s most beloved characters. The interactive site lets you click on different page elements to show cool graphics and animation using the latest markup language, capturing the magic of each game Mario appeared in.
100 Moments of McDonalds
A campaign was launched by McDonald’s UK with the help of Razorfish and Goodboy to emphasize on the moments that customers have spent with this ever-famous fast-food restaurant. The result is a stunning interactive infinite grid built using HTML5 telling stories of customers about their personal McDonald’s moments. The site is optimized for mobile viewing due to its responsive design. Due to its brazen design, the site won the coveted FWA Cutting Edge Award.
Flat vs. Realism
A 2014 People’s Choice / Webby Award Winner, the Flat vs. Realistic Design website is one of the coolest to hit the end of 2013. The interactive design narrates two kingdoms that rule the design world – flat and realistic design. Realism is the preferred design choice of most websites until the fast-loading elements offered by flat UI usurped realism from its throne.
The website conveys the struggle between both contrasting design philosophies pretty well in a fun and interactive manner – it even features a 2-D fight gameplay that lets you pick sides!
Olympic Story
The storied history of the Olympics is documented and captured in a single web page. The site was designed using Ruformat and made in preparation for the 2014 Sochi Games. Nonetheless, the Olympic Story is a great resource for people interested in finding out facts and medal winners starting at the very first Olympics event held in 1924 at Chamonix.
Tinké
Visual storytelling does not have to use complex markup languages and command to craft a compelling story, just like Zensorium does with Tinké. This tool lets you track different health indices to measure your fitness . It tells a story by emphasizing social proof, tool functions, and tech specs as you scroll down the page. All leads to encouraging its target market to purchase and try out the tool for themselves.
Bagigia
There’s so much that you can say about a hot water bottle. However, Bagigia is more than just a water bottle bag, as shown by the website. Through its interactive design, It is able to showcase the sophistication and materials used to create this premium Italian hot water bottle. The bottle rotates to show you its full appearance from different angles as you scroll down the page.
Jess & Russ
With an online wedding invitation like this, who needs printed invites?
The website tells the story on how Jess & Russ before they met, the time they finally met, and the time they decided to spend their lives together. The screen is divided in half – the left part of the screen tells the side of Jess and the right is dedicated to Russ. The story is smartly designed with typography and illustration to achieve the quirky appeal it aims for. At the end of the page is an RSVP sign-up form for those invites so they can book themselves a seat to the wedding ceremony.
Every Last Drop
Nice and Serious, in partnership with Waterwise, raises the awareness of water consumption by people in the UK through this website. The flat design bring the story to lives as the site delivers the exact amount of water used, consumed, and wasted during the day by scrolling down the site. At the end of the page, visitors are treated to a video on how to conserve water and help other people to gain access to clean water.
Land O’ Lakes
Some of the examples above may not fit the voice and tone of some of the more serious online businesses out there who prefer to focus on providing actual content instead of visual magic. Land O’ Lakes is one example that proves to all that you don’t have to be a design wizard in order to tell compelling stories about your brand.
In this example, the brand is able to elevate its core products (butter, cheese, milk) by associating it with family life and homemade cooking. By showing different recipes of healthy and easy to cook food to be enjoyed by the whole family, Land O’ Lakes creates a collective experience on how their products are consumed.
La Roche-Posay
Another website that non-design businesses should take cue from is this French cosmetics company that tells a story on how effective its skincare products are. Instead of listing down their products from the site menu based on their respective names, La Roche-Posay lists down the skin type. By clicking on the skin type that you identify with, you will be brought to a page filled with specific products that you should use to treat your skin problems.
While not necessary a design element, the site architecture and the inlinking of the pages provides for a more convenient and seamless user experience. This helps the brand tells their audience about their products more effectively.
Final thoughts: The examples of visual storytelling above are by no means an easy task to pull off. You will need an expert designer to help flesh out your brand concepts and ideas much better. Nonetheless, by investing on a story told through web design that best describes your branding, you can help make an indelible mark with your target marketing and help elevate your online business to new heights.
More on visual storytelling:
Top Free Sites for PSD Voice Balloons and Fonts
Top 4 Web Design Trends for 2014
Author: Christopher Jan Benitez
Content marketer during the day. Heavy sleeper at night. Dreams of non-existent brass rings. Freelance writer for hire. Pro wrestling fan by choice (It’s still real to me, damnit!). Family man all the time.