The Component Gallery is a collection of interface components from real-world design systems. I created it to help with some of the problems that I experience every day as a front-end developer:
- There are some interface problems that have already been solved: there’s no need to reinvent the wheel every time you start a new project, when the hard work has already been done by someone else.
- Naming things is hard: If you don’t know what to call a thing, looking at what other people are calling similar things is a great place to start.
Caveat: Don’t assume that an opinion or technique is correct, just because it’s popular. Be wary of information cascades and, if you can, always base your decisions on research. Definitely don’t just copy what everyone else is doing.1 There’s lots of research out there already—look for design systems that give reasoning for decisions based on real research.
A component is a single, reusable chunk of a user interface.
“Components is a damn fine way to build a website”
– Chris Coyier
Designing interfaces around components, specifically components from a design system, has a number of benefits:
- Consistency: Using a design system can help maintain a consistent "look and feel" across multiple interfaces.
- Reusability: Instead of building something from scratch, reusing something that's already been tried, tested, and proven to work can speed up development.
- A common language: Design systems can help all teams involved in a project communicate effectively, using a shared set of names for components that everyone understands.
Yes, a component can contain other components, in fact this nesting of components to build interfaces is fundamental to methodologies such as Atomic Design.
A successful design system is way more than a website showing a few components, even if components often play an important part. A good design system is a constantly evolving set of shared practices, covering a wide range of topics including: colour palettes, typography, processes, accessibility, tooling and 'tone of voice'. Design systems also require a human element: without people using and contributing to the system, it will fail. The components themselves should be supported by guidance on how, when, and when not to use a component.
Absolutely not: component-based User-Interface design was around long before websites existed; the examples on this website have collected from the web because it's the easiest place to find public design systems. There also exist design systems designed primarily for mobile or desktop applications, although by utilising frameworks such as React Native and Electron, components can be cross-platform with the same components used on a website, a mobile app or a desktop app.
There are lots of great resources to help you get started; here are just a few:
- styleguides.ui is a collection of website style guide articles, books, podcasts, talks, tools, and examples
- Awesome Design Systems is a list of design systems with a guide to their features
- Design Systems Repo is a collection of design systems and design system resources
- Design Systems by Alla Kholmatova
- Atomic Design by Brad Frost Free
- Inclusive Components by Heydon Pickering
- Programming Design Systems by Rune Madsen Free
- Building Design Systems by Sarrah Vesselov and Taurie Davis
- Style Guide podcast, hosted by Anna Debenham and Brad Frost
- The Design Systems Podcast, hosted by Chris Strahl
to be continued…