atomic design
DESCRIPTION
Atomic Design overviewTRANSCRIPT
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.