Design integrity is very important to maintain over time and can be a bit of a challenge when new team members come on board and don’t know the history of a given website. Documenting every little detail can be tedious because it’s difficult to capture every design element that exists on a site. We’re definitely not the first person to add this to our process, but we’ve seen the following real benefits by using style guides (defined below):

1. Websites are easier to maintain
2. Provides team members with clear instructions for how things should look and feel
3. Creates a visual for the whole team to review
4. Demonstrates interaction and hover states
5. Animations and videos are easily shown

Interactive Style Guides Makes Web Development Easier

Recently we started including a style guide page with each new site we launch to help current and future team members keep design elements organized and structured. Previously these were created as static mock-ups in Photoshop. Mock-ups tend to get lost in client file folders over time and don’t show interactions like hover states. With Living Style Guides, however, it’s much easier to look under the hood and peak at the code when it’s right there in front of you; and add to them over time for the next developer to see.

What is a Style Guide?

A basic style guide takes all the general elements that make up a site and puts them in one place for everyone to see. Often, when someone looks at a site they only see pictures, color and links. What we see is a visual strategy, structure and hierarchy. We work hard to establish logic from the moment a user lands on the home page, along with the visual presentation as the user goes throughout the site.

Interactive Style Guide Demo »

Consistency creates balance and harmony, which are both essential to striking the right tone. When done correctly, design becomes more than just pretty colors. Visual style and color become an essential road map for navigating a website. For example, if your primary buttons or links are green on the home page, then they should probably be green throughout the entire site, unless you have a good reason to stray from the established logic. By establishing ground rules for common elements you are showing your users how your website works. Creating a solid style guide helps us keep our team in check, and make sure the next developer follows the same logic so users experience a consistent interaction as they navigate a site.

Additionally, websites are interactive, no matter how small or trivial a user engagement may seem. Not everyone is comfortable taking liberties with design. Having a style guide allows teams to maintain visual integrity, and to ensure your site continues to be a success.