The Fight for a Living Style Guide

January 19, 2012

By

Designing something for the web is very different from designing on any other medium. It leaves a door open for changes and/or updates at any time, and most clients use this to their benefit. It gives a reassurance that nothing is permanent and that if a design/user flow isn’t working it can be modified at a later point. One of the downsides is that changes can take place 3 hours to 6 months after launch. From personal experience, the further the changes are made from the launch date, the further the changes are from the original design. The design can get further off track when you introduce other designers/developers or even another design firm.

Once a design goes too far off the original path it can quickly become a project you no longer feel is worthy to showcase in your portfolio or to other potential clients…no matter how good it once was.

What’s the solution?

Create a living style guide. I add living because a style guide should not be a document that is created once and never updated. Brands are prone to evolve and change over time due to marketing research and A/B testing. If you feel that you’ve covered all of your bases when the style guide was created, then you only provide “one and done” designs or you may be missing something in your process. If you do provide continued service past the launch of a website you should be billing for user testing, conversion reporting and A/B testing. These statistics will help assure your client that their marketing efforts are heading in the right direction. There is nothing to be ashamed of if your original user flow is a little off, making changes and updates are essential to creating a solid user experience. No pride required.

What are the Benefits of a Style Guide?

  • Helps with brand consistency
  • Forces you to settle on a style before diving into code
  • Focuses efforts on usability by making you think through every possible state of the website/app
  • Provides a quick guide for all team members working on the project

What Should a Style Guide Include?

The style guide should include anything that you feel is vital to maintaining the style of the website/app.  Here are some examples that fit that description:

  • Overview / Branding Goals
  • Color Palette
  • Button and Link Styles (active / hover / visited states)
  • UI / Form Elements (active / hover states)
  • Navigation Elements(active / hover states)
  • Typography Examples (Headings, paragraph, blockquotes)

Overall we’ve found that by providing our clients with guidelines for their online brands we are able to offer them solutions with greater value and that by keeping them continuously updated the designs stay true to their original goals and remain solid portfolio pieces.

Style Guide Example

Designer
Joshua Giblette

When Josh isn't focusing on pixel perfection, you can find him spending time with his wife and 3 daughters, crushing 12 year olds on Halo or hitting the slopes.

Comments (3)

  1. Rachel

    Jan 25, 2012

    @ 12:03 pm

    Thanks for sharing, this is fantastic. I think all designers should also create a style guide for the companies they work for. These guides could be essential for vendors and even new staff to get up to speed and moving in the right direction immediately.

  2. Vijay

    Feb 16, 2012

    @ 8:33 am

    You raise a great point, but is how well an organization follows it’s own style rules the best criteria for judging the value of a style guide? (Just a thought: I’d be interested in seeing an evaluation of how well the AP does on that metric.)Given the amount of content that Yahoo creates in a day, coming from dozens of different business units, and probably hundreds of different content creators, it’s not surprising that they saw the mish-mash of style decisions on their own sites, and decided that they needed a style guide. Now comes the hard part: getting everyone to adhere to it!

  3. Thomas Davis

    Jun 21, 2012

    @ 3:38 am

    I’m working on a tool that automatically generates living style guides for your websites and applications.

    http://kaleistyleguide.com

    Kalei’s philosophy is very much aligned with the sentiments in this post.

Leave a Comment