Tagdesign systems

🔖 Design systems (archive)

Design systems aren’t just the what of patterns and components, but also the how of putting these elements togethers. Along with patterns, the design systems should also explain:

  • the problem being solved
  • when the pattern should be used
  • when the pattern should not be used

🔖 Atomic Design (archive)

Atomic design is a strategy for creating design systems by breaking elements into distinct levels:

  • Atoms are the smallest building blocks, that is HTML elements (like inputs, buttons and headings)
  • Molecules combine atoms together to build something useful (like a form or a card)
  • Organisms combine molecules to create distinct sections of an interface (like the header or the product grid)

These are combined to make the actual designs in the form of:

  • Templates are organisms stitched together to form pages.
  • Pages are specific instances of templates.

This system allows you to design by assembling rather than deconstructing which means you don’t have to cherry pick patterns later.