Inspiring uses of illustration in web design

Written by Eunji Jeong on 7th June 2019

(Last updated 18th June 2019)

No comments
Illustration

As a designer who loves to draw and take an illustrative approach in my own work, I am always looking for inspiration and noticing how other designers are using illustration to communicate different ideas and concepts. I believe it has a powerful impact on users - so I would like to share my thoughts on using them, and some inspiring examples too.

So why do so many tech companies uses illustrations in their website? Other than making a website interesting to look at, there are a few more subtle reasons that companies would choose an illustrative route rather than photography.

Using custom illustrations on the website is a chance to build a brands personality, which can help set it apart from competitors. With the right style, users are more likely to remember one brand over another.

Communicate abstract concepts

Using stock images or professionally done photos is great for situations where you want to convey information or emotion, however it can sometimes be tricky to find the perfect image or situation that captures a message. Illustrations give you the freedom to incorporate metaphors in whatever way you can think of.

Here are some inspiring websites that use illustrations in different ways depending on the purpose.


Slack

Slack is a well known example of using custom illustration.They emphasise human collaboration, as each illustration shows various people performing tasks together.

https://slack.com


Zendesk

Zendesk adds a quality of friendliness to their illustrations by adopting an almost childlike style. This fits in perfectly for their marketing of customer service products. 

https://www.zendesk.co.uk/


Notion

Notion uses line drawings to emphasize movement and expression in its illustrations, without taking away too much attention from the live demos they have embedded on their website.

https://www.notion.so/


Shopify

The illustrations in Shopify’s website use a limited colour palette to help the user focus on the story and messaging of the image. Shopify have written a very interesting article regarding the use of metaphors in their illustrations, which you can read here: 

https://ux.shopify.com/effectively-using-metaphor-in-product-illustration-62bdccbe14e4


Trello

Trello creates unique and colourful illustrations for their blog posts, which seems to draw the attention of the user all over the place. This gives me an impression that there is a lot of interesting content to look at. 

https://blog.trello.com/


Duckduckgo

Duckduckgo’s use of illustration is to reassure the user that their privacy is respected when they use their service. Their illustrations are therefore designed to make you laugh and give the user some comfort, which they achieve with amusing scenarios and a coloured style.

https://duckduckgo.com/


Oscarhealth

Oscarhealth mostly use photography on their website, however there is the occasional use of illustration which helps the user to understand a situation or bits of complex information, such as in the infographic above.

https://www.hioscar.com/doctor-on-call

Conclusion

Illustrations can either show what the product can do, demonstrate the culture and identity of the company, or both. Some use metaphors to add meaning to the image, while others focus on adding personality to a brand. For this reason, even using a subtle touch of illustration can have a powerful effect on how users interpret a product or service.

Thanks for reading, and I hope you found it helpful!

This article was posted in Design, Musings by Eunji Jeong

  • Eunji Jeong

    Eunji Jeong

    Eunji is our Junior designer who has been fascinated by design, from a young age. When she is not working you will find her in the kitchen cooking a variety of dishes from different cultures.

Comments

No comments have yet been posted, be the first to comment by using the form below:

Post a comment

*
*
You are currently offline. Some pages or content may fail to load.