Designing Inspired Style Guides (Perth, May 2017)

“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.

Transcript

1. Designing inspired 
 style guides Andy Clarke YOW West, Perth, May 2017
2. Head of Design ansarada.com
3. https://stuffandnonsense.co.uk
5. 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
8. Style guide types • Static style/visual identity guides • Voice and tone guides • Front-end code guidelines • Component/pattern libraries
9. Style guide types Static style/visual identity guides Voice and tone guides Front-end code guidelines Component/pattern libraries
10. http://patternprimer.adactio.com
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. http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
17. http://ggw-prototype.goalgorilla.com/design-elements/colors.html
18. http://skyglobal.github.io/web-toolkit/#base-styles--colours
19. http://www.thetimes.co.uk/styleguide/colours
20. http://govuk-elements.herokuapp.com/colour/
21. https://material.io/guidelines/style/color.html https://material.io/guidelines/style/color.html
22. 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
23. 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
24. 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/
25. 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
26. http://brand.opentable.com
27. 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
28. https://www.behance.net/gallery/2341732/STIHL-Making-It-Easy-Brand-Guidelines
29. 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
30. 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
31. CORPORATE IDENTITY MANUAL 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
32. 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
33. 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
34. 2 1
35. 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/
36. 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
37. https://issuu.com/janjaneczek/docs/macmillanguidelinesv13fullb
38. https://issuu.com/janjaneczek/docs/macmillanguidelinesv13fullb
39. https://issuu.com/janjaneczek/docs/macmillanguidelinesv13fullb
40. https://issuu.com/janjaneczek/docs/macmillanguidelinesv13fullb
41. http://www.mashcreative.co.uk/work/royal-mail-rethink/
42. http://www.mashcreative.co.uk/work/royal-mail-rethink/
43. http://www.mashcreative.co.uk/work/royal-mail-rethink/
44. XXXXXXXX https://issuu.com/amandymichiru/docs/gsm_rgb
45. https://issuu.com/warshajamnadas/docs/small
46. https://issuu.com/warshajamnadas/docs/small
47. https://issuu.com/warshajamnadas/docs/small
48. https://issuu.com/bondo/docs/bing_product_guidelines_copy
51. Design principles and living style guide Imaginatively designed elements for digital products and websites
69. 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.
70. https://design.atlassian.com/product/
71. https://gel.westpacgroup.com.au
72. http://www.thetimes.co.uk/styleguide/getting-started
73. https://www.timewarnercable.com/en/enjoy/prototypes/style-guide-prototype/styleguide.html
74. https://www.timewarnercable.com/en/enjoy/prototypes/style-guide-prototype/styleguide.html https://marvelapp.com/styleguide/overview/introduction
78. https://standardsmanual.com New York City Transit Authority Graphics Standards Manual
79. © https://standardsmanual.com
80. © https://standardsmanual.com
81. © https://standardsmanual.com
82. © https://standardsmanual.com
83. © https://standardsmanual.com
84. © https://standardsmanual.com
85. https://standardsmanual.com NASA Graphics Standards Manual
86. © https://standardsmanual.com
87. © https://standardsmanual.com
88. © https://standardsmanual.com
89. © https://standardsmanual.com
90. © https://standardsmanual.com
91. © https://standardsmanual.com
106. http://codeforamerica.clearleft.com
107. https://www.mapbox.com/base/styling/icons/
108. https://design.atlassian.com/product/foundations/iconography/
109. http://govuk-elements.herokuapp.com/icons-images/
110. http://rizzo.lonelyplanet.com/styleguide/design-elements/destination-icons
111. https://britishrailmanual.com British Rail Corporate Identity Manual http://www.doublearrow.co.uk/manual.htm
112. https://britishrailmanual.com
113. https://britishrailmanual.com
114. https://britishrailmanual.com
115. https://britishrailmanual.com
116. https://britishrailmanual.com
117. © https://britishrailmanual.com
118. https://standardsmanual.com New York City Transit Authority Graphics Standards Manual
119. © https://standardsmanual.com
120. © https://standardsmanual.com
121. https://issuu.com/bondo/docs/skype_brand_book_-_look
122. https://issuu.com/bondo/docs/skype_brand_book_-_look
123. https://standardsmanual.com Official Symbol of The American Revolution Bicentennial Graphics Standards Manual
124. © https://standardsmanual.com
125. © https://standardsmanual.com
126. © https://standardsmanual.com
130. Incorrect Correct
142. https://polaris.shopify.com
143. https://polaris.shopify.com
144. https://polaris.shopify.com
145. https://polaris.shopify.com
146. https://polaris.shopify.com
147. https://polaris.shopify.com
148. https://medium.com/salesforce-ux/defining-principles-to-drive-design- decisions-b647b68fb057
149. http://red-stone.com/projects/big-lottery-fund-bpr-identity
150. speakerdeck.com/ malarkey @malarkey YOW West, Perth, May 2017
151. Thank you 
 very much @malarkey YOW West, Perth, May 2017