Styleguides for better front-ends

I just read Anna Debenham’s pocket guide to front-end styleguides. With only 69 pages, it is a concise guide to what (front-end) style guides are and how to use them.

It explains what style guides are (used) for, goes into different kinds of style guides used specifically on the web, describes what elements a web style guide can consist of, considers some of the main benefits of style guides on the web, gives some examples of good web style guides and finally looks into what the future for style guides might be.

Anna describes many different types of style guides for the web, such as style tiles, pattern portfolio’s and pattern primers. The main idea with all of those is that they come into being before page lay-out. They describe visual styles of page components, from which full pages can be construed later on in the design process.

The cover of Anna’s Pocket Guide

Style guides for better front-ends

Style guides can be very helpful for those pursuing to build better front-ends (and who isn’t?).

• You don’t know which HTML the CMS or future versions of the CMS will spit out, and even if you do, the designer might not have styled them. If you include all generally used HTML in your style guide, you can make sure all of those are properly styled and tested across different platforms and devices.
• Creating a front-end style guide will help find inconsistencies between components’ designs, and therefore help avoid inconsistencies in the underlying CSS.
• Making a front-end style guide helps thinking even more component-like, which according to some is good. Components are not tied to a specific space in a page layout. That is helpful as much of today’s web design is for multiple screens.
• The style guide can be used to show all involved in the project what kinds of content (can) exist in their website.

I have used simple style guide and pattern primers in projects before, and plan to do even more so after reading Anna’s short book.

,