Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atomic Design. Eh?

Atomic Design. Eh?

A modular design and front-end approach for the masses?
Try Frontify on https://frontify.com

Roger Dudler

May 16, 2015
Tweet

More Decks by Roger Dudler

Other Decks in Design

Transcript

  1. What is it about? Modular Design Best Practice or a

    way to optimise your workflow, maintainability and quality in design and front-end.
  2. Why do we care? Design and front-end carries a whole

    lot of complexity these days. We need best practices and a common language for the team to commit to and work with.
  3. Atomic Design Overview Atom Molecule Organism Template Page The atomic

    design concept introduces the following terms
  4. Atomic Design Overview Atom Molecule Organism Template Page Containers Building

    Blocks You can group them into the building blocks and containers
  5. Molecule The “bigger” reusable thing built with the “smallest” things

    Examples are Search Box, Card Listing, Button Group, etc.
  6. Organism A “biggest” thing built with the “smallest” and “bigger”

    things Examples are Headers, Footers, Flight Search, etc.
  7. Pattern Libraries Atom Molecule Organism Template Page Building UI or

    pattern libraries is easier with a system like Atomic Design.
  8. Pattern Libraries Atom Molecule Organism Template Page And if you

    strive for a complete library, add organisms as well