UX Design Systems
Attractive things are considered to work better - JND
A design system enumerates the standards and practices that comprise the UX for consumers of your brand. It expresses the nomenclature every team should use to ensure communication that breaks down silos.
| Elements | Notes |
|---|---|
| Golden rules | |
| Key principles | |
| Clarity | |
| Familiarity | |
| User Control | |
| Hierarchy | |
| Negative space | |
| Flexibility | |
| Accessibility |
There are basic rules about colors, typography, spacing, and so on. All of these core principles become the basis for larger components.
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
Checklist
Design System Checklist
- Design token architecture, automation, delivery
- Design system tooling & automation
- Design operations & front-end operations in general
First gather context on project needs and challenges.
Who are the consumers of the design system?
Useful context: teams, their UI stack, OS/platform, design tools they use.
Who contributes to the design system?
Useful context:
- team model
- roles
- full-time contributors
- part-time contributors
- external contributors
What constitutes your design system?
Examples: UI Kit(s), components, code examples, tutorials, design tokens, content guidelines, color palettes, logos, illustrations, … and where they are hosted: website/wiki/other, repository structure (monorepo, alongside the product, separate repo(s)), design tools, content management system…
What's on your roadmap?
Examples: more components, onboarding content, content guidelines, performance improvements, dependency updates, automation, accessibility guidelines…
What's out of scope for the design system that’s useful to mention here?
Examples: complex components that should be built by product teams, accessibility guidelines, iOS, Android, small screens, old browser support, multi-brand support…
What does success look like in 3 months, 6 months, a year?
Examples: adoption by products X and Y, shipping a new design language to production (powered by the design system), one-off variants of components in the product refactored to use existing design system components, all new projects and features use the design system…
How will you know you're successful?
Examples: metrics, satisfaction surveys, adoption, production JS bundle size…
How are changes to the design system reviewed and published?
Useful context: design reviews, requirement gathering, manual browser/device testing (what kinds?), design and code versioning strategy (SemVer), visual regression & accessibility automated testing, approval process, testing strategy, package hosting (npm…), content publishing workflow, and any other delivery details…
How do people using the design system get help?
Examples: FAQ, Slack, GitHub issues, office hours, Discourse…