A style guide is a powerful management tool

Why a style guide?

A style guide will give you a common language for designers, developers, product managers, marketing and external agencies. It is also a must-have to work on consistency on your digital product around all your media channels.

Yes, it might be tricky to do it the right way and to find the right balance between designers and developers’ needs. And it can become a nightmare to maintain.

I won’t give new tips to create the best style guide for your team (sorry!), but I wanted to share my Head of Design experience as I found having a style guide is an amazing and powerful management tool!
(and will make your life easier!)

1- Build a project together as a team

What do you want to achieve as a team? Sometimes it’s difficult to motivate people to collaborate on a long term strategy because it doesn’t resonate with what they are doing on a daily basis.

Creating a style guide is a good exercise to start creating your team project. Your team members will collaborate on something they will use every day. They will start to look at the product style as a consistent piece of design across projects and teams. And they will have to make decisions together and be proud of the outcome because they will have to use it afterward.

2- The team is the creative director

With a clear style guide, it’s not only the creative director’s opinion that counts anymore, or any individual’s opinions either.

Is it consistent with the style guide? Is it consistent with others projects?

If you organise design reviews with your design team, your designers will feel the need to get involved in that process to make sure that every project is consistent with what you have previously defined. Now the team has a tool to work autonomously and be self-organised around style.

3- Work faster and more efficiently

Getting the style right for a project and producing all the final files can be really time consuming. But most of the time, this is not where your team’s value is.

As soon as your style guide is defined, you can create shared assets for the team. Create icons library, colour palettes, font styles, etc. Be sure that everyone has access to this content. Then you can create default UI elements in your team’s favourite design software to access those assets really quickly.

It’s now really easy to drag an icon, apply the right colour or pick a font size. Your team’s work process will go faster and faster. You can now build a high fid mock-up in minutes! And no one will ever spend time creating again an icon that is already available.

4- Focus on the experience, not the style

Now you have everything in place, there will be less talks around the visual aspects. Your team can now spend more time doing user research, interactive prototypes, challenge ideas and explore more options on a project. And this is where the value of your UX team is.

5- A frame for the most creative visual designers

When you have designers with amazing visual design skills, they are sometimes very difficult to ‘contain’. They want to improve the product and to express their talent on every project.

Those designers are usually killing the consistency of your product…

With a clear style guide, they have a defined playground. They can’t ‘re-invent’ what has already been defined and agreed.

But…

Be careful not to crush their creativity with a too rigid style guide. Really creative designers are brilliant assets in a team. A style guide is here to give some guidance but it doesn’t have to define everything. You need the right balance between having everything defined and having enough space for creativity.

Also, be sure that you have moments to re-evaluate the relevance of the style guide and involve your best visual designers in that process.

6- A frame for the designers with less visual design skills

You might also have designers in your team that are better at working on the architecture of the user experience. And when it comes to the visual design part, they are less efficient or will pay less attention to details. But in small teams, everyone has to do pretty much everything. And you can’t always have someone dedicated to the visual design part of the project.

Having a style guide will help them to deliver better designs. And as a creative director, it will be easier to refer to the style guide rather that talking about aesthetics or something YOU think might look better…

7- Work beyond platforms

Defining your style as a whole is also a good chance to work on consistency between platforms and channels.

Can this component be the same on the app? If yes, just re-use the same element. If not, create a new instance of your component. It’s a good place to start talking about what can be consistent and what has to be specific to a platform.

If your team is organised by device or channel, a style guide will help them to collaborate and start talking between projects. And having a consistent style across all channels is one piece of the puzzle to create a consistent and smooth user experience.

8- Your team will look more professional and developers will love you

Working on a style guide and organising its content is also putting yourself in the developers’ shoes. You will have to understand what makes a piece of UI a reusable component. You will think of your website as an ensemble of modules. It will make your style and its front-end code more usable and maintainable. And your design team will (almost) speak the same language than the dev team.

At the same time, from the outside (and from a senior executive point of view), your team will demonstrate its capability to get organised, efficient and professional.
(And fight some of the common clichés around designers)

Some tips to finish

  • Start small
  • You don’t need a perfect interactive style guide to start. You can begin with a simple artboard in Sketch.
  • Re-evaluate and update often
    1- is there anything you can re-use in the style guide?
    2- if not, create a new component or improve what is in there
    3- update the style guide
  • Don’t be a dictator
    A style guide is a good starting point and a good tool. But it’s important to also give some freedom to your team. It’s your job to find the right balance!
  • Don’t stop with your digital products, and what you can see on the screen. You can expend your style guide to pretty much element of the user experience: brand personality, tone of voice, visual identity, photography, etc. As long as it helps the team to collaborate and ensure consistency. But if it seems to big, go back the the first tip…
    When I was working on a range of electronic products, we also used the same approach. The design team was in charge of the design of our range of electronic products, from the product itself, to its UI, to the app and web platform it was connected to. Defining a global design language across all the platforms and devices really helped the team to work together.

And you? Do you work with a style guide? Does it help your team to work better together? Please share your stories in the comments below.

Further readings and style guides examples

Atomic design -Brad Frost
Styleguide.io -A list of of ressources and articles around style guides
Material design -Google
Lonely Planet’s style guide
Mailchimp’ style guide


This story has originally been published on July 7, 2015 when I was Head of UX at lowcostholidays, just after being Head of Design and Innovation at Geonaute, the electronic brand of Decathlon. At that time a style guide was pretty cutting edge! But, 2 years later, I still feel that as soon as you have a team of designers working together, having a style guide early in the process really helps the team to collaborate.