A Brief Introduction To Emotive UI In Web Design

Saurabh Tiwary | 20th October 2016

Emotion influences the effectiveness of the web or graphic design. The more you connect your users to the website, the more likely they are to interact with it. So, bringing in some feel and instinct to your design might be worthy. Here, I will introduce you to one of the very useful resources that can help you design your website by directly hitting into the minds of the users. Similar to the usefulness of Emotive UI in Mobile UX design, web designers have begun to employ them the website design applications and services.

 Emotive UI

What Is Emotional or Emotive  UI?

The emails we send, the text we type and the social media activities we do are actually a glimpse into the world of emotive UI. Our day to communications is filled with many tiny faces that help others understand exactly what we are feeling.


An emotive UI is a powerful element in the website design. It the combination of an interface which is highly usable and help connects with people on a visceral level. Whether it is a  joy or fear or anger, people possess various kinds of feelings while going through any content of the website.


Primary Design Approaches For Emotions


Begin with the color application concept that you already know. It is crucial to consider the in-between nature of the emotional connection with users. Color alone probably isn’t enough to establish an emotive bond.

Robert Plutchik, an academic psychologist has written a complete textbook based on emotions In 1980, he introduced the new concept using eight basic emotions that we possess such as joy, fear, trust, anger, sadness, disgust, surprise, and anticipation. He tried to illustrate is using “wheel of emotions” that represents the interaction of those emotions, and their varying level of intensity. Check out the wheel image.

Emotive UI

Image From Google

Also Read, Creating A Perfect Color Combination For Lucrative Design


Using real human faces, it becomes very easy to convey emotions. Check out the image below. It clearly signifies what kind of feeling it presents.

 Emotive Design

Image From Google 


Apart from images and emotions, words are the powerful means to convey the emotions. Images and emotive UI can be useful for having an immediate impact of emotions to the user instead of routing them and allowing them to explore through other connected elements.

 Words In Emotive UI

However, words help convey the actual message with full of clarity that can hit the minds of the users. A brief and focused text content can help you win the game.


Designing a website or a mobile app on an emotional level is nothing new. There are numerous ways to deal with the emotions and the three factors that I discussed above are are the part of majority design projects.

The current challenge in bringing emotion to the design is through 2D applications of static content such as text and graphics. Emotive UI is a part of it being mostly applied in Mobile UX designs. However, alternatives such as virtual reality and artificial intelligence leave behind a lot of questions about the future of interface designs.


About Author


Saurabh Tiwary

No Comments Yet.

Leave a Comment

Name is required

Comment is required

© Copyright 2015-2024 Oodles Studio. All Rights Reserved.

Request For Proposal

Recaptcha is required.