Design systems are interdisciplinary by nature. They are built and consumed by designers and developers, therefore it is important for common terminologies to exist to support the communication between these two disciplines and other related actors.
Note: while some of the concepts are explained in a way that is more related to the context of web development, most of them are applicable to other contexts as well.
In this post we will present some key concepts from design and development, explain their meaning in the context of design systems and point to any ambiguity that may exist.
Example of Material Design foundations
Every design system is built on top of a set of fundamental rules which are shared across components or other parts. These rules can relate to visual design (e.g. animation, colors, typography) or define more abstract principles such as brand personality or writing style.
Example of Kor UI button component
Perhaps the most used term, components are individual units (such as buttons, inputs, tabs) that have defined appearances and interaction paradigms. Components can have different variations and be customized through APIs (Application Programming Interfaces).
Example of Carbon Design login pattern
Patterns define how different components can be combined in a certain way to serve specific user goals that are often repeated across screens or applications. For example, input fields, icons and buttons can be combined in a certain way to serve the goal of signing into an application. Examples of patterns are forms, navigation and onboarding.
Note: UX patterns should not be mistaken with ‘design patterns’ in software engineering, which are also common ways of solving problems but specifically related to the context of engineering.
#ux #design #design-systems #web-development #frontend #software-development #design-systems-glossary #latest-tech-stories