Creating a UI Style Guide for Better UX
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…
