Front-end Style Guides

I’ve just read Front-end Style Guides written by Anna Debenham, published by Five Simple Steps. As a thorough overview of all that the title suggests the book sets a practical mindset for utilising style guides with many examples (and at £2.40; an absolute steal).

Style guides are critical to how I make websites.

My design & build process naturally results in a front-end style guide being created alongside the website. This is more than just a “deliverable”. While it will likely benefit future design and development, that’s not the primary reason why I create it.

As my last case study hopefully shows, I prefer to start new projects with heavy focus on content. This allows me to understand the client’s business while setting reasonable — budget conscious — requirements and criteria for a successful design. I then work on simple info architecture with the client resulting in a plain HTML website; much of the content and structure objectively decided and prioritised. This aspect of web design is as important to me as the visual design that follows.

As you might expect I continue to build out the design in the browser and it is the “style guide” page that has become the centre of this process. It collates design components and patterns. It becomes a code reference for modular thinking. It’s the ultimate browser testing page.

For me style guides are a stable centre; a reassuring, living document of progress that allows aspects of agile methodology to leave things in flux. I can offer the iterative, feedback-driven process that hugely benefits my clients. The end result — what might be traditionally referred to as a style guide — is really just a bonus. What I produce is not an overly polished design bible. That deliverable doesn’t define how I make websites but the steps resulting in it do.

Yeah, quite a big deal then!

In future I’m looking to implement more automation so that I make the actual deliverable a real design and development reference without more work.

If the concept of a style guide, however you interpret it, doesn’t feature in your web process I would highly recommend Anna’s book as a primer.