Using illustrations in website and app UI design

This versatile and adaptive form of digital art has established itself in web and app interface design virtually as firmly as photography. Global industry giants such as Google, Mailchimp, Spotify and Wetransfer have embraced illustration in their corporate branding long ago. Which brings us to the topic of today’s short read about the use of illustrations in web design and application UI. What is the reason behind this “trend“ and where lie its key benefits?

Before we plunge into dissecting the various appeals and practical applications of digital illustrations, let us first clarify the term in the context of UI.

What is an “illustration“?

Illustration is a rather broad term and can mean a number of things. When talking of using illustrations in web design it is important to distinguish functional illustrations from purely decorative artwork. For our purposes here, digital illustrations are representations or interpretations of concepts, processes and ideas. They aim at illustrating and visualizing the principles and intentions of the content they are meant to support. That content usually consists of text in form of articles or descriptions. Illustrations are visual assets that help viewers understand the conveyed message better.

If you’d like to delve deeper into what illustrations are and explore the types and styles that are available, check out this piece

Impact of illustrations on users and readers

Several psychological studies have confirmed that people register and process visual imagery much faster than textual content; several thousand times faster, in fact. It is not to say that images are more important than good copy — informative and meaningful content is crucial. Illustrations aren’t here to distract from but rather to support and draw attention to the product or text offered. A well chosen illustration not only complements the content, it invokes positive emotions in the viewer and makes for an overall superior user experience and better brand recognition.

Ways to incorporate illustrations into UI design

There is hardly an area of a user interface that couldn’t be “spruced up“ with relevant imagery. It is critical, however, to keep in mind the highly pragmatic function of illustrations in web UI, therefore they should be used moderately and with purpose. Here are some valuable uses for illustrations in web and app interfaces.

Supporting visuals for articles and copy in websites and apps

As previously mentioned, meaningful and well written copy is essential. In order to get a user to engage with the content, however, it is crucial to awaken their attention and pique their interest first. Well designed and carefully selected illustrations can help accomplish that initial step. Once the reader decides that the content is worth their time, relevant images may be used in aiding comprehension and retention of the information. Illustrations can also serve as visual markers for categories of your content or rubrics of your copy.

Explaining and storytelling with illustrations

Humans are primarily visually oriented. It comes as no surprise then that visual storytelling, which is the art of using imagery to convey a message or tell a story effectively, is much older than written language. Well made illustrations are powerful helpers when it comes to visualizing abstract concepts or describing complex ideas. Going through intricate instructions is supremely more comprehensible and enjoyable when accompanied by supporting illustrations. Taking advantage of our human visual perception is what makes good infographics so popular and effective.

Custom illustrations to the rescue

The highly flexible nature of illustrations make them the go-to graphical elements for visually representing specific content. With all its rich variety, stock images, sometimes, just won’t do. Besides realistically depicting all sorts of scenes, items, situations and processes, custom made illustrations can just as well help visualizing abstract ideas by invoking certain emotions in the viewer. Additionally, bespoke illustrations may be created in any style, using whatever color palette you chose to match your brand and support your content. The potential is truly boundless.

Custom illustrations created for Customer IO website

 

Custom illustrations made for Ton.org (Eternal illustrations style)

 

Using animated illustrations in web and apps

We have discussed the powerful effect illustrations have on users of websites and apps. Animated illustrations take that effect even further. Not only do animations add value to your websites by providing visual context and illustrating ideas, their dynamic nature brings content to life. We are not talking about merely decorative and attractions-grabbing visuals here. When well-made and used efficiently, animated illustrations can greatly improve user engagement and make for an overall better user experience. And isn’t that what good web design is all about? A site’s conversion rate is tightly linked to the quality of its user experience.

Examples of looping animated illustrations for websites 

 

Promotions and special occasions

Most business websites offer occasional promotions, seasonal sales or limited-time special offers.  Some websites promote certain causes or wish to encourage specific actions. The powerful emotional value of illustrations make them excellent visual assistants in such matters. Extremely flexible and adaptable, illustrations can be made to fit any brand, idea or message.

Google’s use of often amusing, sometimes moving, occasionally comical and generally informative illustrations has inspired a worldwide trend.

Landing pages and 404 error pages

Landing pages are often kept simple with limited content. Illustrations can add massive value to such pages by improving the overall impression, supporting its content and intensifying the call to action.

As a rule of thumb — minimalistic pages with little content can usually benefit from visual assistance.

Every web user has come across those pesky “site not found“ error pages on occasion. Seeing that message is never a positive experience and it takes a user usually less than a second to close the tab and move on. Using a lovely illustration to cushion the blow usually results in a pleasant impression of the website and may encourage the user to stay and explore the available content. If the illustration is on brand and of high emotional value (i. e. cute or amusing) it helps increase recognition and strengthen the brand.

Wrapping up

It is a wonderful thing that modern websites are still made by people for people. Hand drawn and meaningful illustrations reinforce that invaluable human touch by instilling emotional value into website content. A powerful visual concept is what drives the user experience. And highly versatile and flexible digital illustrations take the wheel on that drive.

Illustrations and animations do not simply beautify a user interface. They are highly functional elements that serve a variety of useful purposes. From adding supporting visuals to blog articles or telling stories and explaining complex matters in infographics, to building strong visual identities for brands and products — the significance of illustrations in web design is on the rise.

Browse the various illustration styles and techniques on GetIllustrations for inspiration.

Written by Natalie Schaubert / Illustrator, photographer and writer

Powered by Froala Editor