The foundation upon which branding guidelines, visual styles, pattern libraries, and code libraries can be defined and maintained.
Design systems are helpful for designers, developers, and content creators to ensure a visual consistency across multiple products from a single brand. They can be small or large and include different types of client deliverables, such as style guides and pattern libraries. Some common elements that might be included within a design system:
- Logos (e.g. different versions/formats/layouts/etc)
- Typography
- Colors
- Visual Imagery (e.g. photography, illustration)
- UI Design Patterns (e.g. buttons, form elements, icons, symbols, etc.)
- and much more…
A screenshot from a sample design system created using Adobe XD
Related Resources and Reading
- Blog Posts/Aricles:
- Design Systems 101 by NN/g
- A Comprehensive Guide to Design Systems by Will Fanguy
- Design Systems Handbook
- Everything you need to know about Design Systems by Audrey Hacq
- What is a Design System? by Sylvee L.
- How To Make And Maintain Atomic Design Systems With Pattern Lab 2 by Brad Frost
- Designing Systems: Create design systems, not pages (Chapter 1 from Brad Frost’s Atomic Design Book)
- Design Systems vs. Pattern Libraries vs. Style Guides – What’s the Difference? by Zack Rutherford
- Books:
- Tools
- Collections of Examples:
- A collected set of Awesome Design Systems
- Style guides examples from styleguides.io
- Specific Examples:
- The 1976 NASA Graphics Standards Manual
- Mailchimp’s content style guide
- IBM’s Carbon design system
- Google’s Material design system
Go Further
- Create your own design system using your preferred design software application (e.g. Adobe XD, Illustrator, Photoshop, Sketch, etc.) or via code.
Author Notes
This was written specifically to help aspiring web designers as they aim to:
- Define and plan for client-based projects in a clear, concise, and organized manner.
- Apply best practices for user centered design using user research methods and guidelines.
- Communicate project-related goals, deliverables, issues, and concerns to both clients and internal team members (co-workers).