The scenario: The team is growing, with multiple personas creating your brand's visual content. Your Brand Book is a great source of visual reference, but you're starting to notice that it might not be enough to keep your brand's illustration consistent. Yep, we've all been there.
Why do you need an Illustration Style guide?
Illustration is a powerful creative tool that plays an important role in a brand's identity. When used successfully, the brand can bring its vision and values to life through creative, memorable visuals.
Since Pixelmatters' rebranding, our illustration style has evolved organically without a single source of truth. However, with our team growing, it became more challenging to scale the style consistently. It's not easy to have multiple pairs of hands trying to draw as one. Setting some rules may seem to limit but, in fact, is liberating. It removes the need to think about them constantly; it becomes natural. An illustration Style guide not only helps with consistency but also makes the team more agile and productive.
Before you jump in...
It's important to explore as many references as you can. Your Brand Book is a great starting point, but it's ok if you don't have one. Start by collecting examples of languages that are familiar to your brand. Soon you'll start to understand which styles are a good fit and which don't work. These references are great to have everyone on the same page and should be revisited now and then.
Set the illustration Identity and the mindset:
Try to picture your brand's persona: if Pixel was an illustrator, he would look at the world positively and creatively. Every visual would highlight the technical and human element of the message and bring it to life in a fun, memorable way.
- Bold - Risk-taker and thinks outside the box.
- Technical - Not afraid to get specific and detailed.
- Expert - Precise and trustworthy.
- Collaborative - Friendly and Human.
- Positive - Active and bright.
Then, you start defining how the identity presents itself by working on the mindset: here at Pixelmatters, we love top-notch digital products. While looking at the final result, we can't help but fall in love with the process too: the sketches, the iterations that never got released, it's all part of the product. And we're proud of it. Playing with a "work in progress" style we aim to convey a collaborative and explorative vibe into the visuals. The goal is to place the mindset at the center stage in the illustrations you create.
Create the Guidelines
After you define the style, you should start breaking it down into rules. Keep it simple and straightforward by defining the basic styles: what are the different strokes sizes?; how are the shadows cast?; and so on. Each style you define is a step closer to have a more stable and scalable Style guide.
Remember that this document will be used by different designers, so we're trying to remove confusion from the way. Here are 2 tips that you can follow:
- Be specific. "Regular Stroke: 2px / Center / Square Cap" is much clear than "The strokes should be thin". It's always better to have extra information than to let ambiguity take control.
- Be visual. Add visual Dos and Don'ts to help you represent concepts. After all, you're designing for designers, make it pleasurable too.
Make it accessible
Your Illustration Styleguide is a living document and should be accessible to everyone on your team. We use Notion as our documentation tool. But we decided to take it a step further by creating a Figma Team Library. By making a Library, we guarantee that everyone has access to every style and component at any given time and that they remain updated in every visual.
Summing it up
Your team is growing, but that doesn't mean that your brand should lose its identity. Creating an Illustration Style guide is an investment and should be seen as one. By placing this documentation at the center of our visual creation, we hope to open new creative opportunities and give back more time to our creative team. Maybe these are reasons enough to make you consider creating one for your brand too.
Follow Pixelmatters on Twitter, Facebook, LinkedIn, and Instagram.
.png)
