How to Create a Style Guide for Your Website
As websites grow larger and more complex, style guides are becoming increasingly important for maintaining consistency across design teams both large and small.
As Andrei Dorin defines it, “A styleguide is a set of standards, principles and rules every developer or designer should follow in order to improve the digital presence of the product.”
In addition, these style guides ensure that any future developments or third-party additions will adhere to existing brand guidelines and
Why You Need a Style Guide
Style guides are extremely important when multiple designers (some of whom may be remote) are working on a large web site or application. In addition, predefined and pre-coded elements will significantly increase the speed of development.
In addition, style guides help ensure that CSS style sheets are kept DRY and limited to the necessary styles.
How to Create a Style Guide
Decide on a Grid Layout
A properly designed website will be built on top of a clearly-defined and fully-responsive grid system — this will ensure that all site content is correctly positioned, sized, and aligned across various screen widths.
A grid system is comprised of several elements, including containers, units, columns, margins, gutters, and breakpoints.
For example, the popular Bootstrap grid system is based on an 1170px container width, 12 columns of 97px each, and a gutter width of 30px.
It also includes three breakpoints at 768px, 992px, and 1200px.
The Bootstrap layout is extremely popular because it is so simple and easy to use. However, this popularity has also resulted in a number of websites that all look quite similar.
Experiment with different variations on this layout, or explore other grid systems such as those employed by the 960 grid system, Materialize CSS, or Foundation.
Define Color Palette
According to a recent study from Kissmetrics, 93% of survey respondents cited visual appearance (including color) as the most important factor when shopping.
The same study also found that 85% of shoppers listed color as one of the primary reasons for buying a particular product.
Begin by selecting one dominant brand color to use in the majority of your visual components — including your logo, primary buttons, and other CTA elements.
Next, select accent colors.
This can be particularly challenging for those who find it difficult to tell which colors blend well together. Tools like Adobe Color CC and Coolors make it simple to create a palette of appropriate accent colors.
Limit your accent colors to just one or two, and use them to emphasize items of secondary importance — such as subtitles, borders, and less-important CTA elements.
Include formats for both print and web, meaning CMYK, Pantones, RGB, and HEX values. Also be sure to include a CMYK alternative for Pantones, because exact matching is often difficult.
Choose Typography Carefully
Typography is one of the most important — and also one of the most overlooked — components of a successful website.
Oliver Reichenstein has even gone so far as to argue that web design is 95 percent typography!
Choose one font family (two at the most) and define a hierarchy that includes headline types H1 through H6 as well as paragraph copy. Also consider typography settings for inline links, navigation links, captions,and so on.
Also be sure to include weights, colors, line heights, and kerning.
