Paint a Pretty Picture: A Look at the Use of Illustrations in Web Design and Branding Share: Embacy Date Published 20 May 2021 Categories Blog, Research Reading Time 6-Minute Read 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 on the 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? 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 in web design here 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 in web design 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. Perfektion: Detailed Lineart Lineart is extremely versatile. It could be used for simplistic and friendly illustrations in web design, 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 Gallery Here are 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 freemarketsdestroy.com pets.byspotify.com todoist.com 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.