I woke up the other morning and realized the jig was up. I absolutely had to do a style guide for this site. While I did create a style tile early on in the redesign process and that was plenty at first, it was increasingly limited, not to mention inconvenient to find.
Then I launched this series of Beauty Tips for the Accessible Web. And a style guide is de rigueur for an attractive site. Arguably it’s Beauty Tip #1. Yikes. The cobbler’s kid clearly needed shoes.
Worse — I’ll be speaking at the amazing, wonderful AccessU in just two weeks on how to make accessible sites more attractive. And not to have my own style guide as an example? Shocking!
So I’ve quickly thrown together a simple one. And you know what? There is absolutely nothing wrong with doing this quickly. In fact, in my opinion that’s vastly better than turning it into a big deal. In the end style guides are just meant to help — not be a burden.
But let me back up….
What Are Website Style Guides?
To be clear, I’m not talking about editorial style guides, coding style conventions, or even branding style guides (though they do overlap with the latter).
Technically I’m talking about a front-end style guide. It’s a tool for you (and hopefully your team) to use — a design frame-of-reference for things such as colors and fonts. If you have one, you’ll discover it helps you stabilize the increasingly attractive look of your site, by supporting consistency and ease in achieving that consistency. It also forces you to be more thoughtful and less reactive about the style.
Typically they’re done as Web pages. That way you can see interactive elements like button hovers. But really, whatever works for you is fine.
So here, with no further ado, is what works for me:
I don’t have time right now to go into further details, in particular on what to include and what’s safe to ignore. But I do believe a picture is worth a thousand words. And perhaps after AccessU I’ll have time to flesh out style guide creation.
Meanwhile, for those interested, here are my favorite style guide resources.
Learn More About Web Style Guides
- Front-End Style-Guides: Definition, Requirements, Component Checklist: an authoritative overview from the Nielsen Norman Group.
- Another authoritative article on Creating Style Guides from A List Apart.
- The very useful Poor Man’s Style Guide: gives you an idea of elements to include.
- A large set of Style guide links: more than I need, but in case it’s helpful to you.
- Yelp’s style guide: an example of a much more thorough style guide. In my opinion, given its degree of detail and breadth of coverage, it’s clear and surprisingly easy to understand.