Using animation to create an emotional connection with your audience

Wdd Logo.
February 11, 2014
Using animation to create an emotional connection with your audience.

anim_thumbnailFor many of us, our early days are filled with animation. Cartoons made up a big part of my childhood, and many others whom I have conversed with over the years have shared similar origin stories. The bright colors, and often playful imagery has appeal across a range of ages.

Bringing that touch of whimsy from our youths into the now, to present content in a fun and engaging way, is one of the best ways of establishing an emotional connection with your audience.

So today we have another web design showcase to serve double duty as a source of inspiration to the readers and community, and as a means of highlighting some stellar work from the web design field at large. From examples that reflect the animations of our childhoods to those that more fall in line with the games and shows that have shaped our adulthoods, there is an animated gem or two that should appeal to and inspire everyone.

The styles may have changed, and grown up along with us, but the heart of the animated escapes remains the same as designers take the web to daring and bold new places with their animated works.

Noir Et Renoir

I love the way the Noir Et Renoir site starts black and white and slowly gains color as the lights in the windows come on. The interactive menu viewed through the windshield of the car is unique and adorable, whilst the information itself is presented in such a clean, minimalist way.

noiretrenoir

Barcamp Omaha

The Barcamp Omaha site keeps you delightfully entertained with a variety of animated monsters and aliens as you procede through its content, and the title created as a constellation adds a touch of extra whimsy.

barcamp

Azahran Design Box

Azahran Design Box does a wonderful job staying true to their branding with sketchy cut out animations presented in cardboard boxes. Even offering a fun little interactive element to show you the services they provide.

azahran

Quechua

The Quechua site does a wonderful job of using its animation as a type of call to action. The animated bits direct your eye to the interactive elements of the site, and since these elements are used sparingly, it's totally effective.

quechua

Parallax.js

Parallax.js uses its site as an example demonstrating how to use Parallax JavaScript on devices with a gyroscope. The cutout and pieced together look of the images works really well since this is a demo site, letting users know that this is just a fraction of what it can do.

parallax

Protect the Football

Protect the Football is a Buffalo Wild Wings sponsored game released to correspond with American Football season. The animated dropping intros set the mood and tone before launching you into the playful brand inspired game.

protectfootball

Goodtwin

Goodtwin uses it's illustrated animation as a unique and quirky way to show how they can make your brand's social profile continually rise.

goodtwin

inTacto 10 Years

inTacto 10 Years does a great job using an animated rocket ship to take us up and through space representing a timeline of technology development over the past 10 years.

intacto

Kick My Habits

Kick My Habits makes clever use of animation to create what is essentially a completely interactive, multi-page infographic which shows users the cost of their bad habits and where they fall among the general population.

kickmyhabits

Polecat

Polecat uses simple and colorful animations to illustrate the whimsical style of their work. The nature of the animations draws to mind those that one might expect from an app on their phone, stylistically tying the web design to the brand.

polecat

Octave & Octave

The Octave & Octave recruitment page makes creative use of animation for displaying the job openings they have, helping to make job hunting a little lighter a task than usual.

octave

Milkable

Milkable uses subtle animation to highlight the fun and easy-going style of the team behind this brand, their fluid creativity and, well, as the site says, awesomeness.

milkable

DFDS Seaways

DFDS Seaways' (The Smart Way To Travel) website uses an animated illustration to take you through the different travel options offered as well as compare the experience users will get traveling with them by sea, as opposed to by train or airplane.

dfdsseaways

Phileas & Fogg

Phileas & Fogg uses the beautiful image of a colorful hot air balloon floating over a vintage map to denote their purpose of flying a group of designers to the Costa Rica rainforests for 80 days.

phileasfogg

Boris Etingof

Boris Etingof uses animation, among other accents, to give a pulse like touch to the interpretive constellation-esque designs in his experimental portfolio.

borisetingof

Axel Aubert

Axel Aubert uses both animation and perspective to display the menu of the site in an engaging way. He captures the attention of the user with this creative touch.

axelaubert

Hellohikimori

Hellohikimori uses some intense, and at times macabre, alien-like imagery in their animated background to introduce users to the talent this design agency is packing.

hellohikimori

Michelle Lana

Michelle Lana uses animation as an enhancement to show off her illustration skills, keeping users thoroughly engaged as they scroll through her site. The childlike characters transport users back to the days of Saturday mornings in front of the tube.

michellelana

Have you used animation in your work? Do you have a favourite site we've missed? Let us know in the comments.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…