Style Guides for Web Design and Development

By Keana Massey | Published September 17, 2015 | Categories: Cascade CMS

Developers, designers and web administrators are always looking for ways to improve how they manage the look, feel and complexity when building a web site. This can be difficult when we have multiple team members or new members involved in ongoing projects. So how can we help maintain global branding and development patterns for sites that all users can utilize? Style guides.

What is a style guide?

A style guide is a document of code standards that details the various elements and patterns of a site or application. It is a one-stop place to see all visual styles of the site such as headers, links, buttons, color pallets and any visual language that is used on the site.

http://ux.mailchimp.com/patterns/

Check out a few of the other style guides below published by some great brands.

• http://www.yelp.com/styleguide
• http://codeforamerica.clearleft.com/
• https://blog.codepen.io/documentation/
• http://alistapart.com/about/style-guide
• http://www.starbucks.com/static/reference/styleguide/

Why should you use a style guide?

Style guides take extra time to develop up front but we have found that they have numerous beneficial factors for developing.

• Faster build time for new sections and pages.
• Design consistency is easier to maintain
• Designers, developers and content owners have a one-stop guide to reference.
• New team members joining the project can refer to the guide for the exact style use.
• Keeps both code and design consistent throughout the site.
• The guide allows us to standardize our code (CSS, JS, HTML), keeping it small and quick to load.

Steps to building a style guide?

Template

Start your guide with the sites foundations. These will include elements like color palette, fonts, headers, body text and grid layouts. These basic elements are the foundation global elements of your site that set the tone for your style guide.

http://www.woothemes.com/style-guide/

Patterns

Next start adding in your site patterns. These would include buttons, logos, images, icon library, form styles, etc. Any element that belongs on your site should be included.