1. Design Systems

Design Patterns

To extend the analogy with language, functional patterns are a bit like nouns or verbs - they are concrete, actionable parts of the interface; whereas perceptual patterns are similar to adjectives - they are descriptive.

For example, a button is a module with a clear function: allow users to submit an action. But the typographic style in the label of the button, its shape, background color, padding, interactive states and transitions are not modules. They are styles; they describe what kind of button it is. From a front-end perspective, modules always have a basis in HTML, and perceptual patterns are typically CSS properties.

A design system contains many other kinds of patterns; userflows (such as completion of forms with errors and success messages), domain-oriented design patterns (like learning patterns for EdTech systems, and e-commerce patterns), and persuasive UX patterns.

Shared Language

Language is fundamental to collaboration. If you work in a team, your design language needs to be shared among the people involved in the creation of the product. Without a shared language, a group of people can't create effectively together - each person will have a different mental model of what they're trying to achieve.

Having a shared language would mean that we have the same approach to naming interface elements and defining design patterns, or that the same names are used in design files and front-end architecture.

What Makes An Effective Design System

A design system can be considered effective when it combines:

  1. Cost-effectiveness in the design process
  2. Efficiency
  3. Satisfaction of the user experience in relation to the product's purpose.