$30 off During Our Annual Pro Sale. View Details »

Designing Inspired Style Guides (Perth, May 2017)

Andy Clarke
May 04, 2017
Design
8
1.2k

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.

Andy Clarke

May 04, 2017
Tweet

More Decks by Andy Clarke

See All by Andy Clarke
Creative handover to Ansarada
malarkey
4
470
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
11k
Developing Inspired Guides with CSS Custom Properties (variables)
malarkey
8
1.1k
Designing Inspired Style Guides
malarkey
12
6.3k
Designing Imaginative Layouts (workshop)
malarkey
7
750
Art directing web design
malarkey
8
3.1k
Designing imaginative 
grid systems (Port 80, Newport)
malarkey
5
3k
Designing imaginative grid systems (DXN Nottingham)
malarkey
3
1.2k
CSS3 for Responsive Web Design (full day workshop) 2015
malarkey
13
770

Other Decks in Design

See All in Design
Mastering Dynamic UI Theming for Designers at Bites & Bytes
romanshamin
0
130
ソフトウェアデザイン史のこれからをつくる | 戦後日本グラフィックデザイン史をヒントに
ykkntn
PRO
1
620
Customizing Icons to Complement Fonts
strongeron
0
200
今日から始めるDesignOpsのヒント
isaikaori
1
190
🇫🇷 Dogmes et Design Systems, comment faire autrement
morganepeng
0
160
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
2
320
ホワイトペーパー制作代行サービス（旧）
siteengine
0
210
ここち_brand book
onf
0
740
ノベルティの勘所 / Communication DesignNight vol.01
transit_kix
0
610
「Blueskyちゃん」誕生経緯と公式設定
kawaiirailroads
0
220
介護事業にデザインでどう向き合うか / Designship 2023
sms_tech
0
1.6k
231007_tokyor_kato
hjmkth
6
980

Featured

See All Featured
Design by the Numbers
sachag
272
18k
Navigating Team Friction
lara
177
13k
Stop Working from a Prison Cell
hatefulcrawdad
264
18k
Fantastic passwords and where to find them - at NoRuKo
philnash
34
2.3k
What's new in Ruby 2.0
geeforr
335
30k
Adopting Sorbet at Scale
ufuk
66
8.2k
Ruby is Unlike a Banana
tanoku
93
10k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Writing Fast Ruby
sferik
615
59k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
12
1.1k
Teambox: Starting and Learning
jrom
125
8.2k
[RailsConf 2023] Rails as a piece of cake
palkan
17
3.2k

Transcript

  1. Designing inspired 

    style guides
    Andy Clarke
    YOW West, Perth, May 2017

    View Slide

  2. Head of Design
    ansarada.com

    View Slide

  3. https://stuffandnonsense.co.uk

    View Slide

  4. View Slide

  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

    View Slide

  6. View Slide

  7. View Slide

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

    View Slide

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

    View Slide

  10. http://patternprimer.adactio.com

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. http://designguidelines.co

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  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

    View Slide

  26. http://brand.opentable.com

    View Slide

  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

    View Slide

  28. https://www.behance.net/gallery/2341732/STIHL-Making-It-Easy-Brand-Guidelines

    View Slide

  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

    View Slide

  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

    View Slide

  31. CORPORATE IDENTITY MANUAL
    E-mail [email protected] 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

    View Slide

  32. CORPORATE IDENTITY MANUAL
    THE GOVERNMENT OF ALBERTA | CORPORATE IDENTITY MANUAL | EDITION 21 | 02.2016
    E-mail [email protected] 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

    View Slide

  33. CORPORATE IDENTITY MANUAL
    THE GOVERNMENT OF ALBERTA | CORPORATE IDENTITY MANUAL | EDITION 21 | 02.2016
    E-mail [email protected] 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

    View Slide

  34. 2
    1

    View Slide

  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/

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  49. View Slide

  50. View Slide

  51. Design principles
    and living style guide
    Imaginatively designed
    elements for digital
    products and websites

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  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.

    View Slide

  70. https://design.atlassian.com/product/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  75. View Slide

  76. View Slide

  77. View Slide

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

    View Slide

  79. © https://standardsmanual.com

    View Slide

  80. © https://standardsmanual.com

    View Slide

  81. © https://standardsmanual.com

    View Slide

  82. © https://standardsmanual.com

    View Slide

  83. © https://standardsmanual.com

    View Slide

  84. © https://standardsmanual.com

    View Slide

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

    View Slide

  86. © https://standardsmanual.com

    View Slide

  87. © https://standardsmanual.com

    View Slide

  88. © https://standardsmanual.com

    View Slide

  89. © https://standardsmanual.com

    View Slide

  90. © https://standardsmanual.com

    View Slide

  91. © https://standardsmanual.com

    View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. View Slide

  96. View Slide

  97. View Slide

  98. View Slide

  99. View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. View Slide

  104. View Slide

  105. View Slide

  106. http://codeforamerica.clearleft.com

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  112. https://britishrailmanual.com

    View Slide

  113. https://britishrailmanual.com

    View Slide

  114. https://britishrailmanual.com

    View Slide

  115. https://britishrailmanual.com

    View Slide

  116. https://britishrailmanual.com

    View Slide

  117. © https://britishrailmanual.com

    View Slide

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

    View Slide

  119. © https://standardsmanual.com

    View Slide

  120. © https://standardsmanual.com

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  124. © https://standardsmanual.com

    View Slide

  125. © https://standardsmanual.com

    View Slide

  126. © https://standardsmanual.com

    View Slide

  127. View Slide

  128. View Slide

  129. View Slide

  130. Incorrect Correct

    View Slide

  131. View Slide

  132. View Slide

  133. View Slide

  134. View Slide

  135. View Slide

  136. View Slide

  137. View Slide

  138. View Slide

  139. View Slide

  140. View Slide

  141. View Slide

  142. https://polaris.shopify.com

    View Slide

  143. https://polaris.shopify.com

    View Slide

  144. https://polaris.shopify.com

    View Slide

  145. https://polaris.shopify.com

    View Slide

  146. https://polaris.shopify.com

    View Slide

  147. https://polaris.shopify.com

    View Slide

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

    View Slide

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

    View Slide

  150. speakerdeck.com/
    malarkey
    @malarkey
    YOW West, Perth, May 2017

    View Slide

  151. Thank you 

    very much
    @malarkey
    YOW West, Perth, May 2017

    View Slide