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 Guide Best Practices

61,024 views

Published on

Brad Frost
Web designer

Style Guide Best Practices
We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices and environments. That’s a tall order in and of itself, but once you factor in other team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. With so many variables to consider, we need solid ground to stand on. Style guides are quickly proving to be foundational tools for tackling this increasingly-diverse web landscape while still maintaining your sanity. Style guides promote consistency, establish a shared vocabulary, make testing easier, and lay a future-friendly foundation. This session will detail best practices and considerations for creating and maintaining style guides, so you can set up your organization for success.

Published in: Design, Internet
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Looking for people, for a home based job in marketing indusrty we will help you get results FAST, even if you’re a total beginner and have never had any online success before. You will start your own online business. Step-by-step guide in all details. No investments, no bosses, no fees. please visit getpaidforonlinejobs.com and get your free access to our world of successful people
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Learned a lot from this presentation. You kept it very interesting, thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Style Guide Best Practices

  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. 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
  33. https://www.google.com/design/spec/material-design/
  34. 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
  35. voiceandtone.com
  36. 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
  37. http://www.economist.com/styleguide/
  38. http://www.dal.ca/webteam/web_style_guide/writing_for_the_web.html
  39. 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
  40. code block .thisishowwedoit { } CSS SYNTAX GUIDELINES
  41. code block .this-is-how-we-do-it { } CSS SYNTAX GUIDELINES
  42. code block .thisIsHowWeDoIt { } CSS SYNTAX GUIDELINES
  43. code block .this__is__how__we__do—-it { } CSS SYNTAX GUIDELINES
  44. code block .- -...- - ..- - —— .. . ..—— — { } CSS SYNTAX GUIDELINES
  45. https://github.com/styleguide
  46. https://github.com/styleguide/javascript
  47. https://github.com/styleguide/javascript
  48. 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
  49. http://walmartlabs.github.io/web-style-guide
  50. 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
  51. MAKING PATTERN LIBRARIES HAPPEN
  52. $ELL IT.
  53. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion
  54. 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/
  55. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production
  56. 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/
  57. 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/
  58. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow
  59. 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/
  60. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary
  61. 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/
  62. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test
  63. It makes what you change in production a lot more easy to manage over the long term; you're able to debug things more effectively. You're able to 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/
  64. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test ๏ Useful reference
  65. 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
  66. SHOW, DON’T TELL.
  67. http://cssstats.com
  68. http://bradfrostweb.com/blog/post/interface-inventory
  69. ROUND UP THE TROOPS 1
  70. PREPARE TO SCREENSHOT 2
  71. http://bradfrost.com/blog/post/conducting-an-interface-inventory/
  72. SCREENSHOT EXERCISE 3
  73. INTERFACE INVENTORY CATEGORIES ๏ Global ๏ Image types ๏ Icons ๏ Navigation ๏ Forms ๏ Buttons ๏ Interactive Components ๏ Media ๏ Headings ๏ Blocks ๏ Lists ๏ 3rd party stuff ๏ Advertising ๏ Messaging ๏ Animation ๏ Colors
  74. PRESENT FINDINGS 4
  75. http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
  76. REGROUP & NEXT STEPS 5
  77. ๏ 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
  78. AND IF THE BOSS STILL SAYS NO, DO IT ANYWAYS.
  79. You just sneak it in. It's what I'm going to do to make the quality of the work better. And I don't have to say it. It starts in the sales process. You just build enough budget so that you can do it. You don't have a conversation about it, it's just par for the course. You don't have to ask permission. -Dan Mall http://www.stuffandnonsense.co.uk/blog/about/unfinished-business-episode-105-seventeen-coats-of-bullshit
  80. IN ORDER TO MAKE THE WHOLE, YOU NEED TO MAKE THE PARTS.
  81. ATOMIC DESIGN
  82. ENTER KEYWORD SEARCH THE SITE SEARCH
  83. ENTER KEYWORD SEARCH THE SITE SEARCH
  84. ABSTRACT CONCRETE
  85. ABSTRACT CONCRETE CREATORS CLIENTS
  86. REFERENCE BUILD REVIEW
  87. http://styleguides.io/tools.html
  88. DAVE OLSEN@dmolsen
  89. 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)
  90. https://mustache.github.io/
  91. 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>
  92. BASIC INCLUDE code block {{> molecules-block-post }}
  93. ORGANISM GUTS code block <header role="banner"> {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} </header>
  94. ORGANISM INCLUDE code block {{> organisms-header }}
  95. 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 }}
  96. CONTENT STRUCTURE ACTUAL CONTENT
  97. PIPING IN REAL CONTENT code block{ "title" : "Time Inc.", "bodyClass": "home", "hero" : { "headline": "Moving People" "img": { "src": "/images/hero_beyonce.jpg", "alt": "Beyonce" } }
  98. patternlab.io
  99. http://trentwalton.com/2011/07/14/content-choreography/
  100. …OR DID THEY?
  101. Putting a style guide off to the end or treating it as a separate thing is just asking for it to just sort of die on the vine or become outdated and obsolete. -Jina Bolton styleguides.io/podcast/jina-bolton
  102. MAKE IT MAINTAINABLE
  103. YOU SEEK THE HOLY GRAIL.
  104. http://rizzo.lonelyplanet.com/
  105. MAKE IT CROSS- DISCIPLINARY
  106. MAKE IT APPROACHABLE
  107. http://www.yelp.com/styleguide
  108. http://sfdc-styleguide.herokuapp.com
  109. http://purple.herokuapp.com
  110. MAKE IT VISIBLE
  111. When you start to place these kinds of assets behind constraints, many teams either take an outrageously long time to get access, or they never get access. -Nathan Curtis http://styleguides.io/podcast/nathan-curtis
  112. http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
  113. styleguides.io/examples.html
  114. Companies are using their style guide as a testament to what their belief system is and also an indicator of the quality of their organization; they're essentially using it as a recruiting tool. -Nathan Curtis http://styleguides.io/podcast/nathan-curtis/
  115. 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
  116. MAKE IT AGNOSTIC
  117. WARNING: NAMING THINGS IS REALLY FREAKING HARD. https://www.flickr.com/photos/131260238@N08/
  118. MAKE IT CONTEXTUAL
  119. MAKE IT LAST
  120. http://www.google.com/design/spec/whats-new/whats-new.html
  121. https://flic.kr/p/5YnE4z
  122. styleguides.io
  123. http://styleguides.io/podcast
  124. atomicdesign.bradfrost.com
  125. atomicdesign.bradfrost.com ONLY $10!!!
  126. THANKS!@brad_frost

×