Digital Marketing Agency RocketMill
Style guides are a bit hip and happenin’ at the moment. There are excellent examples out there from the likes of Code for America, MailChimp and Starbucks. At RocketMill, we’re looking into developing our own too. They’re a key resource for efficiency, consistency and producing a great final result.
So, what are they, why should you be using them and how can you make one?
What are style guides?
Put basically, style guides define the design standards of what you are producing in a way that others can work with but will still maintain consistency. A page that you produce now should still work with a page that somebody else produces from your style guide in six months’ time.
Think brand guidelines, but for a website.
A style guide is a go-to maintained by front-end developers, documenting each component of a website and its code. Elements that can be included are:
- Logo treatment
- Typography
- Colours
- Image treatments – for photography and illustration
- Links and navigation
- Interaction – hover, focus and visit states
This list is by no means exhaustive; whatever elements you feel are necessary can be included. Including the do’s and don’ts of elements is a useful consideration to ensure elements are not used in places and combinations that you do not want them to be.
These are the basic elements that help build any design but can be expanded to tables, forms and input fields (again, not an exhaustive list).
Style guides can be produced loosely to give creative freedom to others or they can be tighter to maintain control and consistency. There is no right or wrong way to decide to produce a style guide as each project is different. Some clients may want precise brand delivery across every element while others made be willing to give a little more creative freedom.
Why should you use style guides?
Style guides help overall efficiency and delivery of a project, ensuring consistency both in development and future implementation of a website.
Easier testing
With all components in one place, it is much easier to test compatibility across browsers and devices. No need to load each template individually to find a bug – hurrah!
Better workflow
Having elements away from a specific template means you think about how they work with each other rather than within a page you are developing. Having a better relationship between elements means the scheme is likely to slot together well even when a new input field or media element has to magically appear.
An added bonus for workflow is that all the pieces for your design puzzle are in one place. There is no need to develop each wireframe individually as you can pick and choose your components (following the do’s and don’ts outlined, of course) rather than creating them each time, saving a great amount of time.
Shared vocabulary
Adding new elements always comes with playing the name game. You can’t make it too vague but a super-specific title seems ridiculous and is sometimes confusing when you go back to it. Having all elements in one place means that names can be relative to each other and are often much more logical. Also, if a new element is created by somebody in six months’ time, their naming is likely to be similar and the construction of their code similar to what is already in place. Less brain ache for everyone.
Useful reference
Starting a style guide is difficult. When asked what elements go into making a website it can seem like an impossible list. How long is a piece of string? Can I have one on sport instead? 42.
Having a list of elements to start from however, you can start to build your guide and make it a checklist for future projects. As your list expands you are likely to save time as you produce the majority of components needed at the start rather than in the middle of development.
Ways to create and implement your own style guide
To start developing your style guide, include the base styles and core elements. Headings, links, tables, blockquotes, lists and forms can all make an appearance. Keeping this style guide as a template, you can add to this and use it as a base for each project necessary.
The next step is components that override the base styles. Search boxes, breadcrumbs and feedback messages may be included, but of course this is subjective to the project in hand. Interaction is key to include however, links and their various states as well as buttons and their states.
Finally, you may want to add in layout and grid details to give your components their new home. Sometimes this may not be necessary; it can depend on the developer. If you can, then ask them what they would prefer. If in doubt, include it. Your style guide is for use now as well as in the future so you need to make sure you outline how things should be laid out.
Conclusion
Style guides look like they’re here to stay. They help with efficiency and consistency as well as the hand-over to the client. While they may take time to develop, with a bit of effort they look to be a key part of the design and production process and something we ourselves are definitely working on!
