In 5 Tips for Better UI UX Design we briefly discussed UI design patterns. In this post we’ll amplify this discussion by defining and distinguishing design language systems, design principles, UI design patterns, and components.
Design Language System: The Basis for UI Design Patterns
Airbnb VP Alex Schleifer has written a powerful piece about design language: The Way We Build How rethinking the Airbnb app changed the way we approach design
In this article, he argues that software design remains rooted in traditional methods and has fallen behind engineers who have built better tools and processes. The result? “Design teams can often struggle to reach a cadence that balances the creative process and cycles of continuous innovation.”
For Airbnb, the answer was to review and revamp the design process. Embarking on an ambitious re-design of the Airbnb mobile app led Schleifer’s team to develop a new Design Language System (DLS): “The DLS is a collection of components defined by shared principles and patterns. This allows for rapid iteration using a shared vocabulary across design, engineering, and other disciplines.”
In The system always kicks back Shopify UX Director Kyle Peat deftly defines design language: “Our design system isn’t our UI kit or our style guide. It’s the shared language we have when we talk about our work.” Peat continues: “A language is something we use to communicate with each other. But it’s not rigid. It’s not our records of those words — the dictionaries — that matter. It’s the meaning behind those words.”
Tools are like dictionaries, explains Peat. These tools are essential, but they are not the language. The language is the shared meaning.
The Principles that Drive UI Design Patterns
In the design space, principles are the key to articulating this shared meaning. That’s why it’s essential for organizations to devise design principles that everyone understands and can define.
For example, as Schleifer explains, Airbnb’s core design principles include unified, universal, iconic, and conversational: “Universal and Unified define the system’s approach we apply when defining patterns. Is it part of a greater whole? Does it work across devices? Iconic and Conversational help define the character of the system — its unique human qualities that tie back to our community and brand values.”
Naturally, design principles vary from company to company. Facebook’s principles include universal, human, clean and consistent. Google, Facebook, and Airbnb are design leaders but certainly not alone in their emphasis on design principles. Oracle, IBM, Salesforce, and others are harnessing the power of design principles.
UI Design Patterns
If design language refers to shared meaning and principles articulate this meaning, what the heck are design patterns?
In Patterns Do Not Equal Components, author Nathan Curtis defines UI design patters by emphasizing the differences between patterns and components.
- Components are designed and built in code, ready for reuse by plopping in a sketch file or HTML page, patterns are abstract, principled guidance applied as you design and build.
- Components are an interface chunk to be added to an overall layout whereas patterns may be UI or a variety of other things, like a behavior, flow, application motif or something else.
- Components are how something DOES work, inclusive of tradeoffs and constraints realized through a build process. Patterns describe how something SHOULD work under preferred conditions and suggestions of how to cope with tradeoffs.
In short, components are code-based, a piece of the UI, and reflect how something actually works. Patterns, and this is the essential point, describe how something should work.
The goal of UI design patterns is not to describe a UI in its current state. The latter is best represented by help files and related technical documentation. Rather, UI Patterns provide guidance during the design process. These guidelines are based on industry best practices. For example, error messages should appear above or next to where the error occurred. The basis for this pattern is the Gestlat principle of proximity.
Maintaining UI Design Patterns
Anyone who has created UI design patterns knows how quickly they can fall off the map. Initially, enthusiasm is high, but without a continued push designers and developers begin going their own way. Before anyone realizes what’s happened, the patterns are virtual dust, and inconsistent UI’s abound.
The best way to meet this challenge is two-fold:
- Establish a governance board with full enforcement authority. The board should include business stakeholders, designers, developers, and have at least one executive sponsor. All serious disputes about design patterns and the underlying principles should go through this board.
- Obliterate “I like” or “It doesn’t look right,” or any similarly vague and arbitrary statement about why my design shouldn’t be constrained certain by design principles. Instead, any concern about a proposed design should be framed as follows: “The proposed design will not be legible on a smartphone. It violates our principle that all designs must work across all devices.” Then, the design team can assess the concern. Does the design render properly on mobile devices? This approach lends objectivity and professionals to the process and avoids emotional and ultimately pointless discussions based on highly subjective opinions.
UI and UX design are challenging under the best of circumstances. Devoting time to a design language to convey shared understanding, articulating this understanding with sound principles, and deriving UI design patterns from these principles will go a long way to better design and a better user experience.