Style Guide Best Practices
•
214 likes•106,420 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Style Guide Best Practices
Similar to Style Guide Best Practices (20)
More from Brad Frost
More from Brad Frost (15)
Recently uploaded
Recently uploaded (20)
Style Guide Best Practices
- 3. Great news, team. We got the green light to redesign the homepage.
- 6. Yeah, the current homepage is super ugly!
- 7. Yeah and don’t even ask about the code quality lol.
- 8. Exciting! It will be great to do things right this time.
- 9. Yeah we’re going to use BEM…
- 10. And the visuals will be clean and flat.
- 11. Yeah and we’re definitely looking into React.js
- 12. And maybe this will give us the chance to finally migrate to a new CMS.
- 13. Grunt.
- 14. Make it so.
- 30. global
- 31. north america
- 32. latin america
- 33. chile
- 34. europe
- 35. india
- 36. australia
- 37. china
- 38. hong kong
- 39. taiwan
- 41. huge jerk.
- 49. We don’t have time for cohesion and continuity!
- 51. ONE BRAND
- 53. STYLE GUIDES
- 57. brand.wvu.edu
- 65. 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
- 71. 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
- 73. voiceandtone.com
- 77. 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
- 84. 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
- 87. code block .thisishowwedoit { } CSS SYNTAX GUIDELINES
- 88. code block .this-is-how-we-do-it { } CSS SYNTAX GUIDELINES
- 89. code block .thisIsHowWeDoIt { } CSS SYNTAX GUIDELINES
- 90. code block .this__is__how__we__do—-it { } CSS SYNTAX GUIDELINES
- 91. code block .- -...- - ..- - —— .. . ..—— — { } CSS SYNTAX GUIDELINES
- 95. 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
- 103. 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
- 106. MAKING PATTERN LIBRARIES HAPPEN
- 107. $ELL IT.
- 108. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion
- 109. 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/
- 110. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production
- 111. 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/
- 112. 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/
- 113. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow
- 114. 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/
- 115. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary
- 116. 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/
- 117. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test
- 118. 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/
- 119. BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test ๏ Useful reference
- 120. 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
- 121. SHOW, DON’T TELL.
- 122. http://cssstats.com
- 128. ROUND UP THE TROOPS 1
- 133. INTERFACE INVENTORY CATEGORIES ๏ Global ๏ Image types ๏ Icons ๏ Navigation ๏ Forms ๏ Buttons ๏ Interactive Components ๏ Media ๏ Headings ๏ Blocks ๏ Lists ๏ 3rd party stuff ๏ Advertising ๏ Messaging ๏ Animation ๏ Colors
- 136. PRESENT FINDINGS 4
- 138. REGROUP & NEXT STEPS 5
- 139. ๏ 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
- 140. AND IF THE BOSS STILL SAYS NO, DO IT ANYWAYS.
- 141. 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
- 142. IN ORDER TO MAKE THE WHOLE, YOU NEED TO MAKE THE PARTS.
- 143. ATOMIC DESIGN
- 148. ENTER KEYWORD SEARCH THE SITE SEARCH
- 149. ENTER KEYWORD SEARCH THE SITE SEARCH
- 163. ABSTRACT CONCRETE
- 168. DAVE OLSEN@dmolsen
- 169. 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)
- 176. 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>
- 177. BASIC INCLUDE code block {{> molecules-block-post }}
- 180. ORGANISM GUTS code block <header role="banner"> {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} </header>
- 181. ORGANISM INCLUDE code block {{> organisms-header }}
- 185. 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 }}
- 187. CONTENT STRUCTURE ACTUAL CONTENT
- 191. PIPING IN REAL CONTENT code block{ "title" : "Time Inc.", "bodyClass": "home", "hero" : { "headline": "Moving People" "img": { "src": "/images/hero_beyonce.jpg", "alt": "Beyonce" } }
- 192. patternlab.io
- 210. …OR DID THEY?
- 212. 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
- 215. MAKE IT MAINTAINABLE
- 216. YOU SEEK THE HOLY GRAIL.
- 223. MAKE IT APPROACHABLE
- 227. MAKE IT VISIBLE
- 228. 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
- 232. 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/
- 233. 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
- 234. MAKE IT AGNOSTIC
- 238. WARNING: NAMING THINGS IS REALLY FREAKING HARD. https://www.flickr.com/photos/131260238@N08/
- 241. MAKE IT CONTEXTUAL
- 243. MAKE IT LAST
- 248. styleguides.io
- 252. THANKS!@brad_frost