Yes, you Should Create a Web Style Guide
Style guides, also known as pattern libraries, are a great way to ensure that your design carries on as intended as your website grows or as new team members work on a web project. Each style, or pattern, is a grouping of markups and styles for your website’s design elements.
Modern style guides are usually displayed as an actual webpage, which shows the different elements in a website or application design. When multiple people or even multiple teams are working on a web project, a style guide takes the guess work out of what visual elements should look like. It’s a great way to keep everyone on the same page for project consistency.
Keep Your Team on Track and Your Code DRY
Besides the visual design, a style guide helps to make sure that the CSS file doesn’t get out of control. We’ve all experienced repetitive code, so let’s strive to keep code maintainable and without anything absolutely necessary. If everyone on your team can see all the styles in one place, it’ll be readily apparent which currently exist so they’re not duplicated in the stylesheet.
Because your style guide serves as a collection that includes the design of modules and other design elements, it is easy to see if new design elements fit within the established standards.
What Should go in a Web Style Guide?
As we know, web design has the tendency to run a little wild. The good news is that effective web design, especially when using a style guide, is within your control. Style guides range from very simple to very complex. I’ve included some ideas here to get you started.
Color Palettes
It’s a great idea to include swatches that have the hexadecimal color noted. Your future time-crunched self will thank you! I can’t remember how many times I’ve asked or have been asked, “What is that hex color again?” Having a quick reference will certainly come in handy for everyone.
Typography and Hierarchy
Descriptive heading placeholders can go a long way in helping your team understand what kind of context the elements in your layout need to be used in.
Style guides should also include a suggested header hierarchy. Which is the h1, h2, h3, and so on? Descriptive words like primary header, sub heading, and sidebar widget heading also take out a lot of future guesswork.
Don’t forget to include less common typography elements, like block quotes for example. You’ve got to specify all text examples, even rarely used ones. If you’ve got a certain header and body style for blockquotes or testimonials, specify them with the same detail you do for more commonly used elements.
Images
Include a general treatment of images for your project. Do images require borders or a unique opacity effect? Is there a hover interaction? If so, get that in your style guide. If there are multiple treatments, include each one and define when certain treatments are used.
Link, Navigation, and Form Styles
From a UX perspective, the links, navigation, and form elements are three very important ducks to have in a row. You no doubt know that text links, buttons, and navigation styles have got to be included in your style guide. However, it can be easy to forget to include instances of normal, hover, visited, and active styles for each of those. Get those documented to ensure consistency in every detail of your site.
When great styles merge with form, there is no better way to show off all web form elements than in your style guide. It’s a great way to map out and take inventory of all form elements, what works, what doesn’t work, and what’s missing.
Specifically, here are some key components to include for form styles:
- Normal input field state
- Focused input field state
- Label styles
- Form placeholder text
- User active text
- User entered text
- Submit button
- Error message
- Check box styles
More Ideas to Include in Your Style Guide
It’s difficult to list every element that you may encounter, but here are a few more that you may find beneficial:
- Call-out box
- Horizontal links
- Comment elements
- Category tags
- Pop-up model
How to Make Your Own Web Style Guide
If you’re the lucky one to tackle the heroic feat of creating a style guide from scratch, I’ve got some helpful considerations for you.
I personally like to start with a blank HTML file and go from there. Link this style guide to the CSS of the actual website or application. That way changes are reflected in both places, and you don’t have to worry about maintaining two CSS files.
Begin by taking inventory of all your site’s elements and then add the exact markup you need for each one to your style guide. Sound intimidating?
First assess the page grid and then fill the style guide in with important elements like typography and color palette, adding more patterns as you work your way along. More design patterns can include things like images, blockquotes, sidebar styles, buttons, and form styles.
Trust me. This is time well spent. It’s also good to be reminded that nothing is permanent and that everything can easily be adjusted and expanded.
If you’re going for speed and manual entry of all the styles isn’t for you, there are some great tools out there that make it easy to create and use reusable patterns.
For example, Jeremy Keith’s Pattern Primer will generate a list of all the patterns in a folder. This is a simple PHP tool for turning code snippets into a pattern library. You’ll see the pattern rendered as HTML.
As we all know, a website is never finished. If new elements are needed, it’s easy to expand your living style guide by simply adding to it.
Your initial style guide may not be identical to the pages you eventually build out, but it’s a great opportunity to test new styles out, and it’s especially helpful for designing for multiple browsers.
Conclusion
By providing consistency in your design, your style guide makes website expansion and future web enhancements easy. As styles get added and modified, this document is a great way to keep the team informed and show off your stylin’ project.
