Your SlideShare is downloading. ×
0
ATOMIC DESIGN@brad_frost
PAGES
GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?
http://www.flickr.com/photos/pandora_6666/4927865092/
WHAT IS AN INTERFACE MADE OF?
http://bradfrost.github.com/this-is-responsive/patterns.html
Design systems, not pages.
-Andy Clarke
http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_sli...
http://foundation.zurb.com/
getbootstrap.com
THESE THINGS ARE GREAT, BUT...
FRAMEWORK POTENTIAL PITFALLS
๏ One-size-fits-all
๏ Lookalike issues
๏ Potential for bloat/unneeded stuff
๏ Might not do ev...
Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your ...
http://maban.co.uk/projects/front-end-style-guides/
BENEFITS OF FRONT-END STYLE GUIDES
๏ Promotes consistency and cohesion
๏ Easier to test
๏ Better workflow
๏ Creates a shar...
http://brettjankord.com/projects/style-guide-boilerplate/
http://patternprimer.adactio.com/
http://barebones.paulrobertlloyd.com
http://style.codeforamerica.org/
http://ux.mailchimp.com/patterns/
http://yelp.com/styleguide
http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/
I LOVE THESE.
MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often too abstract
๏ Seen only as...
ATOMIC DESIGN
2H2 + O2 → 2H20
C + O2 → CO2
CH4 + O2 → CO2 + H2O
C8H18 + O2 → CO2 + H20
C2H6 + O2 → CO2 + H2O
2H2+O2→2H20
http://joshduck.com/periodic-table.html
ENTER KEYWORD
SEARCH THE SITE
SEARCH
ENTER KEYWORD
SEARCH THE SITE
SEARCH
You can create good experiences without
knowing the content. What you can’t do is
create good experiences without knowing
...
ABSTRACT CONCRETE
ABSTRACT CONCRETE
CREATORS CLIENTS
REFERENCE BUILD REVIEW
The idea of designing components like this, out of
context and without layout, might sound strange—
particularly if you’ve...
DAVE OLSEN@dmolsen
WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A pract...
WHAT PATTERN LAB AIN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
๏ “Just” a pattern libr...
MOLECULE GUTS
code block!
!
<div class="block block-inset">
<div class="b-thumb">
{{> atoms-img-landscape-4x3 }}
</div>
<d...
BASIC INCLUDE
code block!
!
!
!
!
!
!
!
{{> molecules-block-inset }}
!
ORGANISM GUTS
code block!
!
!
<header class="header" role="banner">
{{> atoms-header-ad }}
{{> atoms-logo }}
{{> molecules...
BASIC INCLUDE
code block!
!
!
!
!
{{> organisms-header }}
TEMPLATE GUTS
code block{{> organisms-header }}
<main role="main">
<div class="l-two-col">
<div class="l-main">
{{> organi...
CONTENT STRUCTURE ACTUAL CONTENT
TEMPLATE GUTS
code block{{# hero }}
{{> molecules-block-hero }}
{{/ hero}}
!
<div class="g g-3up">
{{# touts}}
<div class=...
PIPING IN REAL CONTENT WITH JSON
code block!
!
"hero" : {
"img": {
"landscape-16x9": {
"src": "images/sample/mountains.jpg...
PIPING IN REAL CONTENT WITH JSON
code block"touts" : [
{
"img": {
"landscape-4x3": {
"src": "../../images/sample/climber.j...
VIEWER
320PX.
320PX.
480PX.
320PX.
480PX.
768PX.
320PX.
480PX.
768PX.
1024PX.
320PX.
480PX.
768PX.
1024PX.
THE FOLD.
320PX.
480PX.
768PX.
1024PX.
THE FOLD.
OH GOD THE FOLD.
RESOURCE
http://bradfrostweb.com/demo/ish/
ANNOTATIONS
code block!
!
{
"el": ".header",
"title": "Header",
"title": "The header is a global element…"
},
{
"el": ".nav",
"title":...
LINEAGE
A BUNCH OF OTHER STUFF
๏ Code view (Mustache and rendered HTML)
๏ Pattern status
๏ Auto-refresh
๏ Page follow
๏ Future: pl...
http://patternlab.io
IF ANYTHING GOES WRONG WITH
PATTERN LAB, BLAME @DMOLSEN.
SET EXPECTATIONS
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
As an industry, we sell websites like
paintings. Instead, we should be selling
beautiful and easy access to content,
agnos...
COMPLEX NAVIGATIONDEATH TO THE WATERFALL
GATHER
http://stylifyme.com/
http://bradfrostweb.com/blog/post/interface-inventory/
๏ Document your interface
๏ Promote consistency
๏ Establish which elements will be challenging to translate
into a respons...
http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
ESTABLISH DIRECTION
RESOURCE
http://styletil.es/
ROLL UP OUR SLEEVES
CONTENT STRUCTURE ACTUAL CONTENT
http://trentwalton.com/2011/07/14/content-choreography/
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
THIS IS FUN!
MOBILE WEB
THANKS!@brad_frost
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Upcoming SlideShare
Loading in...5
×

Atomic Design - An Event Apart San Diego

16,697

Published on

Design systems, not pages. This is an introduction to atomic design (http://bradfrostweb.com/blog/post/atomic-web-design/), a methodology for crafting an effective interface design system. It also introduces Pattern Lab (http://patternlab.io/), a tool for implementing atomic design systems and pattern libraries.

Published in: Design, Internet, Technology

Transcript of "Atomic Design - An Event Apart San Diego"

  1. 1. ATOMIC DESIGN@brad_frost
  2. 2. PAGES GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH? http://www.flickr.com/photos/pandora_6666/4927865092/
  3. 3. WHAT IS AN INTERFACE MADE OF?
  4. 4. http://bradfrost.github.com/this-is-responsive/patterns.html
  5. 5. Design systems, not pages. -Andy Clarke http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
  6. 6. http://foundation.zurb.com/
  7. 7. getbootstrap.com
  8. 8. THESE THINGS ARE GREAT, BUT...
  9. 9. 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
  10. 10. Tiny Bootstraps, for every client. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
  11. 11. 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/
  12. 12. http://maban.co.uk/projects/front-end-style-guides/
  13. 13. 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/
  14. 14. http://brettjankord.com/projects/style-guide-boilerplate/
  15. 15. http://patternprimer.adactio.com/
  16. 16. http://barebones.paulrobertlloyd.com
  17. 17. http://style.codeforamerica.org/
  18. 18. http://ux.mailchimp.com/patterns/
  19. 19. http://yelp.com/styleguide
  20. 20. http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
  21. 21. I LOVE THESE.
  22. 22. 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
  23. 23. ATOMIC DESIGN
  24. 24. 2H2 + O2 → 2H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
  25. 25. 2H2+O2→2H20
  26. 26. http://joshduck.com/periodic-table.html
  27. 27. ENTER KEYWORD SEARCH THE SITE SEARCH
  28. 28. ENTER KEYWORD SEARCH THE SITE SEARCH
  29. 29. 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
  30. 30. ABSTRACT CONCRETE
  31. 31. ABSTRACT CONCRETE CREATORS CLIENTS
  32. 32. REFERENCE BUILD REVIEW
  33. 33. The idea of designing components like this, out of context and without layout, might sound strange— particularly if you’ve been used to designing Web pages the traditional way. But we’ve been abstracting design ideas like this for the longest time, for example in our use of mood boards and even the cropped designs we find on sites like Dribbble. -Andy Clarke http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements
  34. 34. DAVE OLSEN@dmolsen
  35. 35. WHAT PATTERN LAB IS ๏ A design system builder ๏ A comprehensive custom component library ๏ A pattern starter kit ๏ A practical viewport resizer ๏ An annotation tool
  36. 36. WHAT PATTERN LAB AIN’T ๏ A UI framework ๏ Language, library, or style dependent ๏ Incredibly rigid ๏ “Just” a pattern library, but also not a production-ready static site generator
  37. 37. MOLECULE GUTS code block! ! <div class="block block-inset"> <div class="b-thumb"> {{> atoms-img-landscape-4x3 }} </div> <div class="b-text"> <h2>{{ headline.short }}</h2> </div> </div> !
  38. 38. BASIC INCLUDE code block! ! ! ! ! ! ! ! {{> molecules-block-inset }} !
  39. 39. ORGANISM GUTS code block! ! ! <header class="header" role="banner"> {{> atoms-header-ad }} {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} {{> molecules-social-nav }} </header>
  40. 40. BASIC INCLUDE code block! ! ! ! ! {{> organisms-header }}
  41. 41. TEMPLATE GUTS code block{{> organisms-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 }} !
  42. 42. CONTENT STRUCTURE ACTUAL CONTENT
  43. 43. TEMPLATE GUTS code block{{# hero }} {{> molecules-block-hero }} {{/ hero}} ! <div class="g g-3up"> {{# touts}} <div class="gi"> {{> molecules-inset-block }} </div> {{/ touts}} </div>
  44. 44. PIPING IN REAL CONTENT WITH JSON code block! ! "hero" : { "img": { "landscape-16x9": { "src": "images/sample/mountains.jpg", "alt": "Mountains" } }, "headline" : { "medium" : "Top 10 mountin ranges" } }
  45. 45. PIPING IN REAL CONTENT WITH JSON code block"touts" : [ { "img": { "landscape-4x3": { "src": "../../images/sample/climber.jpg", "alt": "Climber" } }, "headline" : { "short" : "Extreme climbing tips" } }, { "img": { "landscape-4x3": { "src": “../../images/sample/stream.jpg", "alt": "Stream" } }, "headline" : { "short" : “Stream Hiking" }
  46. 46. VIEWER
  47. 47. 320PX.
  48. 48. 320PX. 480PX.
  49. 49. 320PX. 480PX. 768PX.
  50. 50. 320PX. 480PX. 768PX. 1024PX.
  51. 51. 320PX. 480PX. 768PX. 1024PX. THE FOLD.
  52. 52. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
  53. 53. RESOURCE http://bradfrostweb.com/demo/ish/
  54. 54. ANNOTATIONS
  55. 55. code block! ! { "el": ".header", "title": "Header", "title": "The header is a global element…" }, { "el": ".nav", "title": "Primary Navigation", "title": "The navigation is…" } ANNOTATIONS WITH JSON
  56. 56. LINEAGE
  57. 57. A BUNCH OF OTHER STUFF ๏ Code view (Mustache and rendered HTML) ๏ Pattern status ๏ Auto-refresh ๏ Page follow ๏ Future: plugins
  58. 58. http://patternlab.io
  59. 59. IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME @DMOLSEN.
  60. 60. SET EXPECTATIONS
  61. 61. http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
  62. 62. 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/
  63. 63. COMPLEX NAVIGATIONDEATH TO THE WATERFALL
  64. 64. GATHER
  65. 65. http://stylifyme.com/
  66. 66. http://bradfrostweb.com/blog/post/interface-inventory/
  67. 67. ๏ 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 INTERFACE INVENTORY
  68. 68. http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
  69. 69. ESTABLISH DIRECTION
  70. 70. RESOURCE http://styletil.es/
  71. 71. ROLL UP OUR SLEEVES
  72. 72. CONTENT STRUCTURE ACTUAL CONTENT
  73. 73. http://trentwalton.com/2011/07/14/content-choreography/
  74. 74. WHEN YOU’RE FINISHED CHANGING YOU’RE FINISHED.
  75. 75. THIS IS FUN!
  76. 76. MOBILE WEB
  77. 77. THANKS!@brad_frost
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×