On the web you are what your users see. Illustrations can be a powerful tool to differentiate your brand from competitors and create engaging visual narratives.
Brand image is built from many different elements – some of which we have discussed previously in our article about the role of brand identity in UI/UX design. Aside from your logo, colors and fonts, a big component that users will actively notice, are the visuals that stand alongside your messages. Traditionally we see lots of photography on the web, but especially in recent years more and more companies rely on illustrations to tell their stories.
So let’s take a closer look at how illustrations can enrich your online presence and how they can fit into a bigger design system, as shown by our client Ruokaboksi.
Oftentimes when we talk about websites, you will hear the terms illustration and icons used interchangeably, so before we get started, let's quickly define some terminology:
An illustration is usually the interpretation or visual explanation of a text, concept or process. Contemporary illustration uses a wide range of styles and techniques, including painting, digital drawing, collage or 3D modelling. Depending on the purpose, illustration may be expressive, stylised, realistic or highly technical. (Source) On websites you will generally encounter three main types of illustrations: full-frame illustrations, spot illustrations and decorative illustrations.
Github uses a painterly full-frame illustration to separate different sections on their frontpage and create a colorful narrative featuring their mascot Octocat.
In a previous brand iteration toggl used small 3D modelled spot illustrations to visualize different levels of pricing.
Etsy uses small, decorative illustrations to separate sections and bring visual interest. These illustrations are purely decoration and don’t add much in the way of narrative.
An icon on the other hand, is a pictogram which helps the user navigate or interact with a system. The icon itself should be a quickly comprehensible symbol and is more like a traffic sign than a detailed illustration of the actual entity it represents. Source
A set of icons in Google Docs’ interface helps the user navigate the program without the use of words
In web design, both icons and spot illustrations are often interchangeably used to bring visual interest to sections and to support the website copy. If the visual is done in a simple, flat style, it is more likely to be called an icon, even though it serves the purpose of a spot illustration.
Uber for business uses icon-style illustrations to explain their service
Now, let’s dig deeper into a few reasons for choosing illustrations over photography in web design.
One simple reason to choose illustrations over photography is their ability to visualize abstract concepts or express sensitive subjects. Illustrations can make ideas more accessible and even add a whimsical touch to otherwise difficult topics. They also introduce a narrative element that can help tell a coherent brand story throughout all your channels. As illustrator Yihui Liu puts it: “Illustrations turn away from realism and let you build the world as the brand sees it.” Source
Neuralink uses collages of photography and illustrative elements on their website to visualize the abstract concept of engineering within the human brain.
Even though we have (mostly) left the era of euphoric businessmen shaking hands in gleeful joy, we still see the same, arguably high-quality, stock photos from sites like unsplash.com, pop up in a myriad of websites. And while users might not immediately pick up on it, this can make sites feel generic, or in the worst case, untrustworthy.
Using custom, professionally made illustrations can help your brand stand out and make it more memorable, especially in a competitive field. And if you’re using an illustration system with a cohesive mood and style, each visual will clearly drive home your brand’s unique values.
Mailchimp’s absurdist illustrations have a highly recognizable style and whimsical tone of voice, and feel consistent even though they are created by many different artists. Source
Who hasn’t spent hours looking through thousands of stock images, trying to find just the right shot of just the right scene? With illustrations you are in full control of the image and can tailor it to your specific needs and vision. Especially with vector illustrations, it is easy to change, resize or reuse elements later, even if your designer is not a trained illustrator.
Being in full control also means you can set up an illustration system, which gives your business the ability to “unfold its brand story with consistency on multiple platforms (web, print, social, etc).” Source
Headspace uses similar visuals across various channels (website, app, video), but each illustration is tailored to the specific requirements of the medium. Source: Headspace
So, how do you go about creating a coherent illustration style for your brand? I will outline a few simple steps that guide this process, with some examples from the illustration system we created for our client Ruokaboksi as part of their website design.
This seems like a no-brainer, but is one of the most important parts of creating an illustration system. As we mentioned before, each visual becomes part of the user’s experience of the brand, so it is important to really understand the brand’s values and user base. A serious brand using playful illustrations may cause confusion or come off as insincere.
Before starting to do any actual creative work, you’ll need to understand how and where your illustrations are going to be used. Do you need spot illustrations or icons? Does the illustration need to be legible even at smaller sizes, e.g. on phones? Will the illustration be reused in other mediums? Talking with different stakeholders helps you define all these key questions and saves you from headaches later on.
For Ruokaboksi it was clear that different illustrations would serve very specific purposes around the website. The spot illustrations on the frontpage give flavour to the brand message and support the sales process and as such could be more detailed (but still legible on mobile devices!), while more icon-like, simple illustrations clarify specific information, such as payment and delivery conditions.
Simple icons make it easy for the user to understand the payment and delivery of the product before committing.
Your illustrations should live and breathe your brand, they should be memorable and fit into the bigger ecosystem of your visual brand. Taking into account the information you gained during the first two steps, and your brand’s competitors, you can start experimenting with illustration styles. The ultimate goal is to find a style that is distinct and easy to recognize, but which you might replicate for other illustrations in the future.
Ruokaboki’s visual design plays on the combination of organic shapes, combined with clean lines and a tasty color palette to give the website a friendly and easy feel. To create the distinct spot illustrations for Ruokaboksi, we use a limited set of brand colors, organic background shapes and a custom brush in Adobe Illustrator. This allows us to easily create more visuals that maintain the same style.
To be able to create unified illustrations for a long time, it is useful to create a system, or a set of rules for your illustrations. These rules might come from the brand’s visual design or the distinct style you settled on. It’s also useful to build up a library of elements, so you can refer back to them when making visuals in the future.
For Ruokaboksi’s website, we use three main illustration sizes: Larger spot illustrations, mid-sized icon-like illustrations and small, functional icons. Large illustrations use a hand-drawn style and play with different line-thicknesses. Color is introduced mainly through organic background shapes. These features are also adopted for the icon-likes, which helps to integrate the cleaner aesthetic. To keep icon(-like) illustrations consistent, they are drawn on a grid, with predefined stroke widths and corner radiuses.
An example of reusing elements in Ruokaboksi: The overall shape of the shopping cart is the same throughout different illustrations and icons, but gets slightly adjusted to match the size and purpose of the visual.
Note: To read more about our design process for Ruokaboksi, the finnish market-leader in meal-kit subscriptions, check out our case study.
Using custom made illustrations are a convenient alternative to photography, and a beautiful way to help your brand stand out on the web. And to make sure that your new illustrations integrate seamlessly into your brand’s web experience, consider commissioning everything from the same agency.