All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.

1. ATOMIC DESIGN@brad_frost

3. DESIGN SYSTEMS

6. http://styletil.es

10. http://sparkbox.github.com/style-prototype/

12. COMPONENTS

13. 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/

14. WHAT IS AN INTERFACE MADE OF?

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

19. FRAMEWORKS

20. RESOURCE
http://foundation.zurb.com/

21. RESOURCE
http://twitter.github.com/bootstrap/

22. THESE THINGS ARE GREAT, BUT...

23. FRAMEWORK POTENTIAL PITFALLS
๏ Subscribe to other developers’ structure/naming/style
๏ Lookalike issues
๏ One-size-fits-all
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
๏ Ability to scale
๏ Compatibility with existing sites

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

25. 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/

26. PATTERN LIBRARIES

27. We’re not designing pages, we’re
designing systems of components.
-Stephen Hay
http://24ways.org/2011/front-end-style-guides/

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

29. http://gim.ie/fZyK

30. http://pea.rs/

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

32. http://patternprimer.adactio.com/

33. http://barebones.paulrobertlloyd.com

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

41. I LOVE THESE.

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

43. ATOMIC DESIGN

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

46. H2+O2=H20
H2+O2→H20

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

61. ATOMS
๏ Building blocks of an interface
๏ Can’t be broken down any further
without losing their meaning
๏ Abstract
๏ Often not too useful on their own
๏ Good as an at-a-glance reference
๏ See all your global styles laid out
at once

63. Actin’ fool breakin’ shit down
to molecules
-Busta Rhymes

65. H2+O2=H20
H2+O2→H20

68. MOLECULES
๏ Group of atoms bonded together
๏ Smallest fundamental units of a
compound
๏ More concrete than atoms
๏ Encourage a “do one thing and
do it well” philosophy
๏ Often serve as the backbone for a
more complex system

73. ORGANISMS
๏ Group of molecules joined
together to form a distinct section
๏ Complex molecules
๏ Can consist of similar and/or
different molecule types
๏ Encourages creating standalone,
portable, reusable components

77. http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups

80. TEMPLATES
๏ Page-level
๏ Mostly comprised of groups of
organisms
๏ Begin their life as HTML
wireframes, increase fidelity over
time
๏ Client facing.Very concrete.
๏ Eventually becomes the
deliverable/production code

81. f

84. PAGES
๏ Specific instance of a template
๏ Highest fidelity.Template content
is replaced with real/sample
content
๏ The hub for most people involved
in the process.
๏ Test the effectiveness of the
system
๏ Test variations in the template:
design/content tweaks, include/
exclude organisms, etc.

86. ABSTRACT CONCRETE

87. ABSTRACT CONCRETE
CREATORS CLIENTS

88. REFERENCE BUILD REVIEW

89. ATOMIC DESIGN
๏ Provides a methodology for crafting an effective
design system
๏ Easily traverse from abstract to concrete
๏ Promotes consistency and cohesion
๏ Assembles rather than deconstructs

92. Pattern Lab is a collection of tools
to help create and maintain
atomic web design systems.

93. WHAT PATTERN LAB IS
๏ A comprehensive component library
๏ A pattern starter kit
๏ A design system builder
๏ A practical viewport resizer
๏ A design annotation tool

94. WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language/library/style dependent
๏ Incredibly rigid

96. 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/

97. PATTERN BUILDER

111. MOLECULE GUTS
code block<div class="block block-inset">
<a href="#" class="inner">
<div class="b-thumb">
<?php inc('atom','landscape') ?>
</div>
<div class="b-text">
<h2 class="headline">Headline:
Lorem ipsum dolor sit amet,
consectetur adipisicing</h2>
</div>
</a>
</div>

112. BASIC INCLUDE
code block
<?php inc(‘molecule’,‘pagination’)?>

115. ORGANISM GUTS
code block<section class="comments section">
<div class="comments-container" id="comments-
container">
<h2 class="section-title">59 Comments</h2>
<?php inc('molecule','comment-form'); ?>
<ul class="comment-list">
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
</ul>
</div>
<?php inc('molecule','pagination') ?>
</section>

116. BASIC INCLUDE
code block
<?php inc(‘organism’,‘comments’)?>

121. TEMPLATE GUTS
code block<?php inc('organism','header'); ?>
<div role="main">
<div class="l-two-col">
<div class="l-main">
<article class="article">
<header class="article-header">
<h1>Article Headline Lorem ipsum dolor sit</h1>
<?php inc('molecule','byline-author-time') ?>
</header>
<?php inc('organism','article-body') ?>
</article><!--end .article-->
<?php inc('molecule','social-share') ?>
<?php inc('organism','comment-thread') ?>
</div><!--end l-main-->
<div class="l-sidebar">
<?php inc('organism','related-posts') ?>
<?php inc('organism','recent-tweets') ?>
</div><!--end l-sidebar-->
</div><!--end l-two-col-->
</div><!--End role=main-->
<?php inc('organism','footer'); ?>

122. f

126. VIEWER

127. 320PX.

128. 320PX.
480PX.

129. 320PX.
480PX.
768PX.

130. 320PX.
480PX.
768PX.
1024PX.

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

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

139. DISCO MODE

141. HAY! MODE

142. 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/

144. MANUAL

147. VIEW MODES

151. WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Useful tool for everyone: information architects, designers,
developers, clients
๏ Can easily traverse from abstract to concrete
๏ Write HTML/CSS/JS as you please. Name things as you
please.
๏ Start with a system rather than deconstruct later
๏ Encourages flexibility
๏ Document as you go

152. WHAT’S NEXT?

153. DAVE OLSEN@dmolsen

157. MINIMIZE DEPENDENCIES

158. MO LANGUAGES

161. INCLUDES ARE INCLUDES
code block//PHP
<?php inc(‘molecule’,‘pagination’)?>
//Codekit
<!-- @import "m-pagination.kit" -->
//Hammer
<!-- @include _m-pagination.html -->
//Ruby (maybe, I don’t know)
load 'm-pagination.rb'

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

165. https://github.com/bradfrost/patternlab

167. http://patternlab.bradfrostweb.com

168. WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.

172. WORK HARD.
DON’T BE AN ASSHOLE.
SHARE WHAT YOU KNOW.

173. THANKS!@brad_frost