How do I make a style guide template?

Question

I'm creating a website and I'm in the branding and styling stage where I'm picking a color scheme, font combinations, etc. I want to create a very basic Style Guide to show to my clients for reviewing. It is a general site and a general style guide works. Could anyone please recommend a Style Guide template that can be edited and customized?

Update: I did a better Google search and found a template that could work http://rafaltomal.com/free-web-style-guide-psd-template/ but still want to share this post and see if anyone has better recommendations.

Answer 1

This is really good question. But I am afraid you can't standardize a style guide. There are guidelines to make one but a lot of it depends entirely on the complexity of the website you are creating.

The guide you got your hands on is focused on typograhy which is by all means a really good thing. But not all websites can be understood by just that. Some sites/clients need a little more to be convinced. Put in your-

1. Include some inspiration! It's always a good idea to share your thought process and things that inspired you while creating the UI. A lot of good designers I know are not inspired by other good looking websites but rather things around them- magazine layouts, subway signage. Sometimes client share similar tastes and might get even more excited about the project. Most design meetings are boring for them.
2. Primary and Secondary Button Styles. Avoid the size and standing out discussions for later. Give them an understanding of how buttons will work.
3. Copy style for CTAs (in case they are unique)
4. A couple of icons to illustrate the style. Sometimes you might be combining two basic elements to create an icon (maybe brand color circle + minimal icon). Show them that process.
5. Show them how images will be used. How alignment will work in your layouts and how sections will be distinguishable.
6. Show them different hover states for various elements (buttons, featured images, etc.) Make sure you look at the ones that will really matter and not every small thing. This depends on the project.
7. Show them how colors will interact in the basic idea. Which ones will be highlight colors and which ones will be background. It's also a good idea to explore readability on darker backgrounds for specific sections.
8. Show them some basic grids you have planned for the site and what priorities you have set for user navigation (maybe site navigation or immediate actions after consuming content.)

The most important thing to keep in mind is to be able to present possible and promising solutions to some of the problems that the client must have mentioned in the first few meetings. This is where you need to listen carefully. Not all clients will get the importance of typography and layout but they sure as hell will remember to ask you where that big banner with "click here to buy" is. You need to able to have tackled that layout and show them possible solutions.

With applications this can get really tricky. Client expectations can vary from just a font and color guide to a full-blown User Interaction Study to justify the investment.

<--ninja quote--> Always keep asking questions. You will get closer to the answer. <--/ninja quote-->

Answer 2

I have used these style guide templatesbased on the style tiles concept & template.

They're good for the early stages when you're exploring styles, not so much for specifications for when you're actually building the product.