The document discusses the concept of atomic design for building interfaces and design systems. It provides examples of existing style guides and pattern libraries. It also describes how atomic design breaks interfaces down into basic elements called atoms, and combines them into larger components called molecules, organisms and templates. Real content can then be piped into the templates.

1. ATOMIC DESIGN @brad_frost

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

7. WHAT IS AN INTERFACE MADE OF?

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

9. Design systems, not pages.
-Andy Clarke
http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/

10. http://foundation.zurb.com/

11. getbootstrap.com

12. THESE THINGS ARE GREAT, BUT...

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

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

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

17. http://maban.co.uk/projects/front-end-style-guides/

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

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

20. http://patternprimer.adactio.com/

21. http://barebones.paulrobertlloyd.com

24. http://style.codeforamerica.org/

25. http://ux.mailchimp.com/patterns/

26. http://yelp.com/styleguide

27. http://www.starbucks.com/static/http://www.starbucks.com/static/rreeffeerreennccee//ssttyylleegguuiiddee//

31. I LOVE THESE.

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

33. ATOMIC DESIGN

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

36. 2H2+O2→2H20

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

48. SEARCH THE SITE
ENTER KEYWORD
SEARCH

49. SEARCH THE SITE
ENTER KEYWORD
SEARCH

59. You can create good experiences without
knowing the content. What you can’t do is
create good experiences without knowing
your content structure. What is your content
made from, not what your content is.
-Mark Boulton
http://www.markboulton.co.uk/journal/structure-first-content-always

64. ABSTRACT CONCRETE

65. ABSTRACT CONCRETE
CREATORS CLIENTS

66. REFERENCE BUILD REVIEW

69. DAVE OLSEN
@dmolsen

70. WHAT PATTERN LAB IS
๏ A design system builder
๏ Your comprehensive custom component library
๏ A pattern starter kit
๏ A design toolkit (viewport resizer and other tools)

71. WHAT PATTERN LAB AIN’T
๏ A UI framework
๏ Language, library, style, workflow dependent
๏ Incredibly rigid
๏ “Just” a pattern library, but also not a production-ready
static site generator

80. MOLECULE GUTS
c!ode block
!
!
<div class="block block-post">
<a href="{{ url }}">
<div class="b-img">
{{> atoms-thumb }}
</div>
<h3 class="b-title">{{ headline }}</h3>
<p class="b-excerpt">{{ excerpt }}</p>
</a>
</div>
!

81. BASIC INCLUDE
code block !!!!!
!
!
!
{{> molecules-block-post }}
!

84. ORGANISM GUTS
c!ode block
!
!
<header class="header" role="banner">
{{> atoms-ad-leaderboard }}
{{> atoms-logo }}
{{> molecules-primary-nav }}
{{> molecules-search }}
{{> molecules-social-nav }}
</header>

85. BASIC INCLUDE
c!ode block
!
!
!
!
!
{{> organisms-header }}

87. TEMPLATE GUTS
c{o{d>e o rbglaonicskms-header }}
<main 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-->
</main><!--End role=main-->
{{> organisms-footer }}

94. TEMPLATE GUTS
c{o{d>e orbglaonciskms-header }}
<main role="main">
{{# hero }}
{{> molecules-hero-video }}
{{/ hero }}
<section class="section">
{{# experience }}
{{> organisms-story-feature }}
{{/ experience }}
</section>
<section class="section">
{{# factoid-advertising }}
{{> organisms-factoid }}
{{/ factoid-advertising }}
</section>

95. PIPING IN REAL CONTENT
c{o de block
"title" : "Time Inc.",
"bodyClass": "home",
"hero" : [
{
"headline": {
"xs": "Moving People"
},
"img": {
"hero-full": {
"src": "../../images/sample/
hero_beyonce.jpg",
"alt": "Beyonce"
}
}
}

96. PIPING IN REAL CONTENT
c"oedxpee ribenlcoe"c k: {
"heroClass" : "experience",
"img" : {
"hero-main": {
"src": "../../images/sample/hero_skater.jpg",
"alt": "Olympic Figure Skater"
}
},
"eyebrow" : "Experiences",
"headline" : {
"short" : “Champions at the Olympics"
},
"excerpt" : {
"medium" : "Time Inc’s brands cover every aspect
of the Sochi XXII Winter Olympic Games. From the best
athletes to the best viewing parties."
}
}
}

98. VIEWER

99. 320PX.

100. 320PX.
480PX.

101. 320PX.
480PX.
768PX.

102. 320PX.
480PX.
768PX.
1024PX.

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

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

107. ANNOTATIONS

110. LINEAGE

112. http://patternlab.io

113. IF ANYTHING GOES WRONG WITH
PATTERN LAB, BLAME @DMOLSEN.

115. SET EXPECTATIONS

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

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

118. CDOEAMTPH LTEOX T HNEA WVAIGTEARTFIAOLNL

124. GATHER

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

133. INTERFACE INVENTORY
๏ Document your interface
๏ Promote consistency
๏ Establish scope of work for translating to a responsive
interface
๏ Lay the groundwork for a future style guide/pattern library

134. ESTABLISH DIRECTION

140. RESOURCE
http://styletil.es/

147. ROLL UP OUR SLEEVES

159. http://trentwalton.com/2011/07/14/content-choreography/

161. WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.

162. THIS IS FUN!

163. MOBILE WEB

164. THANKS!
@brad_frost