Reading between the lines: a way of composing UX illustrations

I’ll be the first to say that it’s generous to draw a comparison between fine art and digital illustration. But crafting unique storylines around complex subjects is difficult, and deconstructing the elements of fine art and applying them in my illustrations has been profoundly helpful.

Using art theory in design is not a new thing.There have been many opinions out there of the importance of understanding theory and leveraging it in your own design practice. If you want to dive deeper on the relationship between these disciplines, UK designer Miklos Philips has also looked into the theory of Art vs Design https://www.toptal.com/designers/creative-direction/art-vs-design .

If you’ve ever studied art history you know each analysis of a work of art begins with context clues. These clues serve as a guide to better understand each element of the work and better comprehend the piece’s deeper meaning.

The elements of 18th–19th-century art offer surface-level context at a glance. If you take a deeper look into those familiar elements, you may gain an understanding that goes far beyond your initial impression of the piece. Your interpretation of the artwork cascades into new ways of conveying stories just by the insights you’er learning from the elements in a painting.

A user onboarding experience isn’t likely to rise to the level of Goya’s Third of May 1808, but some illustration requests certainly hold such expectations.

Color

Even when working with a design system, your color palette can make or break how effective an illustration is.

Classical paintings employ some common techniques to guide the viewer’s eye. Take Caravaggio, whose use of color and shadow not only represents the intensity of the subject matter, but also emphasizes each protagonist in their respective stories. In Calling of Saint Mathew we see the characters and we know which parts they play, all without knowing the full story, based on the color palette alone.

In UX design, we work with personas to achieve a similar effect. If you have a sea of users but want to showcase some of those users having a special skill, how do you effectively highlight that? Just learn from the masters, and drape the majority of your illustration in muted colors. When you highlight your skilled user, the piece’s meaning becomes apparent. Maybe add a spotlight, guiding your user’s eye to a point of focus, just like a user finding a new insight in a sea of data.

In general, color’s impact on an illustration goes beyond just aesthetics. Color selection can have a psychological impact and account for how accessible your design is to all users. Classical artists might not have had the same use cases for justifying color selection but they had an understanding of color theory and their materials. It is worth checking out how those practices have changed for digital platforms https://www.interaction-design.org/literature/topics/color-theory

Color choice should always be intentional — UX illustrations can be beautiful but they are nothing if not effective.

Elements

Drawing can be fun, but drawing countless individual elements to meet the requirements of a prompt is less fun. Don’t think of your illustration as a still life — the point is to convey a clear, concise story. The elements used should bring the user closer to understanding their end goal.

In Bernardo Bellotto’s The Demolition of the Ruins of the Kreuzkirche, the tower serves as the piece’s key element. It not only gives you a sense of place, but the tower motif itself offers more depth to the work. It could convey the legacy and lineage of a noble family now in ruins, or signal a shift in class structure. The tower is centered on the canvas, dwarfing surrounding elements. This may signal its importance, and add scale to the disaster.

Tarot cards use a tower to represent danger, crisis, destruction, and liberation. It is associated with sudden, unforeseen changes. Symbolism is never ubiquitous, but Bellotto’s work uses surrounding elements to ensure the meaning is conveyed. The destruction is observed by a variety of people — some rich and some poor — giving you a sense of the many social classes affected by this event, and the even’t significance. All of this can be conveyed through a still image of a ruined building.

Most UX illustrations are largely bound by the same classic constraints. Use images or objects that can offer multiple meanings. Something a simple as an open door can represent accessibility, or opportunities to move forward. Broad symbology can help you avoid complexity and clutter in other parts of your illustration. A manila folder could be conveyed as storage, resources, packed data, etc. The way that folder stands in relation to the rest of your illustration can show users how the symbol fits into their workflow.

Once you select an element, play with its location. Try various composition techniques such as the rule of three or figure-ground, and explore how the location of the element on the page changes how a user will read your illustration.

To get an idea of more ways to amplify work using illustration elements check out https://icons8.com/articles/ui-design-user-interface-illustrations/.

Text

The relationship between text and images is a difficult one. To make it work, you have to consider the bigger picture.

Including text in your illustration is often helpful and sometimes necessary. That being said, your text should not compete with the illustration. If you seek to achieve the same goals with your copy as you do with your illustration, you’re likely better off choosing one or the other. Your text should complement your visuals, allowing each to add clarity to the other.

If you’ve been asked to show new users how to transfer their data, allow the image to do your heavy lifting. Show the user’s flow, including text as necessary where the image isn’t abundantly clear.

This copy might communicate specific details like space limits or file types. These don’t need to be drawn and can be noted appropriately on your canvas. Just like visual elements, text should be positioned in a thoughtful location close to the point of focus.

Every design will have distinct requirements, but it’s still valuable to develop a system and a set of personal or/organization-wide best practices. Consider the artist’s signature — it’s (almost) always located at the bottom right or bottom left corner. When you see a new piece, you instinctively check those locations to learn who the artist is. When working on a series of illustrations that contain copy, create a similar system so your placement of copy is consistent. This way, your users always know where to look.

There are boundless elements to study and boundless artistic styles to learn from. We’ve only scratched the surface of the relationship between fine art and UX illustration, but hopefully these thoughts can help you approach your next project in a fresh way.

Regardless of your background in design, it’s always valuable to take a step back from the Behance and look away from trend searches for a bit. Open yourself to the possibilities of new styles and elements of composition.

We are standing on the shoulders of giants, and the legacy of the millions of artists who made visual storytelling what it is today. Taking inspiration from the masters will not only make your illustrations more compelling and unique, but will likely make them more effective (and you may pick up some art history along the way, it’s a great way to impress your friends).