atomic design

07.20.14

ATOMIC DESIGNOur past; Design’s future

AGENDAWhat is Atomic Design?

Why should I care?

AGENDAWhat is Atomic Design?

Why should I care?

DESIGNER BUZZ WORDS

ATOMIC DESIGN

@brad_frost

ATOMIC DESIGN

ATOMS

MOLECULES

ORGANISMS

TEMPLATES

PAGES

ATOMIC DESIGN

ATOMS

ATOMS

ATOMS-Building blocks of matter

-Rarely used by themselves

-Simple

ATOMS-Building blocks of design

-Rarely used by themselves

-Simple

LABELS

INPUT

BUTTON

MOLECULES

MOLECULES-Atoms bounded together

-Groups of elements functioning as a unit

- Functions in only one way

ENTER PHRASE HERE SEARCH

SEARCH SITE

ORGANISMS

ORGANISMS-Grouping of molecules (and atoms)

- Form a distinct interface

- Encourages standalone, reusable components

Home AboutBlog Contact

TEMPLATES

TEMPLATES-Composed of organism (and smaller entities)

- Form a distinct interface

- Encourages standalone, reusable components

Home AboutBlog Contact

PAGES

PAGES-Specific instances of a template

-Accurate depiction of the final product

Home AboutBlog Contact

Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas egetridiculus

Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

THIS SHOULD FEEL FAMILIAR

OBJECT-ORIENTED PROGRAMMING

MODULAR-ABSTRACT STRUCTURED PROGRAMMING

OOP-Modular, reusable systems

-Easy maintenance

-Decoupling data

VARIABLES

FUNCTIONS

CLASSES

LIBRARY

PROGRAM

ATOMIC DESIGN O-O DESIGN==

AGENDAWhat is Atomic Design?

Why should I care?

PREVENT FEEDBACK LOOPS

Comps

You should be here.

https://github.com/sparkbox/style-prototype

ENCOURAGE REUSABILITY

REUSABILITY-Quicker development time

-Easily prototype

-Cleaner, modular code

_text.scss _body.scss _call-out.scss _colors.scss

_detail.css

_heading.erb _paragraph.erb _header.erb _logo.erb

view.erb

Home AboutBlog Contact

RAISE EMPATHY

EMPATHY-Forces you to work alongside other practices

-Promotes “group-think”

-Helps create co-ownership of the entire product

AGENDAWhat is Atomic Design?

Why should I care?

ATOMIC DESIGN

REASONS TO CARE-Helps prevent feedback loops

-Testable and clean

-Raises empathy

THANK YOU.