Emotion is not something you would normally associate with web design. Even if you’re a die-hard design enthusiast, you’re probably not going to start getting teary-eyed over excellent mobile-first scaling or a straightforward navigation system.

However, ‘emotion’ in design isn’t simply about evoking feelings we view as being ‘emotional’. Emotion in design is about appealing to those interacting with the object.

When it comes to a site, emotion refers to how a user feels within that digital space. If users are bored or unresponsive to a site space, they’re unlikely to bother engaging with it, let alone ever return to it. However, if a user feels emotionally connected to it, they are much, much more likely to really engage with the content therein—and develop a longer lasting relationship with it.

Put simply, building emotion into your sites is about making people sit up, notice, and remember—without sacrificing all the great functionality and efficiency you’ve worked so hard to develop. Today, we’re going to explore how you can use colour and imagery to build emotion into your design.


Starting with what seems the most obvious and basic way to design emotion into your site, let’s talk about colour.

We’ve all been taught about the importance of colour in design, so we won’t cover too much old ground or repeat clichés. However, colour is your most powerful tool in building an emotional rapport with your users because it operates at what Don Norman calls the visceral level, or our instinctive, preconscious interpretation of environmental stimuli. Basically, first impressions count, and the right use of colour should get people excited about dedicating the time to exploring your webspace in more depth.

This handy guide explores the topic of how colour affects users. Avoid over-reliance on colour tutorials claiming things like ‘red = emotion x, yellow = emotion y’—context, both situational and cultural, is everything.

Photography and imagery

Even if you’re looking to create a highly functional minimalist site, you’re probably going to need to include a few images at some point. We process images 60,000 times faster than we do text, and so they are vital to making an impression on your users.

First of all, consider your photos and images as site content, rather than just visual window dressing. Like all good content, it must not only inform the user about this or that product or service—it must also make an impact and offer them a new way of looking at something. Emotions are useful to you as a designer, and so your photos or custom illustrations must have an emotional purpose as well.

There’s a reason that photos with people in them are used so often: they’re powerful. Imagery of other humans gives a site a human touch, reminding users that your products or services are intended to be used and enjoyed by real people. These photos allow you to inject your site with a specific emotion, be it humour, sadness, or calmness—all through the visual subject in question.

A good example is the WWF site. Those guys are masters at exploiting cute animal pictures and landscape photography.

WWF homepage


  • Cute animal photos are always a hit.
  • Experiment with different visual formats—through a mix of photos, illustrations and videos, you can create a powerful emotional impact for your users.
  • Build emotional associations by ensuring your site imagery is consistent with the site’s colour scheme, feel, and ‘voice’.


  • Use too many images—less is more when it comes to making your point, and too much imagery can muddy the waters.
  • Use images where emotions look forced—you want things to look as natural as possible, lest users feel they are being emotionally blackmailed.
  • Use sad, evil, and depressing stock photography.

In our next post, we’ll be exploring how you can develop a consistent ‘voice’ for your site in a way that guides users emotionally through the webspace. Stay tuned.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.