It was author and illustrator Dr. Seuss who said, “words and pictures are yin and yang. Married, they produce a progeny more interesting than either parent.” Reading picture books such as Dr. Seuss’, or leafing through magazine articles with thought-provoking editorial pieces, can shed a light on the strong affinity between the textual and the visual.
Newer fields of illustration are, of course, no exception. As a UX illustrator at Wix, I see written copy as indispensable to my work. In fact, everything I do is in response to content. Not unlike children’s books or editorial illustration, I look to evoke new meanings and spark crystal clear insights by the coming together of words and illustrations.
In UX design, illustrations help walk users through a website or app, adding to their overall experience and clarifying the product's message. But what makes UX illustration unique is that my audience – a person in the midst of creating their online art store, or releasing their design portfolio to the world, for example – is not looking to indulge in a nuanced reading experience. They are, however, looking for a friendly and reliable guide to lead them through the task at hand – and that’s precisely what UX illustration is meant to do.
Content-first illustration
Good UX illustration is, first and foremost, a form of communication, meant to walk users through the actions they wish to perform online. Accompanied by the right copy, an illustration can ease out pain points, explain the importance of this step or the other, and cultivate a feeling of achievement, like getting a little gold star for a job well done.
Each UX illustration conveys a unique message. But no matter the message, it must always be articulated clearly and efficiently, so that it’s immediately understood by all users. Coherence is evermore crucial when you consider that your users will be of all backgrounds and ages, and will be browsing from different devices and at varying stages of their tasks.
Communicating ideas visually
UX illustration can convey a message in one of the following methods:
01. Elaborate on the textual information: Illustrations can be a quick and powerful tool with which to deliver information, supplementing the info provided in the text by going into more detail or giving specific examples.
The text in one ‘empty state’ on the Wix Media Manager reads, “keep all your favorite media together.” In response, I illustrated a few files huddled together in a filing tray, which is a literal representation of “keeping media together” – but I also provided additional value. I strategically chose to represent three different file types (text, image and video), so that users can be instantly clear on what “all your favorite media” might mean.
02. Simplify complex ideas: Some complex concepts call for lengthy explanations, but you can’t always afford to risk your visitors’ dwindling attention spans online. Since visual information is processed much faster than written text, illustrations can sum up intricate concepts into quick and precise snippets of storytelling, using metaphors, associations and visual anchors.
In one spot illustration that introduces the process of search engine optimization (aka SEO), the brief I received required me to explain two seemingly contradicting ideas. I needed to convey the feeling of accelerating your site’s performance, while also acknowledging the fact that making your website rank on Google search results is a process, rather than something that can be instantly achieved.
To go about this, I explored the metaphor of a space rocket, swiftly soaring into outer space. I decided to depict the moment of its launch, rather than the journey’s end point, to add a sense of speed and motion, but also to stress the long way that still lies ahead. Lastly, I was able to incorporate the Google logo in a way that’s both subtle and centrally positioned.
03. Provide an added layer of meaning to the text: UX illustration is a great tool for communicating information or complex ideas, but it can also evoke emotion. This is especially important in cases of presenting a negative outcome to the user (like a 404 page, for example), where empathy or a sense of humor can brighten up an otherwise gloomy situation.
That’s what me and the team did on this ‘empty state’ screen. The messaging that the content writers went for in this case is formal – “no search results to display” – but we added a friendly touch by pairing the mundane search magnifying glass with otherworldly planets. This way, the page seems to be telling the user that we were unfortunately unable to answer the relevant query, but hey – we did make an extraterrestrial effort for it (wink, wink).
Forming a visual language
Illustration and animation are big UX design trends, and for good reason. They bring a more human and personal touch into digital environments, and create an engaging and appealing user experience.
But in the case of UX illustration, the added value of a more visually appealing interface comes only second to the main objective of communicating a message. With content as a central priority, UX illustration utilizes tools such as composition, color and shape to amplify a contextual message, rather than simply serve as decoration.
This means, above all, that I need to think like a team player: UX illustration isn’t meant to stand out from the interface. On the contrary, it’s meant to feel like an integral part of it. Without drawing too much focus from the user’s task, it should function as one of the many helpful tools throughout the interface that together, contribute to achieving users’ goals.
Here are some of the guidelines that led me and the team in forming the visual language for Wix’s UX illustrations:
– Simplicity in design: UX illustration should go into as little detail as possible. By providing only the bare minimum for getting a message across, the image becomes immediately recognizable, and an even quicker way of telling a story. Additionally, illustrations that are simple in their shape and color palette are usually easier to relate to for broader audiences, as they leave much room for interpretation.
– Limited color palette: Personally, I love color. But in order to support the website, its story and interface, UX illustration should stay to-the-point by using a limited color palette. My rule of thumb is: no more than five colors in an illustration, or five tints in the case of monochrome. I recommend ensuring good color contrast within your palette, in order to make the most out of a limited range.
– A coherent visual language: All UX illustrations within the same website or app should feel consistent and aligned. In Wix’s case, the visual language is defined by rounded-corner shapes and a blue monochrome palette. The illustrations should also work well with the other visual assets on the page, such as icons, to ensure they all feel like they belong to the same family.
Looking to dive deeper into the world of UX? Start by reviewing the difference between UI and UX design.