My work methodology
A design system is a strategy for web design and development, in particular for large and complex digital products or products that will rapidly scale. More than a body of knowledge, a design system is a way of thinking that allows designers and developers to work better together, improves communication between teams, and helps organize components in complex interfaces.
As the digital landscape rapidly evolves, we can rely on design systems to future-proof our digital products, increasing collaboration and exchange in the design-development workflow.
At it's core, a design system shares decision-making knowledge, improving the ability of individual team members to make consistent informed decisions throughout the digital experience.
Some of that decision-making knowledge might include:
- Background information that provides transparency and context about past design decisions.
- The agreed upon basis for the project's user interface design: color palettes, space variables, and established patterns among others.
- Known limitations that will affect future design decisions, for example the performance budget allocated for fonts and visual assets.
Living style guide
Another point of reference within the design system is a living style guide, which is a well-documented user interface library in which all existing components can be seen at a glance (both in isolation and in varied configurations). As the digital experience changes, so should the living style guide also adapt.
Being a single source of truth, it helps avoid inconsistencies with common styles (e.g. forms, buttons), UX patterns, and animations to name a few.
Components are organized and categorized using Brad Frost's Atomic Design model, which borrows Chemistry concepts: simple components are atoms, those come together to form molecules–more complex components, and so on.
As the components in the existing user interface are categorized, they are also refined to scale: the user interface is re-created in an abstract and flexible manner, so that it can be reused with different kinds of content, and arranged with other components in countless configurations.
When user interfaces are designed to scale, there is more focus on detailing each of the components throughout time, increasing the long-term quality of the interface, and helping businesses release new features more quickly.