Paint a Pretty Picture: A Look At The Use of Illustrations in Web Design and Branding

Presented here is an overview of illustrations in web design, where we take a look at some of the ways you could use them.

Illustrations in web design serve a simple purpose: they illustrate. And we could end the article right here to the thunderous applause. But what illustrations do, is they evocate whatever emotion your design needs to convey, supplementing the fine-tuned choices of fonts and colors and whathaveyou. They work better than photos, and they allow for more freedom. In this article, we’ll go through how illustrations in web used to be, how they are now, and we’ll take a look at many websites employing the use of illustrations to great success, including some that we’ve made.

Take a Picture, It’ll Last Longer: Why Use Illustrations

Because everybody does it. Unfortunately, that’s the mindset plenty of companies use now. This results in a number of websites with safe designs, that seem like something, but you can’t even describe their style other than boring. Which is the opposite of what illustrations should do. They’re there to supplement the design and the text, to supplement the message, but by no means do they have to be boring. The good use of illustrations turns good and coherent design into something more, they invite the viewer into their own little world. The illustrations are there to show complicated ideas and metaphors in easy ways, but most of all: the illustrations are there to convey emotions.

illustrations on moderne.st

Current Trends and Tying Everything Together

If this were a clickbait article, here we would say All The Current Styles In Web Illustrations and pat ourselves on the back while spouting nonsense. The problem with that approach is that styles are defined afterward for classification, and right now there’s so much going on. There are general trends, sure, like flat colors, minimal illustrations, the use of 3D elements. Now every website with a design worth caring about got its own design system, its own visual language, its own little world. Even if taking advantage of some trends, no good website could comfortably fit under one umbrella.

illustrations using 3D elements from toggl.com
more 3D illustrations from binaryblocks.io
the 3d hands we’ve made for our Embacy Coin project

Stuffed Shirts: How Illustrations Used To Be

It didn’t use to be like this. All this variety and excitement, all this came fairly recently. And before we had websites with product photos and maybe an illustration that’s supposed to represent the client. The illustration being an office worker in a white shirt using the product that’s being sold on the website. That’s it. For quite a number of years, everyone seemed to be content with that, even if no one could relate to these designs. Who could? Who defines themselves, who wakes up in the morning thinking «I’m an office worker»? And of course, there were all those inexplicable and tacky cartoons in the late 00s. Luckily, web design has moved on since then. Let’s take a look at the use of photos with illustrations first.

Photos and How To Cook Em: The Use of Illustrations in Tandem With Photos

Of course, illustration is just a tool in your design kit. It’s there to supplement the message, and you could use photos just as well. There are reasons to use illustrations over photos: they allow for more freedom, they could show a complex metaphor easily, they manage to convey emotions better, and many others. And photos are better suited to fulfill other goals, to show your product as it is, or to ground the design in reality, and so on. Why not both?

Edway design by Embacy

This is the website we’ve made for Edway, an Australian safety training organization. The photos and the textures are there to give reality to this design for a serious product, and then there are bright illustrations to keep it all light and vibrant.

And this is the website we’ve made for Kodland, a coding school for children. The illustrations set the playful and colorful mood, while the photos of real pupils and teachers that you can see on the website instill trust and a feeling of safety in the parents looking for something both fun and useful for their kids.

But the most straightforward way to use collages is the most daring one. Going a little back to modern art, and pop art in particular, you could use such illustrations if you want your website to be a little more daring.

scubemarketing.com

All The People, So Many People: Hero Illustrations

Hero illustrations are the easiest trick there is. Here’s a character, and you immediately want to relate to it. It helps to humanize your brand, and it’s great for storytelling. It’s just wonderful, as long as your character isn’t an impersonal figure in a white shirt.

A good example of character use, and all around the use of illustrations is the website for Notion. Their monochromatic style is consistent and expressive, giving you lively characters without the overabundance of detail. And of course, your «hero» doesn’t have to be a person. It could be a cartoon bear, or even a cartoon bear.

The titular bear of TunnelBear is omnipresent in their design
The bear of dave.com is one friendly character

And following is the website we’ve made for Seampay, a digital Nigerian bank. Rather than putting characters first and foremost, we’ve scaled them down. We’ve introduced a whole community. Here, you don’t just relate to a single character. You get a sense of belonging.

Seampay design by Embacy
Seampay design by Embacy

Perfektion: Detailed Lineart

Lineart is extremely versatile. It could be used for simplistic and friendly illustration, like on the website for Notion that we’ve shown here earlier. Or it could be very precise, serious, have real gravity to it.

This is the website we’ve made for the fintech Vauban. The audience here is serious investors, the design couldn’t be bright and colorful, no matter how hip that might be. We’ve had to do something that’s cutting edge but timeless. With the subdued colors with one flashy accent and strict fonts, lineart illustrations did wonders. Straight lines, straight-laced. It’s stern and it’s stylish.

metamusic.ca is a great example of lineart use
interactive lineart on makeui.design

All The Majesty of a City Landscape: Isometrics

The lineart is also invaluable for isometric illustrations. Right now, at the tail end of 2020, isometrics aren’t quite in vogue anymore. But trends cycle, and maybe you’re reading this article in 2023 and it’s everywhere again. It could be great to turn a flat composition into something with perspective, to, quite literally, add an extra dimension to it. If you got a reason to do so. For a while, there were plenty of websites where isometrics showed some mechanism from a new perspective. Well, it looks neat. That’s about it. Luckily, we had a project where isometric was just perfect.

Oohdesk is a service that helps control and monitor outdoor advertising. Here we show the outdoor advertising as it is: as part of a city. This isn’t even some abstract city: this is, more-or-less, accurate depiction of a part of northern Moscow, painstakingly drawn by hand at a correct angle (couple degrees off, actually, to make it easier on the eyes). All the joy you see through the architects’ eyes presented here, showing the service as it is and as part of an ever-moving city. The result is captivating, elevated, downright magnificent: years later, this is still one of our most popular cases on Behance.

Or you could take isometric as an inspiration and go further. Not only just switch the perspective, but then, let the viewer play around with it.

Something like this interactive portfolio for Kaspersky isn’t for every website, but it’s certainly memorable and is just plain fun.

Gallery

Here's some more examples of various ways how illustration could be used in web design: stylized into colored pencils and watercolors, pop art collages, and more.

atozofai.withgoogle.com
goliath-entertainment.com
freemarketsdestroy.com
pets.byspotify.com
todoist.com

Outro

As part of branding, the illustrations are a team player: they don’t take the stage, they’re part of the cohesive whole. But what they can do is, add detail and texture to the world that you’re creating, to turn just a good design into its own world. So please, make that world something that isn’t a guy in a shirt smiling at his laptop.

Don't be a stranger

Subscribe and never miss a story

Got it! Now check your email
Oops! Something went wrong while submitting the form.

Also read

Design articles

Identity In Motion: Why Your Digital Product Needs An Animated Logo And How To Make One

Design articles

Visual Hierarchy In Web Design

Case Stories

Deutsch Online: Learning German In Style

Case Stories

Legionfarm: Our First Gaming Page

embacy

Want to recieve our awesome stories?

Got it! Now check your email
Oops! Something went wrong while submitting the form.

© Embacy. 2020