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 styleguide for your team (sorry!), but I wanted to share my Head of Design experience as I found a styleguide to be 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 styleguide 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 styleguide, it’s not only the creative director’s opinion that counts anymore. Is it consistent with the styleguide? 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 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 User interfaces 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, more iterations 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 styleguide, they have a playing field. They can’t ‘re-invent’ what is already defined.

Note: Be careful not to crush their creativity with a styleguide. 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 to be creative. Also, be sure that you have moments to re-evaluate the relevance of the styleguide and involve your best visual designers in that process.

6- A frame also for the less ‘talented’

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 struggling. 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 styleguide will help them to deliver better designs. And as a creative director, you will have less awkward conversation where you have to explain that it’s not good enough…

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 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 styleguide 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 as 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 styleguide to start with. You can begin with a simple style sheet in Photoshop.
  • 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 styleguide 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!

I have also used the same approach when I was working on electronic devices. Defining a design language for our range of products and some UI guidelines for the Web and the products’ UI helped a lot the team to work together.

And you? Do you work with a styleguide? Does it help your team to work better together?

 

Further readings and style guides examples

Atomic design – Brad Frost

A list of of ressources and articles around style guides

Material design – Google

Lonely Planet’s style guide

Mailchimp’ style guide

 

Previous post

#Weekly shake: Hooked, liberate talent, reading list, product thinking, BBC micro:bit

Next post

#Weekly shake: how to present your research, inside IDEO, your strategy is your story

No Comment

Leave a reply

Your email address will not be published. Required fields are marked *