Atomic Design. Eh? - Speaker Deck

Slide 1

Slide 1 text

Atomic Design Eh? A modular design and front-end approach for the masses?

Slide 2

Slide 2 text

What is it about? Modular Design Best Practice or a way to optimise your workﬂow, maintainability and quality in design and front-end.

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

Atomic Design Overview Atom Molecule Organism Template Page The atomic design concept introduces the following terms

Slide 5

Slide 5 text

Atomic Design Overview Atom Molecule Organism Template Page Containers Building Blocks You can group them into the building blocks and containers

Slide 6

Slide 6 text

Brad. Frost. Who? The guy who “invented” atomic design

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Molecule The “bigger” reusable thing built with the “smallest” things Examples are Search Box, Card Listing, Button Group, etc.

Slide 9

Slide 9 text

Organism A “biggest” thing built with the “smallest” and “bigger” things Examples are Headers, Footers, Flight Search, etc.

Slide 10

Slide 10 text

Template A container with rooms for all the things Examples are Home Layout, Blog Layout, etc.

Slide 11

Slide 11 text

Page A container ﬁlled with all the things Examples are Home Page, Blog Page, etc.

Slide 12

Slide 12 text

Pattern Libraries Atom Molecule Organism Template Page Building UI or pattern libraries is easier with a system like Atomic Design.

Slide 13

Slide 13 text

Pattern Libraries Atom Molecule Organism Template Page Start by adding atoms to your pattern library

Slide 14

Slide 14 text

Pattern Libraries Atom Molecule Organism Template Page Extend it by adding molecules

Slide 15

Slide 15 text

Pattern Libraries Atom Molecule Organism Template Page And if you strive for a complete library, add organisms as well

Slide 16

Slide 16 text

So, this is it now, right? Atom Molecule Organism Template Page

Slide 17

Slide 17 text

Not Quite Not everyone understands geek language or science ;)

Slide 18

Slide 18 text

Reality Atom? Molecule? Organism? WTF?

Slide 19

Slide 19 text

Alternatives S M L Layout Page Element Component Module Page Plan Page

Slide 20

Slide 20 text

How to design? Atom Molecule Organism Template Page

Slide 21

Slide 21 text

How to design? Atom Molecule Organism Template Page What customers like What developers like