2.9 Use a design system for interface consistency
Keep the components of the project as consistent and clear as possible by using a design system to organize reusable features.
Criteria
- Design system:
Use a formal design system when a project is large or has many contributors to improve performance, consistency, and sustainability. Choose a system based on web standards with reusable components and ensure your project only loads the components actually needed on the front end. Whether using a formal design system or not, always follow familiar design patterns and conventions.- 4 Ways to Make Your Code More Reusable
- A Brief History of Design Systems. Part 1
- A Brief History of Design Systems. Part 2
- AFNOR Spec 5.3.5 (French)
- Dark Mode Can Improve Text Readability — But Not for Everyone
- Dark mode can save battery, but only if your device has an OLED screen
- Design patterns
- Design Systems Checklist
- Design System Ecosystem
- Design System Gallery
- Design System Guide
- Design System Metrics
- Design System ROI Calculator
- The Digital Playbook: A Crucial Counterpart To Your Design System
- Everything you need to know about Design Systems
- Google: Here’s why dark mode massively extends your OLED phone’s battery life
- GPF – General Policy Framework (PDF) – 4.14 – UX and UI (Dark Patterns)
- GPF – General Policy Framework (PDF) – 3.1 – Architecture (Impact Reduction)
- GR491 – 7-3047 – Systemic Approach
- How much is a design system worth?
- How to Write Clean, Reusable Code
- Laws Of UX
- Lowww Carbon
- Minimal Gallery
- OpQuast – 133 – Links of the same nature have identical colors, shapes and behaviors on all pages.
- Patterns
- Patterns.dev
- Public design systems are worth it
- The Anatomy of a Design System
- The dark side of green web design
- United Nations SDGS – Goal 4 – Education
- United Nations SDGS – Goal 12 – Consumption & Production
- What is a Design System?
- Why digital isn’t always greener or fairer
- GR491 – 5-3029 – Visual Soberness
- GreenIT – 005 – Simple, clean and friendly web design
- How UX design can help tackle climate change
Benefits
- Accessibility
Using a design system with accessible components will improve access to information for people with disabilities. Building design features that integrate accessibility from the start ensures everyone is always included. - Conversion
Using design systems supports consistent user interfaces. This improves user trust because individuals will recognize familiar components and know how to use them. This can improve conversion rates as it will reduce frustration, abandonment, and possible complaints. - Economic
Using standardized components and avoiding redundancy can reduce development time and the associated costs. Familiarity makes the experience easier for users, reducing bounce rates. - Environment
Building using recognized design components will reduce the amount of time users spend trying to perform a task. The less time users spend achieving their goals, the lower their energy usage and emissions. - Performance
Building design systems using standardized components reduces the need for repeat coding. This reduces developer coding time and can improve performance. Overall, sustainable patterns reduce emissions.
GRI
- Materials: Medium
- Energy: Low
- Water: Medium
- Emissions: Low