A Basic Guide on Using Illustrations

There are many techniques in web design that you can implement in order to humanize your brand and make yourself more approachable to prospective users. One technique that’s been experiencing a gradual increase in popularity the past few years is employing illustrations on your website.

Why Use Illustrations When I Can Just Write Better Content?

Touché, to whomever thought up this question. Content is definitely key to hook your readers in and invite traffic to your website, but ever heard of “show don’t tell”? You can make an even stronger impact on your readers when the first thing they see is an illustration representing your brand.

Besides, ever thought about the ones who don’t even bother to read whatever’s on your website to begin with? Using illustrations that convey the message of your brand to your viewers will encourage them to read – or rather see – your content. You’ll also be piquing their interest when they see a cool illustration on your front page, which will drive them to explore your website even further.

The right kind of illustration for your brand will not only attract the right kind of user, but also evoke the right kind of feelings you want to elicit in your viewers. It’s tempting to go on your website and add as many illustrations as you can, but like everything else in the web design world, there are best practices and rules that you have to follow. And even if you do want to break a few of these rules, it’s vital that you get to know them first.

     Advice #1: Do it for the visual appeal, but don't forget the relevance.

Forget infographics. Forget characters or mascots. If you really think your brand is need of some kind of illustration, then best way to do that is doing it purely for visual appeal and nothing else. For example, instead of using words to welcome the user to your website, use illustrations to do that for you. If you want to describe your product to your potential clients, then use very minimal words and make the illustrations do the talking instead. Make the illustration be the stand out element of your design and let it define your tone of voice, style, and brand. One thing designers sometimes forget however is relevance, as you'll often find nice illustrations or visuals that don't mean anything.

Why is a hamburger Enterprise but a pizza Starter? How is this related?
(Toggl)

While the illustrations are nice individually, why is a cactus used for protytyping?
(Dribbble)

Advice #2: Avoid stock illustrations at all costs, people recognize them immediately

Yes, they’re free. Yes, they’re readily available. But, no, they won’t make your brand any more special than the next one. If anything, you’re probably increasing the possibility of hurting your brand than helping it. If you really want your website to stand out from the competition, then saving enough money to hire a professional will surely turn this endeavor into an investment. You can’t go wrong with adding illustrations that are unique to you and designed only for you. Even if you cannot afford to create custom illustrations, there are infinite resources for visually engaging illustrations which you can find on the Digital Design Library. The most important factor is selecting an appropriate type of illustration.

Generic 'finance' illustration from Shutterstock
Poor Illustration

This is a poor example of an illustration that is very generic, and does not have a lot of messaging or engaging features. While free, it does not stand out in a very good way.

Unique product illustration from Gucci
Great Illustration

Yes it's very custom, yes it was probably expensive but the quality and uniqueness cannot be ignored. Gucci was able to stand out among both the luxury brands and the digital world.

       Advice #3: Only use infographics if it's really needed, and you can create a great one.

Infographics are a fun type of illustration that makes your content easier to read and faster to skim through for the impatient viewers out there. However, to put it simply, don’t force it. Using them to illustrate step-by-step content or listicles can be a creative way for users to enjoy your content, but it makes absolutely no sense and is not doable at all to turn a purely factual piece into an infographic. The latter is “forcing it”. In the example below it looks like a pie chart, but it's not, and they all have the same size 'slices'. Perhaps another approach would have been better. Infographics are a great way to process a lot of informations visually, but the trend from several years ago has left many trying to recreate the same effect in the wrong ways.

A viral infographic that isn't an infographic

This infographic went viral not too long ago, but it looks like a pie-chart that isn't a pie chart. The numbers are irrelevant to each other this way, but perhaps grouping it into different sub-categories or aligning it differently would allow the user to get more out of it.

With proper execution and planning paired with a great web designer, illustrations are great visual triggers that relay the necessary message you want to send to your users. Illustrations have been trending for a few years, and it seems that it's more than just a fad (such as heavy gradients). There's a lot to gain from illustrations, especially when it's not possible to stage a custom photoshoot as illustrations are abstract compared to stock imagery.