Atomic Design. Eh?

Atomic Design. Eh?

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

2c3ee78eeca048cb5d934e96dedcd977?s=128

Roger Dudler

May 16, 2015
Tweet

Transcript

  1. Atomic Design Eh? A modular design and front-end approach for

    the masses?
  2. What is it about? Modular Design Best Practice or a

    way to optimise your workflow, maintainability and quality in design and front-end.
  3. 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.
  4. Atomic Design Overview Atom Molecule Organism Template Page The atomic

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

    Blocks You can group them into the building blocks and containers
  6. Brad. Frost. Who? The guy who “invented” atomic design

  7. Atom The “smallest” reusable thing Examples are Buttons, Input Fields,

    Headings, etc.
  8. Molecule The “bigger” reusable thing built with the “smallest” things

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

    things Examples are Headers, Footers, Flight Search, etc.
  10. Template A container with rooms for all the things Examples

    are Home Layout, Blog Layout, etc.
  11. Page A container filled with all the things Examples are

    Home Page, Blog Page, etc.
  12. Pattern Libraries Atom Molecule Organism Template Page Building UI or

    pattern libraries is easier with a system like Atomic Design.
  13. Pattern Libraries Atom Molecule Organism Template Page Start by adding

    atoms to your pattern library
  14. Pattern Libraries Atom Molecule Organism Template Page Extend it by

    adding molecules
  15. Pattern Libraries Atom Molecule Organism Template Page And if you

    strive for a complete library, add organisms as well
  16. So, this is it now, right? Atom Molecule Organism Template

    Page
  17. Not Quite Not everyone understands geek language or science ;)

  18. Reality Atom? Molecule? Organism? WTF?

  19. Alternatives S M L Layout Page Element Component Module Page

    Plan Page
  20. How to design? Atom Molecule Organism Template Page

  21. How to design? Atom Molecule Organism Template Page What customers

    like What developers like
  22. Example

  23. Tools PatternLab Frontify

  24. Think in Systems and you’ll become a better designer or

    developer - maybe :)
  25. Visit us on www.frontify.com Thanks. Follow me on Twitter @rogerdudler