Make your brand modulair with a design system. (Part 1 - Creating a System)

Being an in-house graphic designer for a (software) company can be a challenge sometimes, but the benefit of building a more in-depth brand knowledge is satisfying. It enables you to be a great added value to your company. 3 years ago we created a brand new Avisi design strategy, with continuity as one of the key values of our design language. 

We would like to share this knowledge so you can also start thinking about an evolutionary approach by creating a brand system. 

Brand system, why and where to begin?

Why?

There are several reasons to choose to work with an evolution rather than a revolution. Working in iterations with evolution in mind helps us to maintain a visual identity across multiple products and services, as you can see below.

By creating a design system you can easily re-use components, shapes and colors leading to modulair and effective designs. A brand system will help designers to make more consistent assets/artifacts, while still being creative and flexible without losing identity. Building a design system can be challenging but at the end your results are much more consistent, you’ll have much more fun doing it and others can easily pick up your process. 

Where to begin?

Gathering inspiration is a very useful starting point. Next to us there are several other brands using design system. We can learn and get inspirations from:

Google Design

Atlassian Design

JetBrains

Find a style that is flexible yet recognizable

Rules are meant to be broken. Be creative and stick to the essential parts of your branding. It helps by cutting down guidelines of your brandbook and create more flexibility and room for your visual identity. Make your guidelines easy and fun to work with. Be open for discussion with your designers or marketing team and play with the rules, the world is constantly changing, so is your system.

Some rules/guidelines Avisi uses: 

Rule 1 - Colors as components: stick with a simple color scheme and make them part of your modulair components.

Rule 2 - Shapes as components: use shapes to differentiate your expressions and flexibility. Build a system that other designers can pick up easily. Design as a team by reviewing your designs with other people. Play, Test, Fail, Fix and Repeat.

  
Example: Avisi’s Iconography build up process

Rule 3 - Create flow: make evolution one of your main design-mindset and your passion, maintain a short feedback loop so you can constantly improve your assets/artifacts and build a visual library. Have fun and play with creativity. Make small changes every time to maintain a more natural flow in your designs.

Rule 4 - It’s never done!: be open for discussion with your designers or marketing team and play with the guidelines, the world is constantly changing, so is your system.

What’s next?

We will continue using our design system using Atomic Design. With the fast pacing digital world, we can adapt more easily using the Atomic Design concept of Brad Frost. Atomic Design lets you create consistent user interfaces. This process makes it easier to style HTML elements into atoms and combine them into molecules, templates and eventually high fidelity page/application designs.

• Read part II - Using Atomic Design