Open@2x.png

Atlassian Illustration System

 

Atlassian
Illustration System

 

Atlassian is a technology company that makes tools for team collaboration. As part of a major brand overhaul, we created a more robust illustration language to elevate Atlassian's storytelling.

 
Open@2x.png

Why illustration?

 

There are many ways to visualize teamwork. For us and many other companies, illustration has become the tool of choice. It has the flexibility to tell whimsical, aspirational stories and communicate complex technical concepts that might otherwise overwhelm an audience. Using the same visual language, illustration can convey a variety of tones and emotions. Lastly, illustration can effectively embody our brand’s personality. It’s a great way for us to further distinguish our voice. In time, it is something that will create a deeper emotional connection between us and our audience.

 

Visual Foundations

 

A core set of principles unite our illustrations stylistically and conceptually. We stress that these foundations are just a jumping off point for a designer. This freedom helps the keep our style flexible and forward-thinking.

 
Color   Our color palette is 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 provides us both distinction and flexibility. 

Color

Our color palette is 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 provides us both distinction and flexibility. 

Shape   While illustrations should feel clean and geometric, they should not conform to being too round or too sharp. Contrasting square corners against round, straight edges against curved, the illustrations begin to feel at once practical  and  unique. 

Shape

While illustrations should feel clean and geometric, they should not conform to being too round or too sharp. Contrasting square corners against round, straight edges against curved, the illustrations begin to feel at once practical and unique. 

Depth   Perspective and depth help create movement and narrative. At the highest level, perspective makes our illustrations feel more epic, adventurous, and optimistic. At the lowest level, depth is implied with flat shapes and shadows.

Depth

Perspective and depth help create movement and narrative. At the highest level, perspective makes our illustrations feel more epic, adventurous, and optimistic. At the lowest level, depth is implied with flat shapes and shadows.

Light   We employ gradients with a purpose. A light source can be a powerful tool for setting the tone of an illustration. When used consistently across the system, it makes the language feel more cohesive. 

Light

We employ gradients with a purpose. A light source can be a powerful tool for setting the tone of an illustration. When used consistently across the system, it makes the language feel more cohesive. 

Line   Lines can play a contextual role and act as an accent but the illustration style does not rely on outline. Lines can be used to create a focal point or to add texture.

Line

Lines can play a contextual role and act as an accent but the illustration style does not rely on outline. Lines can be used to create a focal point or to add texture.

Metaphor   Illustrations should aim for a relatable metaphor over being literal. Ours is no different. Metaphors are delightful and practical, packing more meaning in the same amount of space.

Metaphor

Illustrations should aim for a relatable metaphor over being literal. Ours is no different. Metaphors are delightful and practical, packing more meaning in the same amount of space.

 
 
 

The Illustration Spectrum

Something that makes the Atlassian illustration style a powerful tool is its flexibility. We achieved this by creating different categories of illustration that are appropriate for different uses. For the most part, we divide our library into heroes, spot heroes, and spots.

 

 
 

Hero Illustration

Hero illustrations are intended to tell more complex stories. This allows them to be more metaphorical and fantastical in nature. The viewer should feel a sense of teamwork, adventure, achievement, and optimism. These illustrations always a central, larger-than-life object should be surrounded by a miniature team working to build, fix, and assemble. Hero illustrations typically contain more than 3 people and their complexity should vary depending on the intended size.

 
Artboard 21@2x.png
 
Confluence Mobile Login@3x.png

Spot Hero Illustration

Spot heroes take the same team-based narrative of a hero and make it digestible at smaller sizes. While still fantastical, spot heroes focus in on a single vignette and are more practical for everyday use. We use them on our marketing website, billboards, publications and even in product.

 

 
 
 

Spot Illustration

Spot illustrations are the simplest and most literal expression of a 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 even create a narrative. While our larger hero style illustration should never made to small, spots are too simple to be blown up beyond a certain size.

 
 
Spots@2x.png
 
 

Going Forward

 

While what you see here is quite homogenous, this is a system built to shift and adapt over time. The best brands are built to bend and not break and as trends change and we add new illustrators into the mix, we are ready to bend.

 
Open Ace@2x.png