Do I Really Need A Style Guide?

Let’s be honest, not every web site needs a style guide. Your cousin’s awesome fishing tackle box Tumblr blog or your neighbors Web.com “Cat Grass” e-commerce site really don’t need a style guide. Okay, depending on how much cat grass he sells maybe, but that tackle box blog is a no go for sure. Forget about these types of sites, a style guide is for sites that really need to maintain a professional appearance, brand of consistency. Style guides can be time consuming monsters so you’ll really want to make sure that it is gonna be worth the investment.

What is a Style Guide?

Before we determine if you really need a style guide, what is a style a guide? The easy answer is that it’s just an HTML or printed doc that describes and shows examples of what your site is supposed to look like and how to use it. It really is just a guide to your website and what styles and standards that are to be used when contributing and updating the site.

• What colors to use?
• How big is the H1?
• Is the content left justified or full justified?

We’ll go into what you’ll ‘need‘ and what you’ll ‘want‘ in your style guide, but for now, that’s the simple answer.

Why and When Do I Need One?

Good question. There really isn’t a simple answer, it depends on what your site is and who will use it – both the end user and the designers, developers and content contributors. One of the biggest things to ask yourself as you try to figure why and when you need one is time. A lot of designers will tell you that a style guide will save you tons and tons of time in the long run if you spend the time now to develop it. But in a lot of cases you may spend your time developing a style guide that you may never reference in the future – even worse, your users and contributors may never reference it.

Time is a huge factor when trying to decide if you really need a style guide. If you are just developing a site or app to launch you may not want to invest a bunch of time into something that may never see the actual light of day. Consider the style guide to be a long term investment, if you’re not ready to invest right now then don’t. But if this is a long term journey than it really is very wise to invest the time now – it does make life easier in the long run.

If you’re not really sure if your “story” is gonna be a squealed movie franchise or just a short run Friday night sitcom, here’s a bunch of questions you can ask yourself. If you seem to be answering ‘yes’ to a lot of these then you’re probably looking at creating a style guide.

• I want to save my brain cells?
• I like good usability and standards?
• I really love consistency?
• I have a brand that goes beyond my website?
• Others will use my brand and logos?
• I’m gonna generate or update content regularly?
• I have content contributors other than me?
• I’m a freelancer and I love to leave my clients with a truly manageable site?
• I have an API?
• I’m building company?
• I work for a large company?

How Do I Build a Style Guide?

If you’ve pretty much determined that you need a style guide now you need to build one. Your style guide depends on a couple of things like: what type of site is it for and who’s gonna actually use the style guide. In some cases you might just be creating a style guide for you so it may not need to be super detailed and pretty. In other cases you might have hundreds of other people referencing the guide and you’ll want to dive deeper and provide more details.

I’ve compiled two lists: ‘What You’ll Need‘ and ‘What You’ll Want‘. The ‘What You’ll Need’ list is a list of information that any style guide should have or provide to the user. The ‘What You’ll Want’ is simply a list of other stuff that you might want to add. Also, don’t consider these lists as templates either, these are just items that you’ll need to consider when putting together a style guide – you don’t need them all and in most cases you’ll need to add some other information more specific to you and your site design.

What You’ll Need

Branding. Define and give examples of your logos and color schemes. Show how your logo should be used in full color, decorated, flat, in black and white or on different backgrounds. Provide HEX and RBG color values and Pantones for each color and you may also want to provide logo files for users in .png .jpg or even .ai and .psd formats.

Typography. Define what font families and the sizes for each header, paragraph, cite, block quote, labels, form headers or any other formatted text that will be used. Also provide examples of what kerning, line height or line spacing should be used as well.

Layout. Define where and how HTML and other elements are positioned on the page and how they relate to each other. Define margins, padding, gutters or grid patterns of the overall layout as well as any specific elements if different. If necessary, provide examples of the layout to show the differences in pages or layout templates.

Links and Buttons. Define the colors and styles for all links and buttons that will be used through the site. Show examples and color codes for content links, sidebar link styles, submit buttons, form buttons, info buttons or any other link or button that exists on the site. This may even make you think about how to simplify your design if it seems too complicated.

Navigation. Define the main and sub navigation styles as well as the interactivity of them. Define what happens when nested or parent/child navigation is used and show examples of how the navigation should be used and/or created.

Visual Hierarchy. Define and show examples of how headers, images, titles, paragraphs and other elements relate to each other on the page. Provide a few examples that define the visual hierarchy you should achieve and maybe even provide a quick description of why this hierarchy is important to the look and feel of the site.

Images and Icons. Define what type, sizes, file sizes, dimensions, and styles should be used for images and icons on your site. Will you have a featured images for your posts? Do you have specific icon sets that need to be used? Should content images be centered or floated? Show examples of images and icons and provide the user the placeholder images and the proper icon sets they will need to use.

UI Standards. Define what types of UI elements should be used for each interaction and how they should look. Where should a check box or radio button be used or should they be used at all? Go the extra mile and style a complete UI kit for you site and provide the images or even code that generates each UI element. Good examples of complete UI kits are Twitter Bootstrap and jQuery UI.

Form/Validation. Define form styles and layouts of form elements. Define how inputs and labels will be aligned and what styles will be applied. Also, define the flow of forms, and what types of forms should be used where. Define what type of validation will occur if any and what the error messages should look like and what colors will be used.

What You’ll Want

Duality. You may want to define multiple style guides depending on your users and content managers need. The end user may not need to know all the particulars of how to write content for your site whereas content contributors will. If necessary, provided specific style guides to specific users or just simply scale down the style guide per user.

Goals/Mission. You may want to define what your overall goals and mission of the site or app are. If you do this, then your contributors and users can better understand why you’ve chosen the styles you use and how that relates to a better experience for all. Also, if you take your site seriously then your contributors and users will do the same.

Coding Practices. You may want to define what coding standards and practices should be used when edited and writing any type of code on your site. What HTML, CSS and JavaScript standards are supposed to be used when writing code for the site and show example code to illustrate how code should be written and submitted.

File Naming. You may want to define file naming conventions for all contributors and user of the site. This will prevent so many problems in the long run. Define how you version files when editing and testing and what file types should be used and what file types should not be used (hint: animated gifs).

Content Standards. You may want to define how content should be generated and how it should be styled and layered out beyond just the simple CSS. Define the length of content areas and articles, the length of labels and headers and how long headers will wrap. Define the tone of content, the submission of content, the removal of content and how the editorial process will be handled if needed. Also, define copyright standards for content that is added as well as used so that you can avoid any legal actions.

Comment Standards. You may want to define standards, beyond the style, for comment and forum areas. How will comments be moderated? How should replies be handles and how will the site handle trolls? How and when should comments be closed if at all?

Do’s and Don’ts. You may want to have a little section in the style guide that defines the do’s and don’ts of elements. For instance, show examples of how the logo should be used correctly and how it should never be used. Show examples of good visual hierarchy and bad visual hierarchy. Show examples of what good CSS should look like and what CSS code should never be used.

Make it Downloadable Printable. You may want to make a style guide that the user can download and print if they would like. Some users may want to have their own copy of the style to refer to without hitting a URL. This is a really great idea but can be hard to deal with if you’ve updated and made changes to the style guide. If you do create a downloadable style guide, I suggest that you capture there email address so that when you make alterations you can easily shoot out a new guide to those users.

Make It Pretty. You may want to think about making a visually appealing style guide with lots of good examples. This may take a lot more work but if you have end users referencing the style guide this may be worth extra time. Your style guide is a reflection of your product just like any other publicly facing product you manage. But, if your audience is just your group of developers or contributors then a simple wiki page might be fine since most of these users already understand your brand very well.

In Summary

Style guides are great tools not only for your users but also for yourself. They are awesome time savers and are huge when answering style questions as content is being edited and added in the long run. But be careful about how much time and effort you put into your style guide, don’t go bananas and over board on the style guide if you don’t have anyone that will use it. If your style guide is coolers than your actual site then maybe you have spent too much time on it.

Some More Style Guide/Brand Examples: