Design System Roadmap¶
- Roadmap: https://roadmap.sh/design-system
1. Understand the Basics¶
- 1.1 What is a Design System?
- 1.2 Need of Design System
- 1.3 Design System vs Component Library
- 1.4 What is Atomic Design
- 1.5 Stakeholders Involved in Building
- 1.6 Design System Examples
2. Terminology¶
- 2.1 Component
- 2.2 Component Library
- 2.3 Design Language
- 2.4 Governance
- 2.5 Guidelines
- 2.6 Pattern
- 2.7 Pilot
- 2.8 Token
- 2.9 UI Kit
3. Making a Design System¶
- 3.1 Making it from Scratch
- 3.2 Making it from Existing Design
3.3 Performing a Visual Audit¶
- 3.3.1 Identify Existing Design Process
3.4 Identify Design Elements¶
- 3.4.1 Icons
- 3.4.2 Sizing
- 3.4.3 Visual Forms
- 3.4.4 Color
- 3.4.5 Spaces
- 3.4.6 Typography
3.5 Identify Components¶
- 3.5.1 Avatar
- 3.5.2 Banners
- 3.5.3 Badges
- 3.5.4 Cards
- 3.5.5 Forms
- 3.5.6 Buttons
- 3.5.7 Dropdowns
- 3.5.8 ...other
4. Existing Design Analysis¶
- 4.1 If building from existing design
- 4.2 A/B Tests & Experiments
- 4.3 Regional Requirements
- 4.4 Documentation
5. Creating Design Language¶
5.1 Brand¶
- 5.1.1 Writing Guidelines
- 5.1.2 Tone of Voice
- 5.1.3 Terminology
- 5.1.4 Design Principles
- 5.1.5 Vision
5.2 Logo¶
- 5.2.1 Monochrome Version
- 5.2.2 Small Use Guidance
- 5.2.3 Placement Guidance
- 5.2.4 Usage Guidance
- 5.2.5 File Formats
5.3 Guidelines¶
- 5.3.1 Accessibility
- 5.3.2 User Onboarding
- 5.3.3 Microcopy Guidelines
6. Defining Design Tokens¶
6.1 Colors¶
- 6.1.1 Accessibility
- 6.1.2 Functional Colors
- 6.1.3 Dark Mode
- 6.1.4 Guidelines
6.2 Layout¶
- 6.2.1 Units
- 6.2.2 Grid
- 6.2.3 Breakpoints
- 6.2.4 Spacking
6.3 Typography¶
- 6.3.1 Responsiveness
- 6.3.2 Grid Relation
- 6.3.3 Readability
- 6.3.4 Performance
- 6.3.5 Guidelines
6.4 Iconography¶
- 6.4.1 Accessibility
- 6.4.2 Style
- 6.4.3 Naming
- 6.4.4 Grid Relation
- 6.4.5 Sizes
- 6.4.6 Keywords
- 6.4.7 Reserved Icons
- 6.4.8 Guidelines
7. Creating Core Components¶
- 7.1 Avatar
- 7.2 Banner
- 7.3 Badge
- 7.4 Button
- 7.5 Card
- 7.6 Carousel
- 7.7 Dropdown
- 7.8 Icon
- 7.9 Select
- 7.10 Textarea
- 7.11 Input Text
- 7.12 Input Checkbox
- 7.13 Input Radio
- 7.14 Input Switch
- 7.15 List
- 7.16 Loading Indicator
- 7.17 Modal
- 7.18 Tabs
- 7.19 Toast
- 7.20 Tooltip
8. Tooling¶
8.1 Design¶
- 8.1.1 Design Editor
- 8.1.2 Plugins
- 8.1.3 Version Control
- 8.1.4 Contribution Guidelines
8.2 Development¶
- 8.2.1 Component Catalog
- 8.2.2 Documentation
- 8.2.3 Code Style
- 8.2.4 Unit Testing
- 8.2.5 Accessibility Testing
- 8.2.6 Semantic Versioning
- 8.2.7 Release Strategy
- 8.2.8 Commit Guidelines
- 8.2.9 PR Templates
- 8.2.10 Contribution Guidelines
9. Project Management¶
9.1 Task Management¶
- 9.1.1 Roadmap
- 9.1.2 Milestones
- 9.1.3 Ticketing
9.2 Analytics¶
- 9.2.1 Component Analytics
- 9.2.2 Logging
- 9.2.3 Tooling Analytics
- 9.2.4 Service and Health Metrics
9.3 Communications¶
- 9.3.1 Community Meetings
- 9.3.2 Communication Channel
- 9.3.3 Open Hours
- 9.3.4 FAQs