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

Exciting New Tools for Designers, October 2023

This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…

The 10 Most Successful Rebrands of All Time - Ranked

We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…

3 Essential Design Trends, October 2023

Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…

Weekly Design News #2

Every Sunday, we round up the best stories from webdesignernews.com. This issue features UX principles to improve your…

24 Best Creative Portfolio Websites in 2023

For anyone working in a digital creative field, whether design, illustration, animation, video, or a combination of…

15 Best New Fonts, September 2023

Nothing upgrades your designs like selecting the right font. It’s all too easy to fall into the trap of using the same…

Weekly Design News #1

Every Sunday we’re rounding up the best of the previous week’s stories from webdesignernews.com, and in this issue #1,…

The 20 Most Controversial Logos of All Time (Ranked)

When you hire graphic designers to create your company's logo, what do you expect? Professional designs, culturally…

LimeWire AI Studio Generative Art App

If you’re looking for the most exciting way to launch a career in AI-generated art, then you’re in the right place.

20 Best New Websites, September 2023

Are you in need of design inspiration? Are you looking for the best websites designed in 2023 to pull ideas,…

The Dangers of Deceptive Design Patterns (And How to Avoid Them)

As web designers, our role in crafting user-friendly digital landscapes is critical. We are tasked with creating user…

10 Best Ecommerce WordPress Themes in 2023 [September update]

You plan to set up shop with an online store. You know there’ll be competition. And to compete with or beat that…