Clarifying our “Style Guide” Nomenclature

There are a lot of varying tools for creating a standardized, consistent UI. It gets confusing and I think they deserve some clarity in order to simplify how designers talk about these tools, but to also highlight the key differentiators they each have. This is how I differentiate the tools:

Interface Inventory

This is simply a visual inventory of all current UI patterns that exist within the interface. It is used to identify inconsistencies within the current designs. Typically these are done at the beginning stages of a redesign, and are excellent tools in communicating the business need for creating a consistent design language.

Style Tiles

These are “mood boards” for UI design. They are done in the initial stages of design in order to identify brand, aesthetic, relationships, and overall mood.

Element Collage

This is a more extensive artifact than a Style Tile, but with similar goals and purpose. It is used to refine the concept and decisions going into the design, prior to standardization. They consist of nearly every (or all the most common) UI elements intended to be used within the design.

Visual Design Language

This is the basic foundational principles, theories, and core elements that are used to create a systematic design. Logical rules are created to standardize a comprehensive way to apply design elements throughout the interface. Core elements typically include color, typography, spacing/sizing, imagery, iconography, and border treatments.

Pattern Library

This is a library of standardized UI patterns. They are the final designs, and can be delivered in the form of a repository of design files, or a symbol library/UI kit. It is the resource for designers to build from.

CSS Framework

This is the front-end code and production-ready design assets. The CSS framework is referenced and consumed by the product(s). It is a modular, scalable, and extensible tool that fosters rapid development and typically confirms to a Continuous Integration/Continuous Delivery development environment.

Style Guide

This is the documentation resource for the design system. Since the CSS Framework is purely code and assets, and the pattern library is primarily design resources, the style guide is a site created to demonstrate the UI patterns with references & documentation to aid in implementation and usage.

Design System

The entirety of the standardized UI patterns, framework, assets, and documentation, as well as the processes and people involved. It is the ecosystem that drives and supports the unified evolution of the product(s).


That’s how I see it, and I hope it helps you too! I’m curious to hear how others clarify these tools when trying to sell/explain them to clients or coworkers. If I’ve missed anything please comment about it!

Thanks!

Please ❤ recommend