Guide to Viewing Style Guides

The task of developing a fully custom designed website is a collaboration of work from several team members working on their own specific disciplines. From project managers to information architects, to content specialists, to designers, to developers, everyone has a hand (or two) in the proverbial cookie jar.

One way to ensure the teamwork remains consistent throughout the entire design and to optimize future execution of the development is to create what is called a Design Style Guide. The Style Guide is one of the most important outputs of the design phase, in order to establish a baseline set of rules and documentation for the styles that will be applied throughout the rest of the design.

What is a style guide?

While working on initial design mockups, whether homepage or interior pages, a designer will begin to establish a set of design styles. Once all these styles are determined, they are put into a single layout as a collection of the predetermined elements, graphics, typography, and rules that developers will use to code the website.

You could think of the style guide somewhat like the instruction booklet for a Lego set. Without the instruction booklet, you wouldn’t know what size, shape, or color pieces to use, or how and when to use them. The designer determines the Lego pieces, as well as the parameters around each one and it’s usage. Then, the developer uses that set of rules, or instructions, to develop the framework to build the website.

Why is it important?

Style Guides are important because they establish rules. Without rules for a website, we would lose consistency and cohesion. These rules determine the sizes, shapes, and format of different design treatments (i.e. the lego pieces). The rules help these elements remain consistent across several pages of the website, especially when it comes time for content specialists to execute on creating pages, posts, and layouts.

It is also critical to have defined elements of the website to make it easy for developers to reuse these elements in different layouts and templates. This increases efficiency by defining all the required elements for developers up front because designers can include all possible interactions such as hover states, button styles, titles, links, etc. They use these rules to translate code across several areas of the website.

Additionally, having a style guide ensures that any future development or third-party cooperation will follow these rules to preserve the overall style of the website. It’s a way to set the client up for future success and growth without having to worry about inconsistencies on their site.

What does a style guide include?

Style Guides should include all necessary design elements such as:

• Typography Styles
  • Font style for paragraph text H1, H2, H3, H4, H5 styles and sizes
  • Bold, italics, and other typography variations
  • Blockquote styles
  • Link styles
  • Color Palette Options
  • Primary, secondary and tertiary colors
• Button Styles
  • Including hover state, active state, etc.
• Special Design Elements
  • Accordion styles
  • Content Blocks
  • Imagery Usage
  • Icon Usage
  • Quote areas
  • Spacing requirements, padding, etc.
  • Any special templates used in the design

How does branding influence a style guide?

At ipsoCreative, we believe a website is the digital representation of a company or organization. It’s how you tell your brand story on the web. Therefore, we pay careful attention to brand when developing a custom website for our clients. The overall company brand essence is critical for the website design. If company brand guidelines exist, we utilize them as the key influencer to the website design style. We study the brand to determine the best way to translate that into the online presence, keeping brand rules such as typography, logo usage, color palette, etc. As a result, the style guide reflects this influence and the client now has a cohesive online guide for their brand.

Conclusion

A Style Guide ensures consistency, efficiency, and optimization throughout a website development process for the entire team’s effort of turning design concepts into actual working products. It establishes rules, guidelines, and a cohesive brand presence for the developer and the client to be successful at both launch of the site and with any future development.