Atomic design is a methodology for creating robust design systems.

1. ATOMIC DESIGN
@brad_frost

2. PAGES
GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?
http://www.flickr.com/photos/pandora_6666/4927865092/

8. We’re not designing pages,
we’re designing systems of components.
-Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

9. WHAT IS AN INTERFACE MADE OF?

10. http://bradfrost.github.com/this-is-responsive/patterns.html

11. http://foundation.zurb.com/

12. getbootstrap.com

13. THESE THINGS ARE GREAT, BUT...

15. FRAMEWORK POTENTIAL PITFALLS
๏ One-size-fits-all
๏ Lookalike issues
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
๏ Compatibility with existing sites
๏ Subscribe to someone else’s structure, naming, style

16. Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/

17. Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your clients’ needs.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/

18. BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test
๏ Better workflow
๏ Creates a shared vocabulary
๏ Useful reference
http://24ways.org/2011/front-end-style-guides/

19. http://gim.ie/fZyK

20. http://pea.rs/

21. http://brettjankord.com/projects/style-guide-boilerplate/

22. http://patternprimer.adactio.com/

23. http://malarkey.github.io/Rock-Hammer/

24. http://barebones.paulrobertlloyd.com

28. http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/

32. I LOVE THESE.

33. MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often too abstract
๏ Seen only as a designer/developer tool
๏ Often created after a project launches
๏ Often incomplete/only serving present cases
๏ Lacking a clear methodology

34. ATOMIC DESIGN

35. H2 + O2 → H20
C + O2 → CO2
CH4 + O2 → CO2 + H2O
C8H18 + O2 → CO2 + H20
C2H6 + O2 → CO2 + H2O

37. H2+O2=H20
H2+O2→H20

43. http://joshduck.com/periodic-table.html

54. H2+O2=H20
H2+O2→H20

69. ABSTRACT
CONCRETE

70. ABSTRACT
CONCRETE
CREATORS
CLIENTS

71. REFERENCE
BUILD
REVIEW

74. DAVE OLSEN
@dmolsen

75. WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A practical viewport resizer
๏ An annotation tool
๏ A developer tool (auto-refresh, page follow)

76. WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
๏ “just” a pattern library, but also not by itself a

78. SITE BUILDER

84. BLOW IT UP.

85. http://www.starbucks.com/static/reference/styleguide/

91. MOLECULE GUTS
code block
!
<div class="block block-inset">
<div class="b-thumb">
{{> atoms-img-landscape-4x3 }}
</div>
<div class="b-text">
<h2 class="headline">Headline:
Lorem ipsum dolor sit amet,
consectetur adipisicing</h2>
</div>
</div>
!

92. BASIC INCLUDE
!
!
!
!
!
code block
!
!
!
{{> molecules-block-inset }}
!

95. ORGANISM GUTS
!
code block
!
!
!
!
<header class="header cf" role="banner">
{{> atoms-logo }}
<a href="#search" class="toggle-search">Search</a>
<a href="#nav" class="toggle-menu">Menu</a>
{{> molecules-primary-nav }}
{{> molecules-search }}
</header>

96. BASIC INCLUDE
!
code block
!
!
!
!
{{> organisms-header }}

99. TEMPLATE GUTS
{{>
codeorganisms-header
block
}}
<div role="main">
<div class="l-two-col">
<div class="l-main">
{{> organisms-article-body }}
{{> molecules-social-share }}
{{> organisms-comments }}
</div><!--end l-main-->
!
<div class="l-sidebar">
{{> organisms-related-posts }}
{{> organisms-recent-tweets }}
</div><!--end l-sidebar-->
</div><!--end l-two-col-->
</div><!--End role=main-->
{{> organisms-footer }}
!

101. CONTENT STRUCTURE
ACTUAL CONTENT

104. TEMPLATE GUTS
code hero }}
{{# block
{{> molecules-block-hero }}
{{/ hero}}
!
<div class="g g-3up">
{{# touts}}
<div class="gi">
{{> molecules-inset-block }}
</div>
{{/ touts}}
</div><!--end 3up-->

105. PIPING IN REAL CONTENT WITH JSON
"hero" : [
code {block
}
"img": {
"landscape-16x9": {
"src": "images/sample/mountains.jpg",
"alt": "Mountains"
}
},
"headline" : {
"medium" : "Top 10 mountin ranges for hiking"
}
],
"touts" : [
{
"img": {
"landscape-4x3": {
"src": "../../images/sample/climber.jpg",
"alt": "Climber"
}
},
"headline" : {

106. VIEWER

107. 320PX.

108. 320PX.
480PX.

109. 320PX.
480PX.
768PX.

110. 320PX.
480PX.
768PX.
1024PX.

111. 320PX.
480PX.
768PX.
1024PX.
THE FOLD.

112. 320PX.
480PX.
768PX.
1024PX.
THE FOLD.
OH GOD THE FOLD.

120. DISCO MODE

122. HAY! MODE

123. Start with the small screen first,
then expand until it looks like shit.
Time for a breakpoint!
-Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

125. ANNOTATIONS

127. AUTO-REFRESH &
PAGE FOLLOW

128. PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Can easily traverse from abstract to concrete
๏ Useful tool for everyone: information architects, designers,
developers, clients
๏ Fills the post-PSD void
๏ Write and name HTML/CSS/JS as you please.
๏ Start with a system first rather than deconstruct later
๏ Extensible and scalable
๏ Future friendly

133. SET EXPECTATIONS

134. http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg

135. As an industry, we sell websites like
paintings. Instead, we should be selling
beautiful and easy access to content,
agnostic of device, screen size, or context.
-Dan Mall
http://danielmall.com/articles/the-post-psd-era/

136. B-SIDE
THIS IS NOT
THE WEB.

138. WEB
WEB

139. DEATH TO NAVIGATION
COMPLEXTHE WATERFALL

145. Let’s change the phrase
“designing in the browser”
to “deciding in the browser”
-Dan Mall
http://the-pastry-box-project.net/dan-mall/2012-september-12/

149. GATHER

150. http://stylifyme.com/

152. http://bradfrostweb.com/blog/post/interface-inventory/

160. http://blog.easy-designs.net/archives/evernote-for-interface-inventories/

161. INTERFACE INVENTORY
๏ Document your interface
๏ Promote consistency
๏ Establish which elements will be challenging to translate
into a responsive environment
๏ Lay the groundwork for a future style guide/pattern library

162. ESTABLISH DIRECTION

172. RCE
OU
RES
http://styletil.es/

179. ROLL UP OUR SLEEVES

193. CONTENT STRUCTURE
ACTUAL CONTENT

201. http://www.flickr.com/photos/15609463@N03/7854373494/

203. COLLABORATION AND COMMUNICATION
TRUMP DELIVERABLES

204. http://pattern-lab.info

205. IF ANYTHING GOES WRONG WITH
PATTERN LAB, BLAME THIS GUY.

206. HUGE THANK YOU
๏ Dave Olsen
๏ Anna Debenham
๏ Dan Mall
๏ Andy Clarke
๏ Josh Clark
๏ Paul Robert Lloyd
๏ Jonathan Stark
๏ Jeremy Keith
๏ Jennifer Brook
๏ Brett Jankord
๏ Tyler Sticka
๏ Harry Roberts

209. WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.

210. THIS IS FUN!

211. THANKS!
@brad_frost