Designing inspired style guides - by Andy Clarke

2020-02-27 436浏览

1.Designing inspired   style guides Andy Clarke YOW West, Perth, May 2017
2.Head of Design ansarada.com
3.https://stuffandnonsense.co.uk
4.
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 Frosthttp://atomicdesign.bradfrost.com
6.
7.
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.British Rail Corporate Identity Manualhttps://britishrailmanual.com
12.NASA Graphics Standards Manualhttps://standardsmanual.com
13.New York City Transit Authority Graphics Standards Manualhttps://standardsmanual.com
14.Official Symbol of The American Revolution Bicentennial Graphics Standards Manualhttps://standardsmanual.com
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
22.Use colour as a presentation element for either decorative purposes or to convey information. Government of Canada’s   Web Experience Toolkithttp://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 guidelineshttps://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 standardshttps://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 Oxfordhttps://www.ox.ac.uk/public-affairs/style-guide/digital-style-guide?wssl=1
26.http://brand.opentable.com
27.1 COLORS FOURSQUARE LOGO BLUE FOURSQUARE LOGO YELLOW PMS 307 PMS 600 CMYK 100, 45, 16, 1 CMYK 7, 2, 40, 0 RGB 0, 114, 177 RGB 238, 235, 172 HEX # 0072b1 HEX # eeebac 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. 2 3. PERCENTAGES Use the supporting color palette in the outlined percentages in all marketing material. BLUE PMS GREEN 312C PMS 375C ORANGE YELLOW GRAY PMS 151 C PMS 116C PMS 427C CMYK 0, 0, 0, 62 CMYK 48, 0, 100, 0 CMYK 0, 65, 100, 0 CMYK 0, 19, 100, 0 CMYK 17, 11, 13, 0 RGB 0, 170, 210 RGB 143, 212, 0 RGB 255, 121, 0 RGB 255, 203, 0 RGB 209, 212, 211 HEX # 0cbadf HEX #8fd400 HEX # ff7900 HEX # ffcb00 HEX # d1d4d3 3 60% 15% 10% 5% 10% © 2011 FOURSQUARE LABS FOURSQUARE BRAND BOOK 8https://issuu.com/bondo/docs/foursquare
28.https://www.behance.net/gallery/2341732/STIHL-Making-It-Easy-Brand-Guidelines
29.Making Colour Easy™ Making Colour Easy™ LOGO USAGE COLOUR ALL Use this colour Pantone 165 ® CMYK 0/65/100/0 RGB 243/122/31 with this colour Pantone 428 ® CMYK 0/0/0/20 50 RGB 180/180/180 51https://www.behance.net/gallery/2341732/STIHL-Making-It-Easy-Brand-Guidelines
30.Making Colour Easy™ Making Colour Easy™ COLOUR COLOUR Mostly on this colour Pantone 165 ® CMYK 0/65/100/0 RGB 243/122/31 and this colour Pantone 428 ® CMYK 0/0/0/20 52 RGB 180/180/180 53https://www.behance.net/gallery/2341732/STIHL-Making-It-Easy-Brand-Guidelines
31.CORPORATE IDENTITY MANUAL 1.4.1 Corporate Identity Elements Colour 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. DUSK SKY PANTONE 226 PANTONE 312 STONE PANTONE 431 SUNSET PANTONE 151 PASTURE PANTONE 376 PRAIRIE PANTONE 7406 E-mail visual@gov.ab.ca for more information or guidance.https://corporateidentity.alberta.ca/downloads/Alberta_Corporate_Identity_Manual.pdf
32.CORPORATE IDENTITY MANUAL 1.4.2 Corporate Identity Elements Corporate colours - Primary Palette 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. E-mail visual@gov.ab.ca for more information or guidance. PANTONE COATED pantone 431C PANTONE COATED pantone 226C PANTONE COATED pantone 151C PANTONE COATED pantone 7406C PANTONE COATED pantone 376C PANTONE COATED pantone 312C PANTONE UNCOATED pantone 431U PANTONE UNCOATED pantone 226U PANTONE UNCOATED pantone 151U PANTONE UNCOATED pantone 7406U PANTONE UNCOATED pantone 382U PANTONE UNCOATED pantone 312U CMYK 11C/1M/0Y/64K CMYK 0C/99M/0Y/0K CMYK 0C/48M/95Y/0K CMYK 0C/18M/100Y/0K CMYK 50C/0M/100Y/0K CMYK 96C/0M/11Y/0K RGB 106R/115G/123B RGB 212R/0G/114B RGB 255R/121G/0B RGB 237R/183G/10B RGB 119R/184G/0B RGB 0R/170G/210B HEXADECIMAL # 5f6a72 HEXADECIMAL # d40072 HEXADECIMAL # ff7900 HEXADECIMAL # edb700 HEXADECIMAL # 77b800 HEXADECIMAL # 00aad2 STONE DUSK SUNSET PRAIRIE PASTURE SKY THE GOVERNMENT OF ALBERTA CORPORATE IDENTITY MANUAL EDITION 21 02.2016https://corporateidentity.alberta.ca/downloads/Alberta_Corporate_Identity_Manual.pdf
33.CORPORATE IDENTITY MANUAL 1.4.4 Corporate Identity Elements Colour - Tone on Tone 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. E-mail visual@gov.ab.ca for more information or guidance. 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. THE GOVERNMENT OF ALBERTA CORPORATE IDENTITY MANUAL EDITION 21 02.2016https://corporateidentity.alberta.ca/downloads/Alberta_Corporate_Identity_Manual.pdf
34.2 1
35.It is what makes the Barbican distinctive and is the starting point for all our visual communications. 10 Proposition 9 This is the guiding principle that defines our brand and drives our activities. Strategy Arts without boundarieshttp://www.barbican.org.uk/branding/
36.There’s a lot you can do with our carrier. So do it. Rules and tools Celebrate our flexibility and creativity 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. We recommend using no more than three carriers in a single communication. 52 Carrier 51 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.http://www.barbican.org.uk/branding/
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.XXXXXXXXhttps://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
49.
50.
51.Design principles and living style guide Imaginatively designed elements for digital products and websites
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.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. Primary typeface - Adobe Clean Secondary type face - Minion Pro ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 =~!@#$%^&*()+[]\{} :;’:”<>?,./ 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. Minion Pro should be used primarily for extended running body copy in longer, multiple-page documents, such as brochures and datasheets. 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. 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. To use Adobe Clean well along side the corporate logo, which continues to use Myriad Pro, avoid condensed or extended type. Minion Pro Semibold Condensed Minion Pro Regular Minion Pro Semibold Minion Pro Bold Adobe Clean Light Adobe Clean Regular Adobe Clean Bold Adobe Clean SemiCondensed Adobe Clean Bold SemiCondensed Adobe Clean Light Italic Adobe Clean Italic Adobe Clean Bold Italic Adobe Clean SemiCondensed Italic Adobe Clean Bold SemiCondensed ItalicNote:Alternate glyphs are available for the letter “g” and number “1” in Adobe Clean Regular. 25 Adobe Corporate Brand Guidelines Adobe Confidential 25 October 2010 Minion Pro Semibold Condensed Italic Minion Pro Italic Minion Pro Semibold Italic Minion Pro Bold Italic
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.htmlhttps://marvelapp.com/styleguide/overview/introduction
75.
76.
77.
78.New York City Transit Authority Graphics Standards Manualhttps://standardsmanual.com
85.NASA Graphics Standards Manualhttps://standardsmanual.com
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
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.British Rail Corporate Identity Manualhttps://britishrailmanual.comhttp://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
118.New York City Transit Authority Graphics Standards Manualhttps://standardsmanual.com
121.https://issuu.com/bondo/docs/skype_brand_book_-_look
122.https://issuu.com/bondo/docs/skype_brand_book_-_look
123.Official Symbol of The American Revolution Bicentennial Graphics Standards Manualhttps://standardsmanual.com
127.
128.
129.
130.Incorrect Correct
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
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-designdecisions-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