And I read style guides.
I review new style guides that are released by companies for print and web. And I find enjoyment in doing so.
What is a Style Guide? Think of it as a map or set of instructions put together that gives direction. Thinks such as:
- What is the usage guide for the brand?
- What colors are to be used and where.
- How much space should be given?
- What fonts are being used, the kerning, line-height and weight.
- How will content flow, present itself and provide an eye pull.
It must be an affliction, and one that many have.
Specky Boy released an article in January on Inspirational Examples of UI Style Guides and I couldn’t resist reading it and re-reading it. It got me to thinking, though. When leading from design, one isn’t just “making it pretty”, something I hear engineering friends say often.
Design is about making it functional and useful. It is the “how it is done” and “is this really what we want” to the “we want to do this”. The style guide is about keeping it consistent with the providers image. It is the colors, the feel, the look and the consistency that boils down from the psychology of how the end user will interact. It holds within the prototyping, pivoting and testing that got it to where the business is.
There are a number of good examples of UI Style Guides that can be found by searching for them. Facebook, Twitter, Adobe, and Google are some great examples of companies doing it right. They talk about the spacing, color usage, when to use a logo and when not to. Should the brand name be used as a verb? In Facebook’s case, no. And they say so in their guide.
You might be saying, “But I don’t have the pocket’s of Facebook, Twitter, or Google, Darren.”
That is fine, but likely the costs of “guessing” the look of the site/publication/logo add up in hidden ways. Going back to find the color information to make sure it works in print and digitally will cost time. What font’s are being used? Need to look it up? What are the dimensions we should use with the logo? How should it be spaced? You’ll know it when you see it? How many iterations until you see it?
When you start a project with the design in mind, many of these questions are answered up front and can be standardized early and often. It isn’t being written in stone, so you can pivot, and with a guide, you can go back and find the other places that need to be updated easily.
And if you lead from design, you will save money on the project.
Links of interest:
- Inspirational Examples UI Style Guides
- Facebook Brand
- Twitter Brand
- Adobe’s Brand Guidelines
- Material Guidelines