Style Guides, you either hate them or love them. These tomes are either crammed to the brim with techniques and tools you rarely use and are antiquated approaches for designers, or form the very DNA of a design system that can be adopted to every piece of brand work you and your team will ever churn out on the fly. In the age of digital transformation the digital style guide still persists as a chicken and egg problem. Agencies are often approached with requests for help creating guides either from a branding perspective that translates across its offline and online creatives, or created solely to address digital work. Teams could be traditional, digital or more likely with mixed skill sets – traditional (ATL, BTL) and digital. Each team has its own learning curve and requirements and probably a different guide that goes with it.
While style guides are definitely lighthouses that light the way for consistency in interpreting the brand tonality, values and design language, you may wonder what comes first. The work that has to be designed and put into the world, or the digital style guide? Sounds like the chicken or egg paradox? The truth in this case, I personally think is simple. If you don’t have work that is established as brand canon, there is no way you can establish a design language playbook for future assets. Style guides can use base work to extrapolate how a design ethos is translated into different collateral. Whether it is an emailer, an email signature or the kind of material that needs to be created for social media. But if there is no base work, that starting point that encapsulates brand vision, a random designer gets to play God in defining what your brand visually stand for and sounds like. Besides if you haven’t seen one piece of creative work that defines your brand, how will you really know how to distil your brand essence into future work and what it looks like, even if it slaps you in the face?
Once you do have a brand essence, its core values and understand how it sounds in your head and looks like, it’s easier to work with agencies to give them direction to craft a style guide that codifies this. So this could likely be after you’ve worked with your agency on some work for the brand. After a successful brand re / launch campaign perhaps. The style guide then informs future work and it goes on to act as a guide for converting this brand ethos across different markets. Or if you are an umbrella brand, it helps distil some of the parent brand values to the individual product brands, while giving enough leeway for each of those brands to carve out its own unique brand values. Obviously there a some really good examples of these guides out there. American politics churn out some nice guides, like the one of Obama’s election campaign or Hillary Clinton’s PantSuit.
Format the first hurdle
If you have ever thumbed through a style guide for a brand you will notice that a lot of time and effort goes into defining parameters. Brand colour palettes, logo treatments, font styles are all common place. If you happen to have a nice glossy printed brand guideline book, it makes for a great table top reference that one can delve into time and again like a dictionary. This is the format that most design style guides shoot for. So you would think.
Is this the perfect format for newbies who really need to understand the design language? Perhaps not, but if care is taken it can be written and presented in an engaging way, it can fill this gap. By and large however if you have stepped into an agency or looked at your in-house team, you will notice that people are so pressed for time that rarely pull out the style guide that often. Now there are only two possible reasons for this. One, the style guide has done its job well and ingrained its basic design principles in the mind of the design team from the get go, or it’s just an inaccessible format to page through. Even more so if the style guide is a PDF. If you can’t search it quickly, designers are unlikely to spend time scrolling around endlessly trying to find the style palette they need for the work they want to create.
I personally think we should embrace a design system pack and move beyond just creating a Style Guide. A pack would encompass the guidelines at it core but be layered with the assets and tools to check that the style guides are adhered too. We’ll come to that in a bit.
Designed for designers
More often than not, style guides are designed by designers for brand managers and not designers. There is some irony in this if the brand manager has never done a single piece of design work in his life, he is still the person who signs off on the brand style guide.
Perhaps today we need to go a step further in designing a style guide that is truly for designers. In its very essence style guides need to evolve from being a guide, to become a style package. Think of a designer’s workspace. Whether it is a front-end designer or back-end developer, the style guide needs to fit perfectly into their existing workflow and not be intrusive. So perhaps instead of just PDFs think of design palates with your brand’s colour swatches that can loaded into Photoshop. An accompanying font pack so everyone has easy access to and uses the right fonts. For developers, have code snippets that can cut and used. Say for example the footer code of that email that needs to be send out that doesn’t really change. Today’s approach focus on designing elements more so that guides for complete pages. So design tiles and palates have found ground to be included as the bedrock for future designs. You can’t quite anticipate what you’ll need to design next after all.
Digital Style Guides designed for digital work
Today there are digital style guides are built for developers. Search the web and you will find a myriad of examples. These are websites in their own right that outline each of the element is. Some of it I think even uses live code as the basis for the style, adapting to the live code as it changes.
In such websites each element of a brand’s online presence is defined with examples of the code that is needed to create it and the way it looks like in the front end. These style guides exist as online repositories that are easy to navigate. As technology changes they can easily be updated. They are accessible to all people who have the required URL. They are searchable in a manner that eliminates having to thumb through chapters to find what you are really looking for. Their copy paste function makes implementation that much easier. Some of these go one step farther, using the style guide itself as an example of a brand communication. Uber is one such example.
The next step
While digital has made numerous leaps and bounds over the years, not much of this has trickled down into digital style guides. Today teachers have access to plagiarism checkers. The same technology perhaps could be tooled to evaluate content for brand tonality. We should be able to upload art work and have checks such as logo placement be evaluated by computers. The simplest way to achieve this perhaps would be to overlay a machine generated brand style grid that is super-imposed over the uploaded art work. AI, machine learning and voice search could be used to create an easier to access repository of guidelines. The only thing stopping this investment is having a brand that will budget for the same. This is a brand that is going to be growing leaps and bounds, has big expansion plans and will need to have a robust guide in place so that all its stakeholders are quickly brought up to speed and are on the same page.
Some examples of style guides & resources
- A nice collection of guides at saijogeorge.com
- Styleguides.io
- The Boy Scouts of America
- BBC Gel (The design language of the BBC)
- Material Design by Google
- Uber
