Your SlideShare is downloading. ×
0
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
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

Style Guide Best Practices

13,708

Published on

Brad Frost …

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
2 Comments
143 Likes
Statistics
Notes
  • 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
  • This post is very useful and helpful. I like your posts. I always follow your Posts. I hope, in the future, you will present us with such important posts.Computer and Technology Releted get more Tutorial/tips,Visite this Site.
    Computer tech BD AND IT Tips Youtube Tutorial
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More
No Downloads
Views
Total Views
13,708
On Slideshare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
180
Comments
2
Likes
143
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. 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

×