Style Guides: Why They Are Important & What to Consider
If you’ve ever worked as a designer on a project that you did not start, you have probably experienced the frustration of being lost without a clear direction of how to create designs that match the already existing screens and interface designs. Consistency is crucial when designing digital products and style guides are a great way to enforce this. According to Wikipedia, Write the Docs and Designer’s Thoughts, a style guide is a necessary set of standards for writing or for design [of content and products], defining the style to be used in communication within a particular organization or project. It is pivotal to the completion of any good product design process because it is tied very closely to one of the 10 main principles of user experience design: consistency. As such, anyone looking to sign off on design collateral, especially in cases where someone else will be interpreting and implementing the designs needs to know how to put together a style guide that works.
It is recommended that the style guide is prepared alongside the designs themselves as it could become cumbersome trying to put it together. Work in design teams is often required to be turned over very quickly and match the demand of dev sprints and general project time constraints. The style guide should be a living document that is constantly updated with new style conventions relevant to the project.
The following list outlines how to create a style guide, particularly for designers who are just starting out, by focusing on different elements of standard design.
Typography
You want to make sure that you clearly lay out the font family and the corresponding weights and sizes used throughout the design. This makes it easier for other designers and developers to interact with your work and pick up from where you’ve left things. Of course, there are a number of ways to do this visually, and a simple google search will point you in the right direction.
Icons, Buttons, Forms and other UI Elements
It goes without saying that you want to define how all UI elements have been designed and used across aspects of your design. Best practice recommends that you define the sizes used for all groups of UI elements from buttons to icons used. These elements might also look different depending on what state they are in (think “hover”, “on-press”, “disabled” states etc.), so it is important to define these clearly as well. Anyone looking at your style guide should be able to effectively recreate your design without any issues. I guarantee that your team would appreciate it if you are also able to provide a downloadable copy of icons and illustrations used throughout the design.
Colours
A very important part of any user interface, colour greatly determines the kind of emotions that the interface invokes in the end-user. For this reason, it is important to document all colours used with their respective shades, levels of saturation, etc. You want to make sure that anyone who’s read your style guide can easily determine what colours to use for UI elements, texts or areas of the screen.
Layout
Layouts are an important part of interface design. Grids are a common way of easily setting up layout constraints for interface design. These days, there are a number of different layout styles as can be seen in this great article and it is necessary to clearly describe the distances between key elements on the screen. This is inclusive of padding, gutter and margin pixels as they all contribute to the overall look of the user interface. An ideal way to do this would be to use a screenshot of each UI element in use as it would be in the actual product and label it with the distances between each one of the elements. The image below this paragraph is a summarised version of Codeacademy’s style guide following the recent redesign of their platforms. In the right corner, you can see definitions of how they intend grids to be used in their interfaces.
In Conclusion
You might need to create the style guide with CSS/SASS variables for each element mentioned above that can be easily translated to code depending on your team and who your stakeholders are.
It is also important to note that your team members/collaborators might also appreciate a “DOs and DON’Ts” section with standard information that may not necessarily fall into any of the categories listed above. For example, if your company/client logo has a monochromatic white or black version which is used on special backgrounds, you may want to include which version of the logo to include where. You can also include guidelines for what kind of imagery to use in order to maintain the general look and feel of the interface.
This article is not a complete guide and has drawn knowledge from other sources so it is important to find other resources to supplement the knowledge gained from here. One that I found very insightful is this one by Altextsoft. Check it out :)
