Creating a styleguide and keeping it up-to-date should not be a hassle and take extra work from your daily tasks, other resources or block other teams. Here's how we created ours and launched it.
Before we created a styleguide we did rely on sending screens through Invision, Zeplin or sometimes even just a screenshot in Slack. This meant that across the company teams all had their own interpretation of the visual and brand style. As we did progress and started to redesign our logo it was time to make it easier for the whole company to access these resources, colours and stay aligned with the new brand.
Our very first styleguide was a simple page in Conflurence, featuring a download to all the logos, colours and a short list of do's and don'ts. We realised that mainting this page would be a struggle but we also did not have the development resources to build our own guide such as IBM, UK Government, Dropbox, Material Design and others to name a few.
This was a great first step towards creating a styleguide. Although we realised that updating the page was cumbersome and even accessing the page proved to be a bit of a hassle.
Making it real
While we had our mini-styleguide it sort of was just a static place with little information, that is until we were discussing styles in the app team with the devs and saw this open source project, Catalog. (Thank you, Abhi!) This project aims to solve all the pain points mentioned above, and more.
After seeing Catalog's live demo I was convinced that this would be the way to go forward. Since it would not require any additional work from developers, or spend extra time designing our own custom styleguide page, we decided to set it as one of our quarterly design targets to see if this would be the solution for us.
To get it started all we had to do is purchase our domain, a hosting package and install Catalog through NPM.
The installation did prove to be a bit of a challenge, but with a decent documentation and some tinkering with the CSS to match our branding we had our first and real styleguide online:
Using Catalog meant adding pages, entries and new images was as simple as editing markdown in the desired .MD file. This means that anyone could write a create, edit and update pages with absolutely no development effort needed.
Having this fast way to create a documentation, it was extremely fast to start writing pages for almost each important component of the website.
The benefits of having a styleguide
One of the biggest benefits was, that we finally had a simple URL to share with everyone, making the styleguide accessible with no clicking around a cluttered wiki page.
On the other side, the developers did really appreciate the fact that they now have one central place to reference styles, colours, borders and components instead of having to write a slack message to a designer or even create something from scratch.
Using a styleguide you can have a quick and effective way of communicating design specifications across multiple teams.
- Easy to maintain
- Helps both designers & developers stay aligned across teams
- Brand consistency and trust increases
Further reading and helpful links
Here's a collection if you also want to get started with creating your own styleguide