Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Inspired Style Guides

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.

Andy Clarke

January 10, 2017
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

  1. Designing inspired 

    style guides
    Andy Clarke
    Design Exchange Nottingham

    View full-size slide

  2. https://stuffandnonsense.co.uk

    View full-size slide

  3. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  6. http://patternprimer.adactio.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. http://designguidelines.co

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. http://brand.opentable.com

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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
    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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. © https://standardsmanual.com

    View full-size slide

  55. © https://standardsmanual.com

    View full-size slide

  56. © https://standardsmanual.com

    View full-size slide

  57. © https://standardsmanual.com

    View full-size slide

  58. © https://standardsmanual.com

    View full-size slide

  59. © https://standardsmanual.com

    View full-size slide

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

    View full-size slide

  61. © https://standardsmanual.com

    View full-size slide

  62. © https://standardsmanual.com

    View full-size slide

  63. © https://standardsmanual.com

    View full-size slide

  64. © https://standardsmanual.com

    View full-size slide

  65. © https://standardsmanual.com

    View full-size slide

  66. http://codeforamerica.clearleft.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. https://britishrailmanual.com

    View full-size slide

  73. https://britishrailmanual.com

    View full-size slide

  74. https://britishrailmanual.com

    View full-size slide

  75. https://britishrailmanual.com

    View full-size slide

  76. https://britishrailmanual.com

    View full-size slide

  77. © https://britishrailmanual.com

    View full-size slide

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

    View full-size slide

  79. © https://standardsmanual.com

    View full-size slide

  80. © https://standardsmanual.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  84. © https://standardsmanual.com

    View full-size slide

  85. © https://standardsmanual.com

    View full-size slide

  86. © https://standardsmanual.com

    View full-size slide

  87. © https://standardsmanual.com

    View full-size slide

  88. © https://standardsmanual.com

    View full-size slide

  89. Incorrect Correct

    View full-size slide

  90. Incorrect Correct

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  95. Thank you 

    very much
    @malarkey
    Design Exchange Nottingham

    View full-size slide

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

    View full-size slide