Style Guides for Web Design

[Ryuzaki]

I love looking at style guides. They encapsulate the design of a site quickly down to every single important HTML or CSS that make a site unified. It's also a great way to START a web design project to pitch to the client, possibly making 3 or 4 different "cards" for them to choose from.

Here are some cool examples so you can look through them and see what I'm talking about. You'll likely learn a lot about CSS along the way, plus get some ideas for your own projects:

• Google's Material Design
• Apple's OS X UI Guidelines
• Disqus's Brand & Style Guide
• Buffer Style Guide
• Mozilla Style Guide
• Atlassian Design Product
• Yelp Styleguide
• Starbucks Style Guide

I can't explain why this gets me so excited. I want to go back and make one for my new project just for the fun and practice, because this is definitely a must for big clients and also can make your design workflow a lot faster and organized.

Have you guys ever made one? @Marc?

Do you think something like this interests typical browsers of your website? Is there any marketing utility in it?

 

[Marc]

Yes, but these are usually done in websites coded with LESS, this being the "good practice" workflow, for huge websites. These are given to clients and 99% of the time never see the light of day, but I managed to dig up a page that has not been deleted and shows what a bootstrap style guide looks like, after being customized with LESS ( http://212.111.42.125/styleguide.html ).

Typically, when I see a good one ( the material design one ), I get jitters and want to start creating one, but these are such a time sink you never find the time to complete one.