Functionality is reasonably claimed to be the foundation of good UX. But are we all only about functions? Users are people, with not only logic to solve problems but also emotions ruling their decisions. The trick supporting both is illustrations applied in web and mobile interfaces. Let’s check how they enhance UI design.
Illustration visualizes a piece of a story. It presents a visual interpretation of a process, action, environment, and the like. What makes it different from pure art is the aim of communication: illustrations are informative and transfer a message. They are usually created for a purpose and integrated into the variety of published media both printed and interactive. Illustrations also successfully serve as decoration adding style to the environment or media it is applied to.
In the age of fast and massive information consumption, the role of visuals is growing. According to the explorations by S.Thorpe, D.Fize, and C. Marlot on the speed of processing in the human visual system, it takes people on average 150 ms for a picture to be processed and 100 ms more to understand its meaning. Pictures are easier to remember and recall, their message is clear to people of different languages and regardless of their ability to read. That is why infographics, icons, illustrations, and other assets by graphic designers are used so widely.
Briefly, there are five big benefits of using custom illustrations in UI:
Applied to websites and mobile applications, first of all, illustration is another functional element and only after that a decoration. To uncover all the benefits mentioned above, it’s vital to analyze the target audience and find the ideas and metaphors which will help the users to navigate and achieve their goals. Another thing is that UI illustrations should be concise and used in moderation: the too high intensity of graphics increases the risk of overloading the interface.
Credits: Fireart
In the modern interfaces, we may find all the variety of styles and directions expressed in illustrations, from vector images and icons to elaborate digital artworks. Being a functional layout element, they may satisfy diverse needs and functions.
Onboarding is the concept that came to UX design from the sphere of employment and HR. It deals with some steps and techniques helping newcomers to understand how the interface works. Also, it is applied when new features and updates are introduced or users interact with a non-typical functionality.
Lots of digital products including big players like Dropbox and Slack effectively apply illustrations for this aim. Onboarding supported with meaningful artwork allows for a quick explanation of the features and makes the UI lively.
Credits: Slack
Credits: Anastasiia Andriichuk
Credits: Dmitry Mokhar
One more type of illustration is the one that immediately sets the general theme and mood of the website or app. They present strong visual metaphors and associations to establish an emotional appeal from the first seconds of interaction. It saves user’s time and effort supporting a positive user experience and creating the necessary atmosphere.
Credits: Leo Natsume
Credits: Tubik
Sea theme by Icons8
Tutorials and tooltips illustrations present the visual prompts. This type activates the explanatory potential and its main aim is to clarify or encourage specific actions. Images of this type make UI much friendlier for people who don’t like or can’t read the copy. It works especially well in mobile interfaces concerning limited screen space. On the other hand, it means that even the slightest details of the picture should be thought-out not to provoke misunderstanding. Obviously, tutorial illustrations are a good idea for apps targeted at teens and children.
Credits: Cuberto
Adobe tutorial illustration by Timo Kuilder
Rewards form another popular type of interface illustrations. Badges, stickers, medals, stars, cups and all the other stuff of this kind adds gamification to user experience and marks a user’s progress. What could be sweeter than feeling you are a winner?
Credits: Josh Warren
Alarm stickers by Tubik
Mascots are personified characters that easily add personification to the interface. They become a kind of communicators between the interface and the user. Mascots contribute much to the voice and tone of the website or app and can even become a metaphorical face of a product. The symbolic nature of these images makes them memorable: they breathe in life into the interactions.
Trello Mascot by Alexey Kuvaldin
Sometimes, UI illustrations have the primary goal to entertain users. You may say it has nothing to do with functionality – and that may be right. But it deals directly with emotions and aesthetic satisfaction. Who said that beauty, style, or just fun could not be a reliable factor in retaining users?
Credits: Ramotion
In his book Designing for Emotion, Aarron Walter says “We’ve been designing usable interfaces, which is like a chef cooking edible food. Certainly, we all want to eat edible foods with nutritional value, but we also crave flavor. Why do we settle for usable when we can make interfaces both usable and pleasurable?” Illustrations have a strong power of adding beauty, emotion, and even storytelling to everything they touch. And that makes them worth considering as a powerful way to amplify user interfaces.
Did you come across any UI illustrations which couldn’t be overpassed?
About the author: Marina Yalanska, design researcher, managing editor for Icons8 Blog.
Title image credits: Fireart
Check Ouch, the collection of free vector illustrations for UX
To learn more about visuals in UX design, check articles on illustration, icons, and photos for user interfaces and review the list of popular UI design trends
Essential tips for team managers and members to enhance collaboration, improve communication, and achieve exceptional…
Discover top Figma plugins to streamline your workflow, enhance visuals, and add creative flair to…
Learn how to manage visuals in blog posts to optimize them for SEO in this…
Unraveling Figma’s pricing structure: tips to avoid hefty bills and save money. (more…)
Don't switch tabs to browse icons, illustrations, and photos for your websites. Get them inside…
Transform your Notion space with custom covers! Dive in for easy steps, pro tips, and…
This website uses cookies.