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:
- Some interface problems 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 reasons for decisions based on real research.
The original idea for this site came from A Pattern Language2, a 1977 book focused on architecture, building and planning, which describes over 250 ‘patterns’: forms which fit specific contexts, or to put it another way, solutions to design problems. Examples include: ‘Beer hall’, ‘Positive outdoor space’ and ‘Light on two sides of every room’.
Whereas the book focuses on the physical world, my original aim with this site is was focus on those patterns that appear on the web; these often borrow the word ‘pattern’ (see Patterns on the GOV.UK design system), but are more commonly called components, hence ‘the component gallery’ — unlike a component library, most of these components aren’t ready to use off-the-shelf, but they’ll hopefully inspire you to design your own solution to the problem you’re working to solve.
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…
If you notice any mistakes, have suggestions for improvements, or would like to give me money, please contact me on Twitter.
- I don’t care what Airbnb is doing. (And neither should you.) — Stephen Hay↩
- Christopher Alexander, Sara Ishikawa, Murray Silverstein with Ingrid King, Shlomo Angel and Max Jacobsen 1977, Oxford University Press↩