Context
Illustrations are emerging as a vital part of the user experience, as they help express the brand directly into a product. At Adobe, we’ve had a lot of important discussions around the need for a unified brand illustration style. As our products evolve, we want to make sure we’re building better brand recognition with our users, and build deeper connections between user and product.
As you may have gathered from past articles by my teammates (such as Sonja Hernandez’s brand system article and Anny Chen’s filetype icon case study), there are a lot of considerations to take into account for a product landscape as big as ours. Adobe’s offering includes over 100 products, services, and communities, from creative tools to communication and marketing tools. How do we provide a creative and playful illustration style which can scale to a company and product lineup like Adobe’s?
A brief history of illustrations in Adobe products
Before we started exploring color illustration in our products, our Icon team had already established a more linear illustration style in 2016, which is still widely used in our products. These linear illustrations are typically used for informative contexts, in areas like empty states and user onboarding flows.
Initially, we wanted to integrate this linear style created by icon designer, Marco Mueller, with our new brand illustration system to make the transition between these two areas as seamless as possible. I tried adding figures interacting with the linear elements to create stories. The style of these original figures was actually inspired by the illustration used on the Acrobat 5.0 packaging way back in 2001.
We had several internal discussions about this style after its first release — Khoi Vinh, principle designer at Adobe, raised some concerns regarding the visual identity. Regardless of its interesting historical origin, this approach used a combination of vector shapes and human figure, which has been widely used in the tech industry. So our team decided to revisit this project and explore other directions.
“But it is worth taking a step back to examine the way our products use illustration and trying to understand why we’ve all settled on this particular approach.” — Two Very Different Kinds of Illustration, Khoi Vinh
I was honored to collaborate with a remarkable illustrator and artist at Adobe, Kyle Webster, for this project. This time around, we set out with a few goals for the illustration style: We wanted to demonstrate Adobe’s commitment to world-class illustration through creativity and playfulness. The illustrative language needed to allow for variety within the style, so that it may be expanded over time across the system of products and messaging, and allow for additional illustrators to contribute. We also wanted it to feel unique to Adobe, and not “owned” by another company.
First, Kyle tried to see if we could add more visual elements to help enhance the existing illustration style. As you can see, he added more personality to the figures by including skin color, details in clothing style, and shadows to bring more depth to the characters.
“While it was fun to see how far I could push the style away from the original source material, while retaining a more traditional human form in the drawings, it became apparent that this direction would not be as flexible as we wanted, nor would it give us room to really play and experiment. I’m glad we changed direction and Emma did a wonderful, thorough exploration that set us on the right path to develop a unique and adaptable visual vocabulary.” — Kyle Webster
As Kyle stated, this initial exploration was still pretty close to the original style, and after a few more brainstorming sessions, we decided to move even further away from the standard human figure to explore a more abstract visual vocabulary.
It’s time to ditch the trend…
We exist in a software landscape where illustrations are becoming more uniformed and — for the lack of a better word — generic. Often, illustrators are removing personal, creative characteristics of people in their illustrations in order to capture a wide diversity of people. They focus a lot on figures, and don’t experiment a lot on how to express their ideas more abstractly.
In Meg Robichaud’s inspiring article, You Can’t Just Draw Purple People and Call it Diversity, she discusses the inclusive issues of in-product illustrations. I wanted to shift the focus away from trying to represent human diversity in every single illustration, and in doing so open up different possibilities for expressing the same user concepts through abstract shapes instead.
Establishing principles and exploration
Illustration is an intuitive and subjective art form, which can make it challenging to translate into a systematic language that works across multiple platforms and products.
In order to experiment and define a new style, I restrained my explorations with four tenants:
- Human forms and perspective
- Texture
- Shapes
- Color
I’ll spend some time here talking about each, and guiding you through some examples.
Human forms and perspective
Including human forms can build an immediate connection with users, but to what level can we abstract those forms and still connect? Do we always need to have fully concrete figures involved? Do we need to include perspective details, such as shadow and dimension?
Inspired by the style of Ancient Egyptian art, where the heads are painted in profile with little to no shading, I tried a series of side profiles and arm/hand combinations that could be assembled in different ways to tell stories.
Texture
Texture is another great way to bring these shapes to life and give them a human touch that adds personality and a distinct style. Kyle curated a series of brushes that could generate a subtle but intriguing texture in the illustrations. We played with a range of texture styles and compositions outlined in the above study. Ultimately, we preferred the openness and airy look of Option A in terms of composition, but also liked the brush stroke effects in Option E and how it was integrated with the forms. From there, we decided to combine the two styles and keep exploring.
Shapes
Shapes play a huge role in our design principles, and they also help connect this new style with the more informative illustrations that were developed earlier. Coming from a background in graphic design, I wanted to experiment with mixing geometric elements into our style to create a minimal and contemporary look. I’ve always been inspired by Suprematism and Constructivism), two significant art movements and philosophies in graphic design. Both art movements focus heavily on using basic geometric forms and the importance of composition to create an impactful visual design.
Colors
Colors can strengthen the connection between illustrations and a product, so we generated color palettes that were based off of the product’s brand color theme and then included additional colors that would complement the main colors. We wanted to allow for more flexibility in color combinations, and so the additional colors are open to the designer to pick and choose what makes the most sense for each illustration. The only other guideline we provide around color is how they are layered, so the darkest color is only ever used for line work and figures. The medium and light colors are for solid shapes and background.
Defining the visual language
Storytelling and Abstraction Level
To find the right visual language for telling a story, I tried to assemble the elements I talked above. Below are some examples from the early exploration.
The idea was simple: use the least amount of elements to express the most out of a story.
I tried to reduce the number of figures in the illustration. The idea was simple: use the least amount of elements to express the most out of a story. The two illustrations at the bottom can clearly convey this concept while distilling the form down to its essence.
Textures and lines
At this stage, I was trying find the sweet spot of line, texture, and shape combination in each illustration that would be visually interesting enough and still feel balanced to the eye:
The goal was to have a clear definition between foreground and background, layers and dimension, and to create unexpected and interestingly arranged interactions between lines and shapes that would reinforce the messages.
Showcase
Here are some illustrations that I created based on this new system. You may notice them in the most recent release of Document Cloud (Acrobat) and this week’s Creative Cloud release. Keep an eye out for these and more in upcoming releases of your favorite Adobe apps!
Note: Thanks to Emma for the contribution. Originally published on Medium