Your SlideShare is downloading. ×
Atomic Design - An Event Apart San Diego
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Atomic Design - An Event Apart San Diego

15,413

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 …

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
2 Comments
87 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,413
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
319
Comments
2
Likes
87
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ATOMIC DESIGN@brad_frost
  • 2. PAGES GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH? http://www.flickr.com/photos/pandora_6666/4927865092/
  • 3. WHAT IS AN INTERFACE MADE OF?
  • 4. http://bradfrost.github.com/this-is-responsive/patterns.html
  • 5. Design systems, not pages. -Andy Clarke http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
  • 6. http://foundation.zurb.com/
  • 7. getbootstrap.com
  • 8. THESE THINGS ARE GREAT, BUT...
  • 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. Tiny Bootstraps, for every client. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
  • 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. http://maban.co.uk/projects/front-end-style-guides/
  • 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. http://brettjankord.com/projects/style-guide-boilerplate/
  • 15. http://patternprimer.adactio.com/
  • 16. http://barebones.paulrobertlloyd.com
  • 17. http://style.codeforamerica.org/
  • 18. http://ux.mailchimp.com/patterns/
  • 19. http://yelp.com/styleguide
  • 20. http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
  • 21. I LOVE THESE.
  • 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. ATOMIC DESIGN
  • 24. 2H2 + O2 → 2H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
  • 25. 2H2+O2→2H20
  • 26. http://joshduck.com/periodic-table.html
  • 27. ENTER KEYWORD SEARCH THE SITE SEARCH
  • 28. ENTER KEYWORD SEARCH THE SITE SEARCH
  • 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. ABSTRACT CONCRETE
  • 31. ABSTRACT CONCRETE CREATORS CLIENTS
  • 32. REFERENCE BUILD REVIEW
  • 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. DAVE OLSEN@dmolsen
  • 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. 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. 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. BASIC INCLUDE code block! ! ! ! ! ! ! ! {{> molecules-block-inset }} !
  • 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. BASIC INCLUDE code block! ! ! ! ! {{> organisms-header }}
  • 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. CONTENT STRUCTURE ACTUAL CONTENT
  • 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. 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. 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. VIEWER
  • 47. 320PX.
  • 48. 320PX. 480PX.
  • 49. 320PX. 480PX. 768PX.
  • 50. 320PX. 480PX. 768PX. 1024PX.
  • 51. 320PX. 480PX. 768PX. 1024PX. THE FOLD.
  • 52. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
  • 53. RESOURCE http://bradfrostweb.com/demo/ish/
  • 54. ANNOTATIONS
  • 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. LINEAGE
  • 57. A BUNCH OF OTHER STUFF ๏ Code view (Mustache and rendered HTML) ๏ Pattern status ๏ Auto-refresh ๏ Page follow ๏ Future: plugins
  • 58. http://patternlab.io
  • 59. IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME @DMOLSEN.
  • 60. SET EXPECTATIONS
  • 61. http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
  • 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. COMPLEX NAVIGATIONDEATH TO THE WATERFALL
  • 64. GATHER
  • 65. http://stylifyme.com/
  • 66. http://bradfrostweb.com/blog/post/interface-inventory/
  • 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. http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
  • 69. ESTABLISH DIRECTION
  • 70. RESOURCE http://styletil.es/
  • 71. ROLL UP OUR SLEEVES
  • 72. CONTENT STRUCTURE ACTUAL CONTENT
  • 73. http://trentwalton.com/2011/07/14/content-choreography/
  • 74. WHEN YOU’RE FINISHED CHANGING YOU’RE FINISHED.
  • 75. THIS IS FUN!
  • 76. MOBILE WEB
  • 77. THANKS!@brad_frost

×