UXDE dot Net Wordpress Themes

Emotional Web Design: Tips and Examples

Today emotional design becomes a very powerful tool in the hands of professional web designers. Following the trend simplification of complex elements modern websites are focused on more emotional expression than on the technicality.

Recently the developers were so passionate about the internal adaptation of the web that they quite lost the visual appearance of websites, making them virtually faceless. Don Norman with his book “Emotional Design” made the first step to open a huge potential of emotion in web design.

In order to understand the main Norman’s ideas take a look at this video.

In his book Norman describes why “attractive things more effective”. If the website causes the positive emotions it will quickly win the trust of users. There are three levels of emotional design. Let’s talk about them.

Intuitive perception (appearance)

The rounded and smooth design features cause a positive effect on human consciousness while the sharp jagged and angular forms cause a concern and suspicion. Intuitive emotions appear at once as they are related to the subconscious mind. There is why a lot of web designers try to affect on intuition of users and cause positive emotions.

This frellancer’s portfolio causes only positive emotions.

Emotional Web Design

A penguin feels a little lonely.

Emotional Web Design

User Friendliness (usability)

More information on the principles of usability you can find in the article “7 Best Practices for Improving Your Website’s Usability“. The basis of usability is to make a website as simple as it possible. In order to make this principles work you should create a sense of control over the action taken.

A perfect example of a website with good usability.

Emotional Web Design

Contemplation (memory)

When you look at the object you are always associating it with the familiar objects you have seen before. Contemplation is like a process of thinking about the acts done. For example, on the website Fantasy-cartography you’ll find the similarities with a map of the world and travel.

Emotional Web Design

Here the map is organized on a girl’s face. It’s a quite creative idea. The yellow color have a positive impact on the visitors.

Emotional Web Design

Visually attractive sites contribute creative thinking and other mental processes in human mind. If the design is really good it makes all three levels work together. If you’ll succeed to combine these three levels you’ll make the truly good design. It contains:

  • attractiveness (impact on the perception of users);
  • effectiveness (make sure that the visitors will find the info they are looking for);
  • aesthetic pleasure;
  • memorable (good impression and memory).

One more example website Bagigia has simple, but memorable design.

Emotional Web Design

Implementation the idea

As a rule all websites include a few elements which impact on users’ emotions. Some elements are obvious such as forms, colors, gradients, contrast, etc. But let’s focus on the less obvious objects.


Humor is one of the most effective ways of people communication. Jokes and smiles can help avoid embarrassment and feel comfortable in the conversation. However, one person will laugh, but another one won’t. It all depends on the specific of your own web-project and target audience.

John Martz’s funny portfolio website.

Emotional Web Design


A person is always looking for an emotional connection with the other person. It’s our nature. There is why the images of people on the websites cause different feelings such as sadness or happiness. In other words people subconsciously looking for a face of another person on website. And that person is capable to charge emotions and mood of users.

This guy is dreammy and thoughtful, but still he causes positive emotions.

Emotional Web Design

The girl smiles and you want to smile back.

Emotional Web Design


If the site is engaged in e-commerce sales so the demand for goods depends on the attractiveness of the pictures. The attraction leads to the purchase of the product.

Here is a good example of tasty website that awakens the appetite.

Emotional Web Design

The wedding website is also a great example. Love is the emotion as well as happiness.

Emotional Web Design

Small Details

Small pleasant things could touch a person on the emotional level. In order to better understand what I”m talking about, there are a few examples below.

404 page us a good example of connection with a user: “No coffee, no workee!”

Emotional Web Design

Are you lost?

Emotional Web Design

One more example is the MailChimp landing page. It says “This is your moment of glory”.

Emotional Web Design


The emotional design has many positive qualities. Seeing something attractive and unusual awakens the creative thinking. Don Norman has identified three levels of visual design that are based on our psychological processes: intuitive perception, users’ behavior and contemplation. The web designers have a responsible task to balance these levels and maximize the impact of the project for web users. They need to predict their goals, needs and expectations.

There are a lot of similar examples around the web. Do you have other interesting examples of emotional design? Feel free to share your thoughts in the comment section below.


ShmitAcc writes inspirational articles about web design technologies and useful web design tutorials, where you can find a lot of top tips how to create amazing web design artworks.

Discussion 2 Comments

  1. Joy Edwards

    All the designs were very attractive, I like design with girl’s face girl’s face, it is really a creative idea to make a website unique than the ordinary web designs.

Leave a Reply

Your email address will not be published. Required fields are marked *