Ensure a Cohesive Product Design and User Experience

In 1976, Johnny Cash released One Piece at a Time, a song that tells the story of a Detroit auto worker who spends twenty years collecting Cadillac parts stolen from the assembly line.

Unfortunately, when the worker begins building his bootleg Cadillac, he finds that many parts are incompatible because key design features have changed over the years. With a little ingenuity, the custom car comes together, but it’s an unsightly mishmash that inspires ridicule wherever it goes.

“The back end looked kinda funny too
But we put it together and when we got through
Well, that’s when we noticed that we only had one tail-fin.”

Examples of bad product design due to a lack of a UI style guide

Much like Johnny Cash's custom Cadillac, digital products without UI Style Guides are susceptible to mismatched parts and disjointed design.

Designers and developers of today’s digital experiences face a similar challenge. The passage of time is a formidable foe capable of wreaking havoc on the continuity of digital products. With time, team members come and go, trends evolve, and features change. Plus, the rapid pace of our modern day digital landscape means that product innovation occurs in quarters, not years.

If a business or design team doesn’t have a shared record that documents the intended look and feel a product, visual and experiential inconsistencies will arise, users will grow frustrated, and the brand’s reputation will take a hit.

UI Style Guides are a design and development tool that brings cohesion to a digital product’s user interface and experience. At their core, they:

  • Record all of the design elements and interactions that occur within a product
  • List crucial UI components such as buttons, typography, color, navigation menus, etc.
  • Document important UX components like hover states, dropdown fills, animations, etc.
  • Contain live elements and code snippets for developers to reference and use

Before we take a closer look at how to assemble an expert level UI Style Guide, it’s important to understand that there isn’t a one-size-fits-all approach. The value of style guides extends beyond big brands with large product teams. Mid to small sized businesses seeking a consistent digital experience also benefit when UI Style Guides are custom-made to their specific needs.

Include These Crucial Design Components in UI Style Guides

Designers familiar with brand identity guidelines shouldn’t have a problem transitioning to UI Style Guides because there’s ample overlap with many of the crucial design components that must be included.

Pro Tip: Only document relevant design components. Extraneous information makes UI Style Guides bloated and hard to work with.

Typography Scheme

Typography is one of the most common interface design elements, so it’s not enough to merely list the names of typefaces used in a product. Clear instructions should be given for Titles, Subtitles, Headings (H1, H2, H3), Body Text, and Captions.

Typography when creating a ui style guide

The 'Typography' section of Firefox's UI Style Guide gives detailed instructions for creating readable text with a clear design hierarchy.

Additionally, font sizes should be provided, weights indicated, and styles defined. Line height and kerning are also needed, and it’s a good idea to single out a go-to font to be used when special circumstances arise.

Responsive Layouts

When digital products are designed around responsive grid systems, UI Style Guides must address interface layouts across screen sizes. This means including notes and examples for spacing, padding, and placement. It’s also helpful to show overlays of the product’s grid system in relation to different screen sizes.

The big goal here is providing enough context to prevent the need for one-off screen designs. Over time, these add up and undermine a digital product’s cohesion.

Color Palette

One of the quickest ways to wreck an interface is inconsistent color use, so color combinations need to be clearly defined. Listing colors and their values (HEX, UIColor) is a good start, but specific pairings and use examples should also be given.

Branding document UX and UI style guide

In addition to a large color palette that includes a range of lighter secondary colors, IBM's UI Style Guide demonstrates how to apply specific schemes (like this triadic example) to its products.

If the UI Style Guide is referencing a set of brand identity guidelines, check to see if a secondary scheme of lighter accent colors is available. If not, create your own and document. A selection of gray values is also useful.

Buttons

Nearly every interface includes buttons, so take time to document their sizes, styles, colors, placement, spacing, and typographic elements. If various buttons are used in different contexts, make that clear as well.

Additional UI Components That May Be Needed

  • Iconography
  • Tooltips and popovers
  • Modals
  • Form elements
  • Data Tables
  • Navigation menus
  • Charts and data visualizations
  • Tabs
  • On-off switches
  • Dialogs
  • Content grid lists
  • Vertical lists
  • Toolbars
  • Date and time pickers
  • Loading indicators
  • Checkboxes
  • Alerts
  • Dropdown menus
  • Sliders
  • Steppers
  • Pagination

Organize and Contextualize Design Instructions

In addition to must-have UI components, there are a number of practical features that make UI Style Guides easier for businesses and design teams to reference, navigate, and implement.

Table of Contents

A well organized and clearly marked table of contents is a simple way to help everyone quickly find what’s inside the document.

Context Notes

It’s impossible to predict every problematic design decision that may arise over a product’s lifespan, so articulating the design rationale behind often-used UI components can make unforeseen scenarios easier to resolve.

For example:

“At its core, our product is about showcasing the best architecture images from around the globe. For that reason, the layout of our interface prioritizes big, splashy images over text. Whenever possible, make images the focal point of our product.”

Spacing and Positioning Instructions

Spacing and positioning are often covered in the ‘Responsive Layouts’ section. Depending on the complexity of the digital product, instructions may consist of general “rules of thumb” or be quite granular.

UI style guide spacing and positioning

Here, Atlassian clarifies spacing between lines of text and buttons.

Do’s and Don’ts

Oftentimes, it can be helpful to clearly outline design Do’s and Don’ts. For instance:

  • Do use the white wordmark version of our company logo in the interface footer.”
  • Don’t use alternate color versions of our company wordmark on black backgrounds.”

User interface design principles to include when creating a ui style guide

In Apple's UI Style Guide, Do's and Don'ts are clearly explained with illustrations and context notes.

Do’s and Don’ts prevent debate and save design and development time, but it’s always best to provide a note of context like this:

“This list of Do’s and Don’ts covers a wide range of important design decisions, but it does not take into account every possible misuse of our product’s design elements. With this in mind, use best judgment when uncertainty arises, and make choices that accurately reflect the overall look and feel of our product.”

Live Elements and Code Snippets

Brand identity guidelines are typically static documents, but UI Style Guides include live elements that operate as they would in the final product—meaning buttons behave like buttons, dropdown menus actually drop down, and animations are animated.

Code snippets allow developers to quickly copy and paste the code of live elements into a product’s back-end.

Make UI Style Guides Easily Accessible for Design Teams

Now that we understand how to create a style guide and the components and features included in a UI Style Guide, we shift our attention to sharing and communication. More specifically, what are the options for housing UI Style Guides?

Traditionally, UI Style Guides have existed as web pages. This provides designers and developers with easy access and allows design elements to function as they would in-product.

More recently, a handful of cloud-based platforms have emerged, allowing teams to design, prototype, and test products collaboratively. These same platforms are also capable of housing UI Style Guides and enabling team members to exchange ongoing feedback and ideas.

Let’s see how a few of these platforms describe their approach to UI Style Guides.

Figma

“Create design systems with linked UI components the whole team can use. Get updates when changes are made to shared components”

Phase

“Libraries how they always should have been: Colors, Properties, & Elements…even transition timing — everything in a component now. Edit in place—everything is a master. Override anything you don’t need, per-instance.”

UI pattern library

Phase is an up-and-coming digital design tool that promises an intuitive workflow and component library.

InVision

“All brand and UX components—including usage documentation—are managed in a single place. Changes sync to the whole team, and designers can switch to the latest version or roll back updates at any time.”

Material.io

“Make your own Material theme and create a branded symbol library by applying style changes to color, shape, and typography. Share, upload, and present design iterations in Gallery. Then use Inspect Mode to access developer documentation.”

UI Style Guides Should Be Easy to Use

When assembling UI Style Guides, communication can’t be taken for granted. Product teams are made up of people from different disciplines, cultural backgrounds, and professional experiences. Use these principles to ensure clarity and ease of use.

Simple Layouts

UI Style Guides require clean, uncluttered screen layouts. Each screen should be well organized, clearly labeled, and highly legible. There’s no benefit in overloading screens with visual information, so aim for arrangements that are both minimal and spacious.

Living UX style guide

Material Design, Google's UI Style Guide, is packed with information but easy to digest thanks to a simple, uncluttered layout.

Concise Instructions

Keep instructions short and sweet. Avoid lengthy paragraphs, and use bullet points. Where possible, demonstrate with visuals over words.

Informative Use Scenarios

Wondering when to use this style of slider over that one? ‘Use scenarios’ resolve this kind of confusion. Again, visuals are stronger than words here, so provide examples that clearly demonstrate both the scenario and the proper path forward.

UI design guidelines in a UI style guide

Salesforce supports their 'Data Entry' use scenarios with simple graphics.

Relevant Version Histories

Digital products are updated frequently. As product teams look to refine every last interface detail, it’s important to keep an ongoing record of how design components have evolved. Use discretion here—for smaller businesses and product teams, maintaining an extensive library of version histories may be impractical.

UI Style Guides Are a Valuable Resource and Powerful Design Tool

Contemporary design and development teams value efficiency and multidisciplinary collaboration—as evidenced by the design language systems being touted by big brands like MailChimp, Google, and Salesforce.

Design language systems allow diverse teams working on sophisticated digital products to communicate using a standardized visual language. UI Style Guides are woven into the fabric of design language systems and serve as a tool that can be relied on for quick iteration and consistent digital experiences.

Creating a UI style guide, one can use code snippets.

MailChimp and other big brands are leading a product design revolution with their design language systems.

At the same time, design is not a pursuit reserved only for large companies. A diverse array of product teams and digital projects stand to benefit from well-constructed UI Style Guides, but resources (financial, time, and talent) vary from business to business.

For this reason, UI Style Guides are most useful when they are tailored to the needs of individual businesses and design teams. The highest aim of every UI Style Guide is a balance of clarity and practicality that leads to consistently delightful user experiences.

• • •

Further reading on the Toptal Design Blog:

Understanding the Basics

What is a branding style guide?

A branding style guide is a document that contains all of a company’s visual design elements (logo, color, typography, iconography, etc.). A branding style guide provides rules of thumb and context notes to help designers achieve brand consistency when creating assets for print, web, mobile, etc.

About the author

Micah Bowers, United States
member since January 3, 2016
Micah is a brand designer and illustrator who aspires to elevate design to the level of a story. To reach people and forge lasting engagement, Micah believes that design must identify a need, stir a desire for change, and shed light on a path that is uniquely helpful, hopeful, and human. [click to continue...]
Hiring? Meet the Top 10 Freelance UI Designers for Hire in December 2018

Comments

AKRAM ALKAWAMLEH
when creating a web page be insure to pick 3 matched colors at max because more colors will be unpleasant for the eyes and may disturb the readers from the contents.
Tech Chacho(@techchacho)
hmm oka :)
floydian ^
Do you have an example of Style guide document?
KL
There are always so many articles like this out there. I love this one particularly as far as the points it makes and the concepts and ideals. But like every other article out there on the topic, it offers nothing in the way of HOW to achieve this or how to communicate these ideals and business rules. So many articles telling us what we SHOULD be doing...but none with any real or effective means of communicating it. Why? Because it is incredibly difficult and no one has come up with a clean and effective method. There are some good ones, but they require a team of designer/devs to build a living style guide. No company allows for this time! Most reality is that companies are building tools far before designers even get past their discovery phase. We definitely are still in the infancy of UX and UI when it comes to respect paid to best practices. There is absolutely no real commitment by companies to allot for time to build these proper foundations. Until someone builds an effective solution and not just say "y'all should write down your design specs," we have nothing more than an article to which after wasting our energy and time reading we can say "well no shit sherlock!"
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great articles & insights.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Micah Bowers
Designer
Micah is a brand designer and illustrator who aspires to elevate design to the level of a story. To reach people and forge lasting engagement, Micah believes that design must identify a need, stir a desire for change, and shed light on a path that is uniquely helpful, hopeful, and human.