Style Guide Best Practices

People see your organization, company, and brand as a single entity. They don’t care that your team is located in different parts of the world or that you use an Agile process. They don’t care that your code is by one means on one part of your site than another. Because of this, consistency is vital.

Example of breaking consistency law: various appearances of buttons

Six General Types of Style Guides

  1. Brand Identity
  2. Design Language – laid-out principles of what the product suite is trying to accomplish
    1. establishes consistent design vocabulary for anyone designing
    2. aesthetics, ux, design principles, etc.
  3. Voice & Tone
    1. articulates how brand interacts and communicates with user when things happen
  4. Writing
    1. rules of grammar, punctuation, etc.
  5. Code
    1. Helps developers write maintainable and modular code
    2. establish code standards for teams to write efficient, cohesive code
  6. Pattern Libraries
    1. collection of your UI components
      1. “all of our navigation elements”, “all of our icons”, “all of our sidebar filters” etc.
      2. helps articulate everything that makes up your UI interface
      3. establish effective interface design
      4. promote UI consistency and cohesion
      5. leads to faster production, speeds up design process
      6. establishes a better workflow with everyone involved on the project
      7. creates a shared vocabulary
      8. makes things easier to test
      9. useful reference
      10. future-friendly interaction

 

“Consistency – when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience” – Jakob Nielson

All companies should really invest in design patterns. It may require the proper education to management, but it ultimately saves time and money and creates a better, usable product for customers.

Presentation by Brad Frost – btconfBER2015

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s