Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
STYLE GUIDES@brad_frost
Great news, team. We got the green light to redesign the homepage.
That’s great news, boss!
Yeah, the current homepage is super ugly!
Yeah and don’t even ask about the code quality lol.
Exciting! It will be great to do things right this time.
Yeah we’re going to use BEM…
And the visuals will be clean and flat.
Yeah and we’re definitely looking into React.js
And maybe this will give us the chance to finally migrate to a new CMS.
Grunt.
Make it so.
LATHER. RINSE. REPEAT.
global
north america
latin america
chile
europe
india
australia
china
hong kong
taiwan
huge jerk.
We don’t have time for cohesion and continuity!
We’re too busy DISRUPTING!
ONE BRAND
MOREDEVICESENVIRONMENTS PEOPLELANGUAGES CONTENT BROWSERS MEDIUMS COUNTRIES SCREENSIZES FEATURES PRODUCTSSERVICESFUNCTIONAL...
STYLE GUIDES
http://cargocollective.com/mcalkins/Walmart-brand-book-design
brand.wvu.edu
https://frontify.com/
BRAND STYLE GUIDES ๏ Purpose: establish guidelines for using core brand assets ๏ Audience: the entire organization, vendor...
https://www.google.com/design/spec/material-design/
http://www.lightningdesignsystem.com/
DESIGN LANGUAGE GUIDELINES ๏ Purpose: establish a design language for cohesive user experience across a suite of products ...
voiceandtone.com
styleguide.mailchimp.com
VOICE AND TONE GUIDELINES ๏ Purpose: establish and encourage a cohesive, appropriate tone across the entire user experienc...
http://www.economist.com/styleguide/
http://www.dal.ca/webteam/web_style_guide/writing_for_the_web.html
WRITING STYLE GUIDES ๏ Purpose: establish and encourage a cohesive writing style across all properties ๏ Audience: content...
code block .thisishowwedoit { } CSS SYNTAX GUIDELINES
code block .this-is-how-we-do-it { } CSS SYNTAX GUIDELINES
code block .thisIsHowWeDoIt { } CSS SYNTAX GUIDELINES
code block .this__is__how__we__do—-it { } CSS SYNTAX GUIDELINES
code block .- -...- - ..- - —— .. . ..—— — { } CSS SYNTAX GUIDELINES
https://github.com/styleguide
https://github.com/styleguide/javascript
https://github.com/styleguide/javascript
CODE STYLE GUIDES ๏ Purpose: establish code standards for teams to write more cohesive, efficient, and maintainable code ๏...
http://walmartlabs.github.io/web-style-guide
PATTERN LIBRARIES ๏ Purpose: establish and maintain an effective interface design system to create consistent UIs, speed u...
styleguides.io
MAKING PATTERN LIBRARIES HAPPEN
$ELL IT.
BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion
Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worr...
BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production
We just copied and pasted a pattern, changed a few things, and in twenty minutes we had built a system that was responsive...
By having a pattern you could actually use that's already 95% of the way there, it brings up the quality of everything so ...
BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow
Mostly designers will come up with rough representations of where things might live without going into too much detail bec...
BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a sha...
It is the common ground that designers and developers are all seeking…and I find that a style guide is really effective at...
BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a sha...
Pattern libraries make what you change in production a lot more easy to manage over the long term; you're able to debug th...
BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a sha...
BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a sha...
SHOW, DON’T TELL.
http://cssstats.com
http://bradfrostweb.com/blog/post/interface-inventory
ROUND UP THE TROOPS 1
PREPARE TO SCREENSHOT 2
http://bradfrost.com/blog/post/conducting-an-interface-inventory/
SCREENSHOT EXERCISE 3
INTERFACE INVENTORY CATEGORIES ๏ Global ๏ Image types ๏ Icons ๏ Navigation ๏ Forms ๏ Buttons ๏ Interactive Components ๏ Me...
PRESENT FINDINGS 4
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
REGROUP & NEXT STEPS 5
๏ Documents your interface design patterns ๏ Points out inconsistencies ๏ Helps get buy-in from organization ๏ Establishes...
AND IF THE BOSS STILL SAYS NO, DO IT ANYWAYS.
IN ORDER TO MAKE THE WHOLE, YOU NEED TO MAKE THE PARTS.
special thanks to Wolfram Nagel, SETU GmbH
special thanks to Wolfram Nagel, SETU GmbH
special thanks to Wolfram Nagel, SETU GmbH
special thanks to Wolfram Nagel, SETU GmbH
special thanks to Wolfram Nagel, SETU GmbH
ATOMIC DESIGN
ENTER KEYWORD SEARCH THE SITE SEARCH
ENTER KEYWORD SEARCH THE SITE SEARCH
ABSTRACT CONCRETE
ABSTRACT CONCRETE CREATORS CLIENTS
REFERENCE BUILD REVIEW
DAVE OLSEN@dmolsen
WHAT PATTERN LAB IS ๏ A design system builder ๏ Your comprehensive interface design system ๏ A style guide starter kit ๏ A...
https://mustache.github.io/
MOLECULE GUTS code block <div class="block block-post"> <a href="{{ url }}"> <div class="b-img"> {{> atoms-thumb }} </div>...
BASIC INCLUDE code block {{> molecules-block-post }}
ORGANISM GUTS code block <header role="banner"> {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} </h...
ORGANISM INCLUDE code block {{> organisms-header }}
TEMPLATE GUTS code block{{> organisms-header }} <main role="main"> {{# hero }} {{> molecules-hero-video }} {{/ hero }} <se...
CONTENT STRUCTURE ACTUAL CONTENT
PIPING IN REAL CONTENT code block{ "title" : "Time Inc.", "bodyClass": "home", "hero" : { "headline": "Moving People" "img...
patternlab.io
http://trentwalton.com/2011/07/14/content-choreography/
…OR DID THEY?
websitedesign & development
style guidewebsitedesign & development
style guide websitedesign & development
style guide websitedesign & development
design system style guide websitedesign & development
style guide design systemdesign & development website
A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serv...
MAKE IT MAINTAINABLE
YOU SEEK THE HOLY GRAIL.
http://rizzo.lonelyplanet.com/
style guide design systemdesign & development website Pattern API
style guide pattern labdesign & development website Grunt copy CSS, JS, Patterns
MAKE IT CROSS- DISCIPLINARY
MAKE IT APPROACHABLE
http://www.yelp.com/styleguide
http://purple.herokuapp.com
http://ux.mailchimp.com/patterns/
MAKE IT VISIBLE
When you place style guides behind constraints, teams either take an outrageously long time to get access, or they never g...
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
styleguides.io/examples.html
When I saw Salesforce’s style guide I thought it was beautiful and it's why I wanted to join this team. -Jina Bolton style...
MAKE IT AGNOSTIC
WARNING: NAMING THINGS IS REALLY FREAKING HARD. https://www.flickr.com/photos/131260238@N08/
MAKE IT CONTEXTUAL
MAKE IT LAST
http://www.google.com/design/spec/whats-new/whats-new.html
https://flic.kr/p/5YnE4z
atomicdesign.bradfrost.com
atomicdesign.bradfrost.com ONLY $10!!!
THANKS!@brad_frost
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Upcoming SlideShare
Loading in …5
×

Style Guide Best Practices at Beyond Tellerrand

85,189 views

Published on

The slides to my talk at Beyond Tellerrand conference in Berlin. You can watch the video and read the transcript here: http://bradfrost.com/blog/post/style-guide-be…ond-tellerrand/ ‎

Published in: Design, Technology
no profile picture user
Show More

Style Guide Best Practices at Beyond Tellerrand

  1. STYLE GUIDES@brad_frost
  2. Great news, team. We got the green light to redesign the homepage.
  3. That’s great news, boss!
  4. Yeah, the current homepage is super ugly!
  5. Yeah and don’t even ask about the code quality lol.
  6. Exciting! It will be great to do things right this time.
  7. Yeah we’re going to use BEM…
  8. And the visuals will be clean and flat.
  9. Yeah and we’re definitely looking into React.js
  10. And maybe this will give us the chance to finally migrate to a new CMS.
  11. Grunt.
  12. Make it so.
  13. LATHER. RINSE. REPEAT.
  14. global
  15. north america
  16. latin america
  17. chile
  18. europe
  19. india
  20. australia
  21. china
  22. hong kong
  23. taiwan
  24. huge jerk.
  25. We don’t have time for cohesion and continuity!
  26. We’re too busy DISRUPTING!
  27. ONE BRAND
  28. MOREDEVICESENVIRONMENTS PEOPLELANGUAGES CONTENT BROWSERS MEDIUMS COUNTRIES SCREENSIZES FEATURES PRODUCTSSERVICESFUNCTIONALITY CUSTOMERS FORMA USER FORMFACTORSCONTEXT
  29. STYLE GUIDES
  30. http://cargocollective.com/mcalkins/Walmart-brand-book-design
  31. brand.wvu.edu
  32. https://frontify.com/
  33. BRAND STYLE GUIDES ๏ Purpose: establish guidelines for using core brand assets ๏ Audience: the entire organization, vendors and anyone making use of brand assets ๏ Can include: Logos, typography, color palette, file templates, assets, downloads, etc
  34. https://www.google.com/design/spec/material-design/
  35. http://www.lightningdesignsystem.com/
  36. DESIGN LANGUAGE GUIDELINES ๏ Purpose: establish a design language for cohesive user experience across a suite of products and services ๏ Audience: anyone creating user experiences for the organization, mostly designers ๏ Can include: design principles, brand overlap, aesthetics, ux principles, motion, etc
  37. voiceandtone.com
  38. styleguide.mailchimp.com
  39. VOICE AND TONE GUIDELINES ๏ Purpose: establish and encourage a cohesive, appropriate tone across the entire user experience ๏ Audience: content creators and editors, anyone writing copy for the brand ๏ Can include: interface copy, marketing, documentation, blog posts, legal, alerts, etc
  40. http://www.economist.com/styleguide/
  41. http://www.dal.ca/webteam/web_style_guide/writing_for_the_web.html
  42. WRITING STYLE GUIDES ๏ Purpose: establish and encourage a cohesive writing style across all properties ๏ Audience: content creators and editors, anyone writing copy for the brand ๏ Can include: grammar, proper content structure, general writing best practices
  43. code block .thisishowwedoit { } CSS SYNTAX GUIDELINES
  44. code block .this-is-how-we-do-it { } CSS SYNTAX GUIDELINES
  45. code block .thisIsHowWeDoIt { } CSS SYNTAX GUIDELINES
  46. code block .this__is__how__we__do—-it { } CSS SYNTAX GUIDELINES
  47. code block .- -...- - ..- - —— .. . ..—— — { } CSS SYNTAX GUIDELINES
  48. https://github.com/styleguide
  49. https://github.com/styleguide/javascript
  50. https://github.com/styleguide/javascript
  51. CODE STYLE GUIDES ๏ Purpose: establish code standards for teams to write more cohesive, efficient, and maintainable code ๏ Audience: front-end developers, back-end developers, 3rd party developers, summer interns, developers developers developers ๏ Can include: development principles, HTML structure guidelines, CSS architecture, syntax, best practices, JS style and best practices, backend language syntax and best practices
  52. http://walmartlabs.github.io/web-style-guide
  53. PATTERN LIBRARIES ๏ Purpose: establish and maintain an effective interface design system to create consistent UIs, speed up production, and create a watering hole for the team ๏ Audience: anyone touching the project: designers, developers, project managers, product owners, etc ๏ Can include: global elements, typography, image types, lists, navigation, blocks, media, animations, literally anything you include in a UI
  54. styleguides.io
  55. MAKING PATTERN LIBRARIES HAPPEN
  56. $ELL IT.
  57. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion
  58. Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. -Jakob Nielson http://www.nngroup.com/articles/top-10-mistakes-web-design/
  59. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production
  60. We just copied and pasted a pattern, changed a few things, and in twenty minutes we had built a system that was responsive; it looked great on mobile and it was nice to look at. [The status page] was one of those pages that not a lot of people will see. We call them the dark corners. -Federico Holgado http://styleguides.io/podcast/federico-holgado/
  61. By having a pattern you could actually use that's already 95% of the way there, it brings up the quality of everything so those dark corners actually aren't so dark any more. -Federico Holgado http://styleguides.io/podcast/federico-holgado/
  62. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow
  63. Mostly designers will come up with rough representations of where things might live without going into too much detail because there's no longer a need to do that work up front and we can just tweak it in the browser afterwards. -Ian Feather http://styleguides.io/podcast/ian-feather/
  64. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary
  65. It is the common ground that designers and developers are all seeking…and I find that a style guide is really effective at providing that common ground. -Lincoln Mongillo http://styleguides.io/podcast/lincoln-mongillo/
  66. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test
  67. Pattern libraries make what you change in production a lot more easy to manage over the long term; you're able to debug things more effectively. You have a view into how your code base is looking across a site versus having various artifacts show up across hundreds of pages. -Lincoln Mongillo http://styleguides.io/podcast/lincoln-mongillo/
  68. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test ๏ Useful reference
  69. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test ๏ Useful reference ๏ Future-friendly foundation
  70. SHOW, DON’T TELL.
  71. http://cssstats.com
  72. http://bradfrostweb.com/blog/post/interface-inventory
  73. ROUND UP THE TROOPS 1
  74. PREPARE TO SCREENSHOT 2
  75. http://bradfrost.com/blog/post/conducting-an-interface-inventory/
  76. SCREENSHOT EXERCISE 3
  77. INTERFACE INVENTORY CATEGORIES ๏ Global ๏ Image types ๏ Icons ๏ Navigation ๏ Forms ๏ Buttons ๏ Interactive Components ๏ Media ๏ Headings ๏ Blocks ๏ Lists ๏ 3rd party stuff ๏ Advertising ๏ Messaging ๏ Animation ๏ Colors
  78. PRESENT FINDINGS 4
  79. http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
  80. REGROUP & NEXT STEPS 5
  81. ๏ Documents your interface design patterns ๏ Points out inconsistencies ๏ Helps get buy-in from organization ๏ Establishes scope of work ๏ Is the genesis of a shared vocabulary ๏ Lays the groundwork for a future pattern library INTERFACE INVENTORY
  82. AND IF THE BOSS STILL SAYS NO, DO IT ANYWAYS.
  83. IN ORDER TO MAKE THE WHOLE, YOU NEED TO MAKE THE PARTS.
  84. special thanks to Wolfram Nagel, SETU GmbH
  85. special thanks to Wolfram Nagel, SETU GmbH
  86. special thanks to Wolfram Nagel, SETU GmbH
  87. special thanks to Wolfram Nagel, SETU GmbH
  88. special thanks to Wolfram Nagel, SETU GmbH
  89. ATOMIC DESIGN
  90. ENTER KEYWORD SEARCH THE SITE SEARCH
  91. ENTER KEYWORD SEARCH THE SITE SEARCH
  92. ABSTRACT CONCRETE
  93. ABSTRACT CONCRETE CREATORS CLIENTS
  94. REFERENCE BUILD REVIEW
  95. DAVE OLSEN@dmolsen
  96. WHAT PATTERN LAB IS ๏ A design system builder ๏ Your comprehensive interface design system ๏ A style guide starter kit ๏ A design toolkit (viewport resizer and other tools)
  97. https://mustache.github.io/
  98. MOLECULE GUTS code 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>
  99. BASIC INCLUDE code block {{> molecules-block-post }}
  100. ORGANISM GUTS code block <header role="banner"> {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} </header>
  101. ORGANISM INCLUDE code block {{> organisms-header }}
  102. TEMPLATE GUTS code block{{> organisms-header }} <main role="main"> {{# hero }} {{> molecules-hero-video }} {{/ hero }} <section> {{# experience }} {{> organisms-story-feature }} {{/ experience }} </section> <section> {{# factoid-advertising }} {{> organisms-factoid }} {{/ factoid-advertising }}
  103. CONTENT STRUCTURE ACTUAL CONTENT
  104. PIPING IN REAL CONTENT code block{ "title" : "Time Inc.", "bodyClass": "home", "hero" : { "headline": "Moving People" "img": { "src": "/images/hero_beyonce.jpg", "alt": "Beyonce" } }
  105. patternlab.io
  106. http://trentwalton.com/2011/07/14/content-choreography/
  107. …OR DID THEY?
  108. websitedesign & development
  109. style guidewebsitedesign & development
  110. style guide websitedesign & development
  111. style guide websitedesign & development
  112. design system style guide websitedesign & development
  113. style guide design systemdesign & development website
  114. A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. -Nathan Curtis https://twitter.com/nathanacurtis/status/656829204235972608
  115. MAKE IT MAINTAINABLE
  116. YOU SEEK THE HOLY GRAIL.
  117. http://rizzo.lonelyplanet.com/
  118. style guide design systemdesign & development website Pattern API
  119. style guide pattern labdesign & development website Grunt copy CSS, JS, Patterns
  120. MAKE IT CROSS- DISCIPLINARY
  121. MAKE IT APPROACHABLE
  122. http://www.yelp.com/styleguide
  123. http://purple.herokuapp.com
  124. http://ux.mailchimp.com/patterns/
  125. MAKE IT VISIBLE
  126. When you place style guides behind constraints, teams either take an outrageously long time to get access, or they never get access. -Nathan Curtis http://styleguides.io/podcast/nathan-curtis
  127. http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
  128. styleguides.io/examples.html
  129. When I saw Salesforce’s style guide I thought it was beautiful and it's why I wanted to join this team. -Jina Bolton styleguides.io/podcast/jina-bolton
  130. MAKE IT AGNOSTIC
  131. WARNING: NAMING THINGS IS REALLY FREAKING HARD. https://www.flickr.com/photos/131260238@N08/
  132. MAKE IT CONTEXTUAL
  133. MAKE IT LAST
  134. http://www.google.com/design/spec/whats-new/whats-new.html
  135. https://flic.kr/p/5YnE4z
  136. atomicdesign.bradfrost.com
  137. atomicdesign.bradfrost.com ONLY $10!!!
  138. THANKS!@brad_frost

×