Atlassian Illustration Style
One of the biggest changes to the Atlassian brand when it rebranded in 2017 was an overhauled illustration system. I was personally responsible for developing and executing this new brand language.
Visual Foundations
A core set of principles unite our illustrations stylistically and conceptually. These foundations are just a jumping off point for a designer. This freedom helps the keep our style flexible and forward-thinking.
Color
Our full color palette is bright, fresh, and accessible. Our primary blue is a thread through all illustration.
Shape
While illustrations should feel clean and geometric, they should not conform to being too round or too sharp.
Depth
In large illustrations, we use realistic perspective and at smaller scales we imply use shadow to imply perspective.
Line
Lines are used as an accent to create meaning contextually, to draw attention to a focal point, or to add texture.
Light
We employ gradients with a purpose.
A light source can be a powerful tool for setting the tone of an illustration.
Metaphor
We lean on metaphors as a delightful and practical way to pack more meaning in the same amount of space.
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.
Spot Illustrations
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.
Spot-Hero Illustrations
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.
Hero Illustrations
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.
In-Product Storytelling
One of the most important uses of illustration at Atlassian was to make complex business products feel friendlier and easier to use. My role at Atlassian was often to act as a bridge between our product teams and our creative team. This collaboration led to some exceptional rich and rewarding user experiences.
Conclusion
This style was finalized in 2017 and is still in use by the company today. While I no longer work at Atlassian, and Iām truly proud of the rich system we built, even I believe it may be time for an update. :)
Full Project Credits
Design Lead, Illustrator: Trace Byrd
Creative Director: Leah Pincsak