Atomic Design overview

1. 07.20.14
ATOMIC DESIGN
Our past; Design’s future

2. AGENDA
What is Atomic Design?
Why should I care?

3. AGENDA
What is Atomic Design?
Why should I care?

4. DESIGNER BUZZ
WORDS

9. ATOMIC DESIGN

10. @brad_frost

11. ATOMIC DESIGN

12. ATOMS

13. MOLECULES

14. ORGANISMS

15. TEMPLATES

16. PAGES

17. ATOMIC DESIGN

18. ATOMS

20. ATOMS

21. ATOMS
-Building blocks of matter
-Rarely used by themselves
-Simple

22. ATOMS
-Building blocks of design
-Rarely used by themselves
-Simple

23. LABELS

24. INPUT

25. BUTTON

27. MOLECULES

28. MOLECULES
-Atoms bounded together
-Groups of elements functioning as a unit
-Functions in only one way

29. ENTER PHRASE HERE SEARCH
SEARCH SITE

30. ORGANISMS

31. ORGANISMS
-Grouping of molecules (and atoms)
-Form a distinct interface
-Encourages standalone, reusable components

32. Home AboutBlog Contact

33. TEMPLATES

34. TEMPLATES
-Composed of organism (and smaller entities)
-Form a distinct interface
-Encourages standalone, reusable components

35. Home AboutBlog Contact

36. PAGES

37. PAGES
-Specific instances of a template
-Accurate depiction of the final product

38. 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.

39. THIS SHOULD FEEL
FAMILIAR

41. OBJECT-ORIENTED
PROGRAMMING

42. MODULAR-ABSTRACT
STRUCTURED PROGRAMMING

43. OOP
-Modular, reusable systems
-Easy maintenance
-Decoupling data

45. VARIABLES

46. FUNCTIONS

47. CLASSES

48. LIBRARY

49. PROGRAM

50. ATOMIC DESIGN O-O DESIGN==

51. AGENDA
What is Atomic Design?
Why should I care?

52. PREVENT FEEDBACK
LOOPS

53. Comps

58. You should be here.

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

62. ENCOURAGE
REUSABILITY

63. REUSABILITY
-Quicker development time
-Easily prototype
-Cleaner, modular code

64. _text.scss _body.scss _call-out.scss _colors.scss
_detail.css

65. _heading.erb _paragraph.erb _header.erb _logo.erb
view.erb

66. Home AboutBlog Contact

67. RAISE EMPATHY

68. EMPATHY
-Forces you to work alongside other practices
-Promotes “group-think”
-Helps create co-ownership of the entire product

70. AGENDA
What is Atomic Design?
Why should I care?

71. ATOMIC DESIGN

72. REASONS TO CARE
-Helps prevent feedback loops
-Testable and clean
-Raises empathy

73. THANK YOU.