Creating a UI Style Guide for Better UX

Listen to the audio version of this article

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.

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.

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.

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.

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.”

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.”

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.

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.

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.

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.