Systemizing Illustrations — Atlassian

Year
2016 - 2019

Problem and Opportunity
My role at this point was as an illustrator / visual designer on the design system team, and I occasionally worked with the brand team with guideline work. This is one of the many guidelines I worked on dedicated to the different types of product illustrations, breaking down color, and how we can systemize illustrations back into the design system.

Why Illustration?

There are many ways to visualize teamwork. For us and many other companies, illustration has become the tool of choice for telling stories about teams. Illustration is a tool for user experience,  and there are a few reasons it is an especially powerful one

Clarity: Our brains want to interpret images. We can quickly draw connection between a visual and text, granting us greater understanding and greater recall. Illustration can break down some of the more complex and technical stories we need to tell to give our users a more fluid and pleasant experience with both our message and our products.

Flexibility: Illustration has the ability to tell whimsical, aspirational stories and communicate complex technical concepts that might otherwise overwhelm an audience. Using the same visual language, we convey a wide range of emotions and tones.

Personality: Illustration is a great way for us to further distinguish our voice from those of others. It is something that will help people relate who we are with what we do. Over time, it will help our users form a stronger emotional connection to our brand. 

Spot Illustration

Spot illustrations are the simplest and most literal expression of a singular concept. Because they are often used in product as an empty state, or in a composition with other spot illustrations, they are small and simple. That being said, they should still feel dynamic and narrative.

Enhanced Spot illustration

Sometimes, you need something compact that is just a bit more expressive than a spot. Perhaps you are trying to convey a concept that is just a bit specific for the very singular concepts depicted in spots. It is for these situations that we created Enhanced Spot illustrations. These illustrations require just a bit more space than spots to be appreciated. Enhanced spots do not use their added detail for decoration, but rather to convey a more meaningful narrative. Enhanced spots are usually created for a very limited but impactful use case. 

Spot Hero Illustration

Spot heroes are made for telling complex and impactful stories in both marketing and product. They feature a small team of people working together on larger-than-life problems. This usually means the subject matter of the illustration is an object that appears giant so that we can visually show the collaboration that is happening that might be less tangible in real life. They require more space than spots, but have the ability to connect more emotionally with the user because a powerful ability to convey metaphors.

Conceptual Principles

At the heart of our illustration style are three principles. They help us orient around a similar mindset for both the creation and use of illustration. They are also key to making sure illustration is being considered properly as a powerful tool for user experience. One that is should always be thoughtful, beautiful, and practical. Before you even pen to paper, you should understand and internalize these principles.

Metaphor > Literal

One of the greatest strengths of illustration is its ability to convey metaphors. Illustration takes something complex and relates it to something simple to help users comprehend content more quickly. A metaphor is what we have started to call more "visually efficient". In the same amount of space and time, a metaphorical illustration can support a much deeper meaning. It can be tempting to create illustrations that depict the exact subject matter of your content, but this is a missed opportunity to help a user understand it more fully and to explain how they should feel about it emotionally. 

Depth > Decoration

Illustration should be used to make its environment richer and more meaningful than it would be without it. We should be cautious not to create illustration only because we have an empty space to fill. Illustration is a tool for user experience, and it should be used to steer our users away from dead ends like boredom, frustration, and confusion in both marketing and product. That being said, illustration cannot do it all. Think of your illustration as a supporting element to a design. It isn't their to fix a user flow that isn't working, it exists to optimize it, taking it from good to great. The same goes for the text that illustration accompanies.

Meaning > Detail

Sometimes when creating or using illustrations, we want to say everything so we end up saying nothing. Again, illustration is meant to support content, not completely explain  your concept. If we rely on illustration to explain every detail of a concept, it can become muddled and lose meaning. A viewer will spend valuable time trying to parse each and every aspect of an illustration instead of quickly understand the overall point. Be prepared to strip back extra detail in favor of simplicity. Give the user a little room to interpret your illustration and it will give them a more comfortable viewing experience. 

Color

My core focus when working on the illustrations was color. I spent some time thinking about what it meant to showcase color and add depth to it. For a long time we didn’t document color or how to use it. I had experience for documenting color in product, but this was a different beast.

I wanted to show the Atlassian color palette: bright, fresh, and accessible. Our primary blue is vibrant and powerful and acts as a thread through all illustration. Our secondary palette is a unique spectrum that is both distinct and flexible.

For the purpose of illustration, the way in which you use our palette is really important. We call the specific use of different colors in an illustration the "color ratio". Each type of illustration within the illustration spectrum has different rules around the number of colors that it should contain, but each uses a similar method for deciding how much of each color is appropriate. We find that the Golden Ratio (yay!) can be an effective way to make color choices.

Even without the Golden Ration, it can be summarized like this: an illustration is most impactful when it uses one main color and two or more accent colors at smaller quantities. To clarify, a color refers to all the shades of that colors. For instance, an illustration can have multiple shades of blue and this still counts as one color. This isn't really scientific, as certain colors can have more visual weight even though they might make up less of the actual pixels of an illustration. It's something that must observed and judged by the illustrator, and should be thought of as a helpful guide, not a strict rule. 

While the Golden Ratio is a helpful starting point, there are always exceptions. Sometimes, for stylistic reasons, it is important to break the rules of this color ratio. For instance, you might want to use all colors in an illustration in a more equal way if the purpose of the illustration is to highlight diversity or complexity. There are countless other examples of similar situations, and at the end of the day it is a judgement call for the illustrator to make. 

The other illustrators worked on shape, light or line work. We collaborated together to ensure we were having the same shared understanding. It was incredibly important to document our process at this point so we could educate others and share back.