Designing Inspired Style Guides

433acaea1012b25d97ae66da9b998dad?s=47 Andy Clarke
January 10, 2017

Designing Inspired Style Guides

“Style guide” is an umbrella term for several types of design documentation; static style or visual identity guides, voice and tone, front-end code guidelines or component/pattern libraries. These all offer something different but often have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router. In this fast-paced talk, Andy demonstrates ways to improve how style guides look and make them better at communicating design information to creatives without it getting in the way of what technical people need.

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

January 10, 2017
Tweet

Transcript

  1. Designing inspired 
 style guides Andy Clarke Design Exchange Nottingham

  2. https://stuffandnonsense.co.uk

  3. None
  4. To Andy Clarke, who’s 
 been talking about 
 design

    systems and 
 atoms before it was the 
 hip thing to do. Thank you for all your writing and thinking, but you’re still not getting my dog. Brad Frost http://atomicdesign.bradfrost.com
  5. None
  6. None
  7. Style guide types • Static style/visual identity guides • Voice

    and tone guides • Front-end code guidelines • Component/pattern libraries
  8. Style guide types Static style/visual identity guides Voice and tone

    guides Front-end code guidelines Component/pattern libraries
  9. http://patternprimer.adactio.com

  10. None
  11. https://britishrailmanual.com British Rail Corporate Identity Manual

  12. https://standardsmanual.com NASA Graphics Standards Manual

  13. https://standardsmanual.com New York City Transit Authority Graphics Standards Manual

  14. https://standardsmanual.com Official Symbol of The American Revolution Bicentennial Graphics Standards

    Manual
  15. http://designguidelines.co

  16. None
  17. http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

  18. http://ggw-prototype.goalgorilla.com/design-elements/colors.html

  19. http://skyglobal.github.io/web-toolkit/#base-styles--colours

  20. http://www.thetimes.co.uk/styleguide/colours

  21. http://govuk-elements.herokuapp.com/colour/

  22. https://material.io/guidelines/style/color.html

  23. https://material.io/guidelines/style/color.html https://material.io/guidelines/style/color.html

  24. https://material.io/guidelines/style/color.html

  25. Use colour as a presentation element for either decorative purposes

    or to convey information. Government of Canada’s 
 Web Experience Toolkit http://wet-boew.github.io/wet-boew-styleguide/v4/design/colour-en.html
  26. The corporate color system reflects a rich, dynamic, multi-dimensional Adobe.

    Adobe is no longer simply a one-dimensional “red” company. Adobe corporate brand guidelines https://issuu.com/bellfrog/docs/adobe-corporate-rand-guidelines
  27. A flexible, yet distinctly American palette designed to communicate warmth

    and trustworthiness while meeting the highest standards of 508 color contrast requirements. Draft U.S. web design standards https://standards.usa.gov/colors/
  28. The (dark) Oxford blue is used primarily in general page

    furniture such as the backgrounds on the header and footer. This makes for a strong brand presence throughout the site. Because it features so strongly in these areas, it is not recommended to use it in large areas elsewhere. The University of Oxford https://www.ox.ac.uk/public-affairs/style-guide/digital-style-guide?wssl=1
  29. http://brand.opentable.com

  30. https://issuu.com/bondo/docs/foursquare © 2011 FOURSQUARE LABS FOURSQUARE BRAND BOOK | 8

    Our colors are what gives us our personality. We’re bright, bold and colorful. 1. LOGO COLORS These are our logo colors. Use these sparingly so as not to outshine our logo. 2. SUPPORTING COLOR PALETTE These make up our core color palette. 3. PERCENTAGES Use the supporting color palette in the outlined percentages in all marketing material. COLORS FOURSQUARE LOGO BLUE PMS 307 CMYK 100, 45, 16, 1 RGB 0, 114, 177 HEX # 0072b1 BLUE PMS 312C CMYK 0, 0, 0, 62 RGB 0, 170, 210 HEX # 0cbadf 60% 15% 10% 5% 10% FOURSQUARE LOGO YELLOW PMS 600 CMYK 7, 2, 40, 0 RGB 238, 235, 172 HEX # eeebac GREEN PMS 375C CMYK 48, 0, 100, 0 RGB 143, 212, 0 HEX #8fd400 ORANGE PMS 151 C CMYK 0, 65, 100, 0 RGB 255, 121, 0 HEX # ff7900 YELLOW PMS 116C CMYK 0, 19, 100, 0 RGB 255, 203, 0 HEX # ffcb00 GRAY PMS 427C CMYK 17, 11, 13, 0 RGB 209, 212, 211 HEX # d1d4d3 1 2 3
  31. https://www.behance.net/gallery/2341732/STIHL-Making-It-Easy-Brand-Guidelines

  32. https://www.behance.net/gallery/2341732/STIHL-Making-It-Easy-Brand-Guidelines ALL USAGE COLOUR LOGO Use this colour with this

    colour 51 50 Making Colour Easy™ Making Colour Easy™ Pantone® 165 Pantone® 428 CMYK 0/65/100/0 CMYK 0/0/0/20 RGB 243/122/31 RGB 180/180/180
  33. https://www.behance.net/gallery/2341732/STIHL-Making-It-Easy-Brand-Guidelines Mostly on this colour and this colour 52 53

    COLOUR COLOUR Making Colour Easy™ Making Colour Easy™ Pantone® 165 Pantone® 428 CMYK 0/65/100/0 CMYK 0/0/0/20 RGB 243/122/31 RGB 180/180/180
  34. CORPORATE IDENTITY MANUAL THE GOVERNMENT OF ALBERTA | CORPORATE IDENTITY

    MANUAL | EDITION 21 | 02.2016 E-mail visual@gov.ab.ca for more information or guidance. Corporate Identity Elements Colour is a strong and communicative element to any corporate identity. The Alberta Corporate Colour Pallette is bold and dynamic and takes its inspiration from the richness and diversity of our landscape. The harmonious blend of colours provides great flexibility and will bring vibrance to all communication materials. PRAIRIE PANTONE 7406 DUSK PANTONE 226 SUNSET PANTONE 151 PASTURE PANTONE 376 SKY PANTONE 312 STONE PANTONE 431 1.4.1 Colour https://corporateidentity.alberta.ca/downloads/Alberta_Corporate_Identity_Manual.pdf
  35. CORPORATE IDENTITY MANUAL THE GOVERNMENT OF ALBERTA | CORPORATE IDENTITY

    MANUAL | EDITION 21 | 02.2016 E-mail visual@gov.ab.ca for more information or guidance. Corporate Identity Elements 1.4.2 Corporate colours - Primary Palette DUSK STONE PANTONE COATED pantone 431C PANTONE UNCOATED pantone 431U CMYK 11C/1M/0Y/64K RGB 106R/115G/123B HEXADECIMAL # 5f6a72 PANTONE COATED pantone 226C PANTONE UNCOATED pantone 226U CMYK 0C/99M/0Y/0K RGB 212R/0G/114B HEXADECIMAL # d40072 PANTONE COATED pantone 151C PANTONE UNCOATED pantone 151U CMYK 0C/48M/95Y/0K RGB 255R/121G/0B HEXADECIMAL # ff7900 PANTONE COATED pantone 7406C PANTONE UNCOATED pantone 7406U CMYK 0C/18M/100Y/0K RGB 237R/183G/10B HEXADECIMAL # edb700 PANTONE COATED pantone 376C PANTONE UNCOATED pantone 382U CMYK 50C/0M/100Y/0K RGB 119R/184G/0B HEXADECIMAL # 77b800 SUNSET PRAIRIE PASTURE SKY PANTONE COATED pantone 312C PANTONE UNCOATED pantone 312U CMYK 96C/0M/11Y/0K RGB 0R/170G/210B HEXADECIMAL # 00aad2 The Alberta Corporate Primary Colour Palette is bold and vibrant, made up of the six colours used in the Alberta Signature. These colours reflect our diverse landscape. The consistent use of these core colours defines and reinforces our distinctive character and should be used on all communications and promotional materials. We have enlisted the standards of the Pantone Matching System (PMS), which is a universally recognized colour matching system based on lithography printing inks. The colour palettes include specific spot colour references for both coated and uncoated paper stocks (please note that these numbers may differ due to the way inks appear on different stocks) and process match breakdowns (CMYK) for printing applications with limited budgets. Also included are RGB equivalents for use in word processing and presentation software as well as hexadecimal equivalents for emitted light and web applications. https://corporateidentity.alberta.ca/downloads/Alberta_Corporate_Identity_Manual.pdf
  36. CORPORATE IDENTITY MANUAL THE GOVERNMENT OF ALBERTA | CORPORATE IDENTITY

    MANUAL | EDITION 21 | 02.2016 E-mail visual@gov.ab.ca for more information or guidance. Corporate Identity Elements Reaching our full Potential. Reaching our full Potential. Reaching our full Potential. Reaching our full Potential. Reaching our full Potential. Reaching our full Potential. Reaching our full Potential. Reaching our full Potential. Reaching our full Potential. Reaching our full Potential. Reaching our full Potential. Reaching our full Potential. Colour is used as one of the key elements to define the look of our Corporate Identity. We use a tone-on-tone approach of compatible colour combinations. They are neighbours on the colour wheel and live harmoniously. 1.4.4 Colour - Tone on Tone https://corporateidentity.alberta.ca/downloads/Alberta_Corporate_Identity_Manual.pdf
  37. 2 1

  38. 10 9 Strategy Arts without boundaries This is the guiding

    principle that defines our brand and drives our activities. It is what makes the Barbican distinctive and is the starting point for all our visual communications. Proposition http://www.barbican.org.uk/branding/
  39. http://www.barbican.org.uk/branding/ 52 51 Rules and tools Celebrate our flexibility and

    creativity There’s a lot you can do with our carrier. So do it. Experiment with its form and scale. Is there a new way you can apply it, position it, repeat it, or use it to represent an idea such as music or movement or the passage of time? Play with flat colour and gradients or place images within it. Don’t be systematic or samey. Explore, experiment. There’s only one rule. Don’t reduce the carrier to just decoration; always give it a function, a meaning. Whether you use it to hold information, an image or to add flow to a composition, always try to relate its use to the content. But while the carrier is an important part of our visual identity, don’t feel you have to use it in every communication. If it doesn’t add anything meaningful or starts to look like decoration, leave it out. We recommend using no more than three carriers in a single communication. Carrier
  40. https://issuu.com/janjaneczek/docs/macmillanguidelinesv13fullb

  41. https://issuu.com/janjaneczek/docs/macmillanguidelinesv13fullb

  42. https://issuu.com/janjaneczek/docs/macmillanguidelinesv13fullb

  43. https://issuu.com/janjaneczek/docs/macmillanguidelinesv13fullb

  44. http://www.mashcreative.co.uk/work/royal-mail-rethink/

  45. http://www.mashcreative.co.uk/work/royal-mail-rethink/

  46. http://www.mashcreative.co.uk/work/royal-mail-rethink/

  47. XXXXXXXX https://issuu.com/amandymichiru/docs/gsm_rgb

  48. https://issuu.com/warshajamnadas/docs/small

  49. https://issuu.com/warshajamnadas/docs/small

  50. https://issuu.com/warshajamnadas/docs/small

  51. https://issuu.com/bondo/docs/bing_product_guidelines_copy

  52. None
  53. None
  54. None
  55. None
  56. Design principles and living style guide Imaginatively designed elements for

    digital products and websites inspired.guide
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. 25 Adobe Corporate Brand Guidelines | Adobe Confidential | 25

    October 2010 Primary typeface - Adobe Clean ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 =~!@#$%^&*()+[]\{}|:;’:”<>?,./ Adobe Clean should be used for headlines and may be used for copy. Short headlines or labels can be all caps, otherwise headlines and subheads are sentence case. The introduction of the proprietary typeface Adobe Clean in April 2009 was to help differentiate Adobe in the marketplace. It replaces the previous sans serif corporate font, Myriad Pro. It will not be available for license to the general public. To use Adobe Clean well along side the corporate logo, which continues to use Myriad Pro, avoid condensed or extended type. Adobe Clean Light Adobe Clean Light Italic Adobe Clean Regular Adobe Clean Italic Adobe Clean Bold Adobe Clean Bold Italic Adobe Clean SemiCondensed Adobe Clean SemiCondensed Italic Adobe Clean Bold SemiCondensed Adobe Clean Bold SemiCondensed Italic Note: Alternate glyphs are available for the letter “g” and number “1” in Adobe Clean Regular. Secondary type face - Minion Pro ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 =~!@#$%^&*()+[]\{}|:;’:”<>?,./ Minion Pro should be used primarily for extended running body copy in longer, multiple-page documents, such as brochures and datasheets. Avoid using weights other than Minion Pro Regular. Use Minion Pro SemiCondensed Bold for emphasis when needed. Avoid using Minion smaller than 9pt. Use standard numerals; do not use Minion’s Old Style numerals. Minion Pro Semibold Condensed Minion Pro Semibold Condensed Italic Minion Pro Regular Minion Pro Italic Minion Pro Semibold Minion Pro Semibold Italic Minion Pro Bold Minion Pro Bold Italic Typography: Corporate typefaces As with our logo, consistent use of our corporate typefaces—Adobe Clean and Minion® Pro—reinforces Adobe’s brand identity. Both are OpenType™, a cross-platform format that provides richer linguistic support through widely expanded character sets and advanced layout features. Both fonts are available for download from Marketing Hub under Corporate > Corporate Fonts.
  76. https://design.atlassian.com/product/

  77. https://gel.westpacgroup.com.au

  78. http://www.thetimes.co.uk/styleguide/getting-started

  79. https://www.timewarnercable.com/en/enjoy/prototypes/style-guide-prototype/styleguide.html

  80. https://www.timewarnercable.com/en/enjoy/prototypes/style-guide-prototype/styleguide.html https://marvelapp.com/styleguide/overview/introduction

  81. None
  82. None
  83. None
  84. https://standardsmanual.com New York City Transit Authority Graphics Standards Manual

  85. © https://standardsmanual.com

  86. © https://standardsmanual.com

  87. © https://standardsmanual.com

  88. © https://standardsmanual.com

  89. © https://standardsmanual.com

  90. © https://standardsmanual.com

  91. https://standardsmanual.com NASA Graphics Standards Manual

  92. © https://standardsmanual.com

  93. © https://standardsmanual.com

  94. © https://standardsmanual.com

  95. © https://standardsmanual.com

  96. © https://standardsmanual.com

  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. http://codeforamerica.clearleft.com

  113. https://www.mapbox.com/base/styling/icons/

  114. https://design.atlassian.com/product/foundations/iconography/

  115. http://govuk-elements.herokuapp.com/icons-images/

  116. http://rizzo.lonelyplanet.com/styleguide/design-elements/destination-icons

  117. https://britishrailmanual.com British Rail Corporate Identity Manual http://www.doublearrow.co.uk/manual.htm

  118. https://britishrailmanual.com

  119. https://britishrailmanual.com

  120. https://britishrailmanual.com

  121. https://britishrailmanual.com

  122. https://britishrailmanual.com

  123. © https://britishrailmanual.com

  124. https://standardsmanual.com New York City Transit Authority Graphics Standards Manual

  125. © https://standardsmanual.com

  126. © https://standardsmanual.com

  127. https://issuu.com/bondo/docs/skype_brand_book_-_look

  128. https://issuu.com/bondo/docs/skype_brand_book_-_look

  129. https://standardsmanual.com Official Symbol of The American Revolution Bicentennial Graphics Standards

    Manual
  130. © https://standardsmanual.com

  131. © https://standardsmanual.com

  132. © https://standardsmanual.com

  133. © https://standardsmanual.com

  134. © https://standardsmanual.com

  135. None
  136. None
  137. None
  138. Incorrect Correct

  139. Incorrect Correct

  140. None
  141. None
  142. None
  143. None
  144. None
  145. None
  146. None
  147. None
  148. None
  149. None
  150. None
  151. None
  152. https://issuu.com/warshajamnadas/docs/small

  153. https://gel.westpacgroup.com.au

  154. https://medium.com/salesforce-ux/defining-principles-to-drive-design- decisions-b647b68fb057

  155. http://red-stone.com/projects/big-lottery-fund-bpr-identity

  156. Thank you 
 very much @malarkey Design Exchange Nottingham

  157. speakerdeck.com/ malarkey @malarkey Design Exchange Nottingham