Humans are emotional creatures, and our emotions play a big role in how we interact with the world around us.
One way to tap into the emotional power of UX is through illustration. Illustrations can add personality and emotion to an otherwise sterile interface, making it more relatable and engaging for users.
They can also be used to communicate abstract concepts, making them easier to understand.
And when used sparingly, they can add just the right amount of personality to your product without overwhelming users.
What Are Illustrations?
An illustration is a visual representation of an idea, concept, or object. They can be hand-drawn or digital and are often used to add personality or emotion to a design.
Why Use Illustrations in UX?
Illustrations are exactly what they sound like—a way to add visual interest and personality to your product. But beyond that, they can also be used to:
Convey Mood and Tone
Illustrations can set the tone for your product, conveying the mood and feeling you want users to experience. For example, if your product is playful and light-hearted, using fun and whimsical illustrations will help communicate that bouncy feeling to users.Â
On the other hand, if your product is meant to be more serious and professional, using illustrations with a cleaner, the more minimalist aesthetic will help get that same tone and mood across.
Communicate Abstract Concepts
Illustrations can also be used to communicate abstract concepts that might be difficult to understand otherwise.Â
That’s especially helpful when designing for non-native English speakers or users not familiar with your product. For example, if you’re designing a financial app, using illustrations to depict things like savings, growth, and investment can make these concepts more relatable and easier to understand.
Add Personality
Last but not least, illustrations can simply add personality to your product. In a world where so many products are starting to look the same, this can be a key differentiator that helps your product stand out from the crowd. And when done right, it can make your product more memorable and engaging for users.
Create a Narrative
Illustrations can also be used to create a narrative for your product. That can help users understand the story behind your product and what it’s meant to do. For example, if you’re designing a fitness app, you could use illustrations to depict a character’s journey from being out of shape to becoming fit and healthy.
That would help users understand the app’s purpose and how it can help them reach their own fitness goals.
The Difference Between Icons and Illustration
You could argue that icons are a type of illustration. And while that’s technically true, they serve a different purpose in UX design. Icons are meant to be functional, helping users navigate a product and understand what each button or link does. They’re often used in lieu of text to keep interfaces clean and uncluttered.
On the other hand, illustrations are meant to be more decorative, adding personality and emotion to a product. They’re often used sparingly and only when it makes sense for that specific design.
When to Use Illustrations in UX Design
As we said, illustrations should be used sparingly—too many can be overwhelming and make your product feel cluttered. That’s why it’s important only to use them when it makes sense for that specific design.
Some situations where illustrations might be appropriate include:
Onboarding Screens
Using illustrations on onboarding screens can help set the tone for your product and give users a preview of what they can expect. That’s especially helpful if your product is new or innovative, and users might not know exactly what it does.
Loading Screens
Another everyday use for illustrations is on loading screens. That’s an excellent opportunity to add some personality to your product and make the wait more bearable for users. Just make sure the illustration is relevant to the content that’s loading.
Error Screens
You can also use illustrations on error screens to help soften the blow of an error message. For example, if a user tries to access a feature not available in their subscription plan, you could show an illustration with a message that says it’s unavailable. That would help the user understand why they’re seeing this error and what they need to do to fix it.
Pop-Ups and Overlays
Another trick would be to use the illustrations in pop-ups and overlays to help draw users’ attention to a specific message or call-to-action. For example, if you’re running a sale or promotion, you could use an illustration to grab users’ attention and encourage them to take advantage of the offer.
Product Pages
You can also use the illustrations on product pages to help users visualize the product and understand how it works. For example, if you’re selling a piece of furniture, you could use an illustration to show what the furniture looks like in different rooms or types of décors. That would give users a better idea of how the product would work in their homes.
Blog Posts and Articles
If you write blog posts or articles about your product, use illustrations to break up the text and make the content more visually attractive. For example, if you’re writing a tutorial, you could use illustrations to show each step of the process. That would make the tutorial more visually appealing and easier to follow.
Types of Illustrations
Illustrations come in all shapes and sizes, from simple outlines to detailed scenes, full colors, and realistic depictions. The illustration you use depends on the specific design and the message you’re trying to communicate.
Some of the most common types of illustrations include:
- Icons: Icons are simple, graphic symbols representing concepts, objects, or actions. You can use them to add visual interest to a design and help users quickly understand what a screen or page is about.
- Simple Shapes: Simple shapes, like circles, squares, and triangles, can be used to add visual interest to a design and help break up content. They can also be used to represent ideas or concepts symbolically.
- Patterns: Patterns are repeating visual motifs that can be used to add texture and interest to a design. They can be created from simple shapes, icons, or even photographs.
- Line Art: Line art is a type of illustration that uses only lines, without any colour or shading. It can be used to create simple designs or detailed scenes.
- Photorealistic Illustrations: Photorealistic illustrations are realistic depictions of people, places, or things. They can be used to add realism to a design or to create an idealized version of reality.
How Designers Can Use Illustrations to Good Effect Across Four Categories
Let’s take a more detailed look at how designers can use illustrations in four key categories.
Corporate and Financial Sector
Financial services, fintech, and accounting software often use illustrations in a very corporate, business-like way. They tend to use muted colours and simple shapes to communicate ideas without being too ‘cutesy’ or informal.
For example, the popular company Acorn uses an illustration of an acorn field on its website. The muted colours and simple shapes help professionally communicate the company’s message.
Other illustrations are tied to the shade of green most commonly associated with money.
Founded in 2014, Acorn uses an illustration of an acorn field to create a feel atypical to other financial startups.
Hospitality and LeisureÂ
Users want to see photos in this category, but illustrations can also help. An image can only show what something looks like, while illustrations can add the extra emotional dimension of an experience.
At the minimal end of the scale, Protos Car Rental uses beautiful, simple illustrations to emphasize the holiday aspect of its business. It’s not always about making things look ‘cute’ or fun, though
Comptoir Libanais uses a combination of photos and illustrations to create an inviting atmosphere.
They use illustrations to create a distinct identity, rather than just showing photos of their food.
Hotel Frida is all about character, and its illustrations reflect that.
They use a lot of cartoony illustrations to create a distinct identity.
It’s not just about creating an inviting atmosphere, though. Illustrations can also be used to add excitement and energy to a design. For example, Virgin Hotels uses illustrations to add vibrancy and excitement to their website.
Highcourt uses simplified, geometric shapes to add a sense of order and calm. It uses stylized illustrations to give the website a modern look and feel.
Highcourt uses stylized illustrations to give the website a modern look and feel, but most importantly, to give an overview of the building’s interiors, even better than they could have achieved with photographs.
The Neverland doesn’t use any photos at all. Everything is either an illustration or a user-generated photo.
The Neverland’s illustrations allow them to create a cohesive, consistent look and feel across their website and social media channels.
Their website is an immersive experience that transports users to another world.
Food and Drink Sector
The food and drink sector is one of the most competitive industries. Companies must create a strong identity that communicates their unique selling points to stand out.
Illustrations can be a great way to do this.
Nandos uses illustrations to add personality and vibrancy to its brand.
Nando’s use of fun, cartoony illustrations helps create a distinct identity.
Barkbox uses illustrated dogs to add a sense of fun and energy to their website and show that they understand their customers’ needs.
Their use of illustrations helps them connect with their target audience deeper.
Pooch & mutt use simple line drawings to communicate their food’s natural, healthy ingredients.
The simple line drawings communicate the natural, healthy ingredients in their food.
They also use them to add a sense of fun and personality to their brand.
Whole Foods Market uses illustrations to show their food’s fresh, natural ingredients.
How Illustrations Add Emotion to User Experience
Some illustrations are more serious and business-like, while others are fun and cartoony. It all depends on the message you want to communicate.
Illustrations can add emotion to your user experience in a way that photos cannot. They can also help create a distinct identity for your brand.Â
Don’t forget that photos are still an important part of the user experience. A mix of both can create a well-rounded and engaging experience for your users.
But how do you use illustrations to add emotion to your user experience?
But how exactly can illustrations add emotion to user experience? Let’s take a look.
Illustrations Connect with the Audience
Illustration evokes humour, fear, love, happiness, and other emotions. That’s because they connect with the audience on a deeper level. They create a connection that goes beyond the physical world.
For example, let’s say you want to evoke the emotion of happiness. You could use a photo of a smiling person, but an illustration of a sunbeam shining down on a field of flowers would create a stronger emotional connection.
Illustrations communicate ideas and emotions that are difficult to capture with photos. They can transcend the physical world and connect with the audience more deeply.
Illustrations Offer a More Relatable Imagery
Another way illustrations add emotion to user experience is by offering more relatable imagery.
People can relate to illustrations more easily than photos because they’re often more stylized and simplified. First, they challenge your imagination. And second, they don’t show reality in its full, sometimes harsh, detail.
For example, let’s say you want to show the emotion of love. A photo of a couple kissing might be too graphic for some people. But an illustration of two hearts entwined would be more appropriate and relatable.
Illustrations Help Tell a Story
Illustrations also help tell a story. They can be used to set the scene, introduce characters, and convey emotions. They can also be used to add intrigue and mystery.
For example, if you want to tell the story of a couple’s first date, you could use photos to capture the scene. But illustrations would help set the mood and add emotion to the store, making it more engaging.
You could use illustrations of the couple’s nervous expressions as they wait for their date to arrive. Then, you could use photos to capture the couple’s expressions as they enjoy their time together.
Mixing photos and illustrations would help create a more engaging and emotive story, making it more likely to resonate with the audience.
Convey Mood and Tone with Illustrations
Using the right imagery on your website or app can help set the mood and tone. And illustrations are a great way to do this.
For example, if you want to set a playful tone, you could use cartoon illustrations. But if you want to convey a more serious tone, you could use more realistic illustrations.
Think about the mood and tone you want to set for your website or app. Do you want it to be playful or serious? Fun or business-like? Whimsical or minimalist?
Your choice of illustrations will help set the mood and tone. So, choose wisely!
Make Your Brand Memorable with Unique Illustrations
People will easily remember your brand if you use unique illustrations.
For example, let’s say you own a pet store. You could use photos of pets on your website and social media accounts. But if you want to stand out from the competition, consider using illustrations instead.
You could use illustrations of cute animals in fun poses.Â
That would help create a more memorable and emotional connection with your audience. And it would make your brand more recognizable.
Create Further Engagement with Interactive Illustrations
Interactive illustrations are a great way to add emotion to user experience and create further engagement.
For example, you could use an interactive map to show the location of your business. Or you could use an illustration of a product and allow people to click on different parts to learn more about it.
Provide a Humorous Break with Funny Illustrations
Sometimes, you need a break from the seriousness of life. And that’s where funny illustrations come in.
Funny illustrations can help lighten the mood and make people smile. You can use them to add a touch of humour to your content.
For example, if you want to write a blog post about the top 10 things that make you anxious, you could use illustrations of kittens instead of photos. You know how kittens are always getting into things and making a mess? That’s precisely the sort of anxiety-inducing situation you want to avoid. But it’s also something that would make people laugh.
Funny illustrations are a great way to add emotion to user experience and make your brand more memorable. So, don’t be afraid to use them!
The bottom line is that illustrations are a powerful tool for adding emotion to user experience. They can help set the mood, introduce characters, and tell a story. They can also make your brand more memorable and recognizable.Â
How to Choose the Right Illustrations
So, how do you choose the right illustrations?
First, consider the emotion you want to convey. Do you want to tell a story? Set a mood? Make your brand more memorable? Create further engagement? Provide a humorous break?
Step 1: Choose a Theme
The first step is to choose a theme for your website or app. That will help you narrow down the options and make it easier to find the right illustrations.
For example, if you’re creating a website for a new restaurant, you might want to choose a theme that reflects the type of food you serve. So, if you’re a pizzeria, you might want to select an Italian-themed illustration.
Step 2: Select the Right Style
Once you’ve chosen a theme, it’s time to select the right style of illustrations. Do you want to use cartoons? Realistic images? Whimsical drawings.
Think about the tone and mood you want to convey and the overall look and feel you’re trying to create. Â
Before you decide on anything, explore different illustrations and ways to use them. That will help you find the style that best suits your brand, website, or app.
Once you’ve established what type of illustrations you want, you can shop for the right style and illustrative content.Â
Step 3: Decide How Much of Your Website or App Should be Illustrated
You don’t have to cover your entire website or app with illustrations. The same goes for your photos and other design elements.
Instead, think about how much of your content can be enhanced with illustrations. For example, you might want to focus on using illustrations to add emotion to specific pages or features. Or you could use them throughout your website or app to create a totally immersive experience.
In the end, it’s up to you to decide how much of your website or app should be illustrated. But by considering the emotions you want to convey, the tone and mood you want to set, and how best to use illustrations within your user experience design, you can create a more engaging and memorable experience for your users.
Step 4: Build Your Illustration Toolkit
Once you’ve chosen your illustrations and determined how much of your website or app should be illustrated, it’s time to build your illustration toolkit.
If you’re looking to create a custom design, you may need to hire an illustrator to help you. But if you’re a DIY person, there are plenty of online tools and resources you can use to create the illustrations yourself.
Some of the most popular resources include:
- Vector graphics software like Adobe Illustrator or Sketch
- Online illustration tools like Canva or Illustrator
- Stock photo sites like Shutterstock and Unsplash
- An illustrated template like Elementor Kits
Here are a few Illustrative WordPress themes that can help you get started:
- Illustrator: Ideal for artist portfolio sites, Illustrator is a highly customizable theme that offers lots of different layout options and comes with tons of other visual elements you may want to use, including fonts, icons, and templates.
- SEOWP: A sleek and modern theme with a minimal design, SEOWP is perfect for budding digital marketing agencies that want to showcase their work with high-quality illustrations.
- Maree: Maree is a portfolio theme designed specifically for illustrators and designers. It offers a responsive layout and many customization options, making it easy to create the perfect site for showcasing your work.
- Vikinger – BuddyPress and GamiPress Social Community: This fully-customizable theme is perfect for building a community of like-minded individuals.Â
- GEOBINS: GEOBINS is a digital marketing agency specializing in SEO, web development, and social media marketing. If you’re looking to create a website that truly reflects your brand and helps you stand out from the crowd, GEOBINS is an excellent option. With an emphasis on design and illustration, this theme offers everything you need to build a stunning and professional website in no time.
Step 5: Test Your Illustrations for Effectiveness and Usability
Once you’ve created your illustrations and put them into your website or app, the next thing you want to do is test them for effectiveness and usability. Some key things to look out for include:
- Whether or not your illustrations successfully convey the emotions and tone you want to convey
- Whether or not your illustrations are easy to understand and navigate
- Whether your illustration style is consistent throughout your website or app
- Whether or not your illustrations are distracting or detracting from the user experience
If you notice any issues with your illustrations, getting feedback from others, such as other designers and users, may prove helpful. It can help you identify the areas to improve or where the illustrations might need more work.
