The Use of Emotion in Web Design

by in Design on 10th Mar 2014 · 0 Comment

Putting emotion into web design may seem a strange concept, but many sites have been doing it for years, and we are only now beginning to recognize it and talk about it. Sites that promote travel, eating out, entertainment, etc., have been using emotion in their design for a long time to attract visitors and make them stay a while and take a look around.

The only way to appeal to visitors is through emotion – there simply is nothing else... you can't talk to them, so you could be the world's best salesperson, but it will have no effect on your website, so portraying your product or service in a way that draws the visitor in means doing so emotionally in keeping with whatever you are trying to promote.

Emotion in Website Design

Why Use Emotion in Website Design?

Visitors who feel emotionally connected to a website will remember their visit and probably return to the site. If the site bores them or creates some other kind of negative emotion, they will disregard the site forever, and would only revisit if it was by accident – basically because they haven't remembered their previous experience. So you could have super-duper SEO, your site could sail through A/B testing, and it could be extremely functional, and all these factors will bring in visitors, but without creating an emotional connection those visitors probably won't stay or return in the future.

OurBabyBox
OurBabyBox

What Kind of Emotion Should You Aim For?

The emotional connection you should be aiming for is dependent on your product or service. Some positive ways to create emotion in your website are cute, heart-rending, funny, organic, happy, bright, dreamy, warm – to name just a few. If you are promoting summer soft drinks, you should be aiming for a happy and bright website design, whereas if you are promoting after dinner liqueurs, dreamy and warm is the direction to go in. It really isn't rocket science, but it is important, and it can easily be overlooked when trying to build sites according to current trends rather than prioritizing for the actual product/service.

Coca Cola
Coca-Cola

McDowell's VSOP
McDowell's VSOP

Examples of Website Design With an Emotional Touch

Blackhouse

This restaurant chain offers plain, simple food, and their landing page is a shot of a sizzling steak with metal utensils... you can't get simpler than that, and if that is the style of food you like, you will search further around the site for restaurant locations and even maybe make an online booking.

Blackhouse

Soyuz Coffee Roasting

This Russian speciality coffee manufacturer uses a very calming image on their landing page to promote their products. Calm water is relaxing, and the cup of 'special' coffee in the 'ordinary' guy's hand adds to the emotional effect.

Soyuz Coffee Roasting

WinShape Camps

This provider of summer camps has a video on its landing page, overlaid with a colorful transparent gradient. Kids doing all kinds of enjoyable activities, plus a few shots of lessons – no doubt for the benefit of the parents, you can definitely connect with this site if you are looking for a summer camp for your child.

WinShape Camps

Speedo Swimming Caps

Looking for a swimming cap? The Speedo landing page shows five people wearing their caps, looking happy, casual, seriously professional – so whatever your reason for wanting a swimming cap, this page should appeal.

Speedo Swimming Caps

Cerveza Austral

This site is trying to convey calmness, simplicity, tradition and purity, and it does so with a moving backdrop of water and mountains. The water has a calming effect, while the mountains give the feeling of purity. The image of the bottle shows its traditional shape, and the water droplets on the bottle convey simplicity – job done!

Cerveza Austral

Juliana Bicycles

As soon as you arrive on this site you will want to get on your bike and ride into the sunset!

Juliana Bicycles

Dear Mum

This site proves that emotion doesn't have to be created with photographs. It's shades of pink and heart shapes beautifully portray the feeling of love.

Dear Mum

CorteJago

This website for an Italian B&B doesn't show the house or the rooms on the landing page, or even guests enjoying themselves or relaxing... it shows the open gates, giving a wonderful welcoming feeling.

CorteJago

Booking.com Haunted

Be prepared to be scared... this landing page shows a dark, creepy image, but the touch of dark red gives the feeling of luxury and comfort.

Booking.com - Haunted

Westin Finds

This holiday company had a slideshow of stunning images of beautiful places to visit, and they mix them up – there are countryside images, buildings, water and cities. Wherever you want to visit you will connect with the landing page of this site.

Westin Finds

The following sites are totally self-explanatory in their emotional appeal.

Too Young to Wed
Too Young to Wed

Plant with Purpose
Plant with Purpose

ASPCA
ASPCA

Hope Unlimited
Hope Unlimited

Nutrir
Nutrir

WWF – Endangered Species
WWF Endangered Species

St. Regis
St. Regis

Leonia Holistic Destination
Leonia Holistic Destination

Tiger Awareness
Tiger Awareness

Advising Center – University of Hawaii
Advising Center - University of Hawaii

Le 28 Thiers
Le 28 Thiers

Conclusion

They were some of the best emotional website designs we could find, but perhaps we missed some that you know of... if so, please leave a link to share your finds with us.

Do you design websites according to current trends, or paying more regard to the product or service to be promoted? Do you think it is necessary to inject some emotion into website design? Please share your opinion with us.

Carol is a blogger and Photoshop enthusiast. She enjoys surfing the net in search of outstanding art, design and photography, and enjoys nothing better than sharing her discoveries through article writing.