Expressive Design Systems

Expressive Design Systems

Good design systems can help you create digital products with efficiency and consistency. But great design systems will support and strengthen your team’s creativity at the same time. In this talk, Yesenia will discuss how to communicate your brand ethos through a design system and how to collaborate across teams to create harmonious, branded experiences.

91cefdf141106fa10674aae74ce05890?s=128

Yesenia Perez-Cruz

October 17, 2019
Tweet

Transcript

  1. Yesenia Perez-Cruz Amuse— Budapest October 2019 Expressive Design Systems

  2. None
  3. Faster builds Better products Improved scaleability Stronger focus

  4. “Can I change the font?” What they say:

  5. Creativity What they care about:

  6. “I’ll just fork this component.” What they say:

  7. Shared ownership What they care about:

  8. What they say: “This is the best I could do,

    given the constraints of the system.”
  9. Flexibility What they care about:

  10. Rigid Monotonous Too specific Complicated

  11. Expressive Design Systems

  12. Expressive Design Systems are…

  13. Expressive Design Systems are… Purpose-built

  14. Expressive Design Systems are… Support a range of use

  15. Expressive Design Systems are… Inspire use

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. Network consistency vs Local flexibility

  25. Purpose-built Range of expression Inspires use

  26. Purpose-built: Help commuters find their way Range of expression: Station

    flashcards Inspires use: Guidelines, not rules
  27. Shared foundation Room for 
 variation +

  28. Shared foundation Room for 
 variation + Experience principles Station

    flashcards
  29. Shared foundation Room for 
 variation + Experience principles Station

    flashcards Time periods Materials Neighborhoods
  30. Shared foundation Room for 
 variation + Harmony

  31. Shared foundation Room for 
 variation + Flexibility

  32. Shared foundation Room for 
 variation + Improvisation

  33. Enable harmony. Enable flexibility. Enable improvisation.

  34. Enable harmony.

  35. Components Products

  36. We don’t always know how these pieces are going to

    be put together, but we do want the pieces to fit.
  37. Brand elements Components

  38. Basic components Composite components Containers Layouts

  39. None
  40. None
  41. None
  42. None
  43. None
  44. Big Levers Small Dials &

  45. Levers: Broad, sweeping decisions about how our experiences should feel

  46. Size Small Large

  47. Scale Low size contrast High size contrast

  48. Density Compact Airy

  49. Weight Light Heavy

  50. None
  51. None
  52. Small Large Compact Airy Low High Small Large Compact Airy

    Low High
  53. How to define your levers

  54. Use your brand traits

  55. None
  56. Does the work, Explanatory, Smart, Audience-first, Generosity Illuminating, Beautiful, Rebellious,

    Thoughtful, Entertaining
  57. Small Large Small Large Compact Airy Compact Airy

  58. What’s your range? Small Large

  59. What’s your range of expression?

  60. creative.starbucks.com

  61. First, the design prioritizes legibility and conveying information as clearly

    as possible. “ —Mark Wilson, Fast Company Starbucks just publicly deconstructed its brand—here’s why
  62. The other half is about expressivity, emotion, and all the

    other intangibles Starbucks wants to spark in the consumer. “ —Mark Wilson, Fast Company Starbucks just publicly deconstructed its brand—here’s why
  63. Depending on the context, the brand system allows designers to

    dial up either trait as needed. “ —Mark Wilson, Fast Company Starbucks just publicly deconstructed its brand—here’s why
  64. creative.starbucks.com

  65. What contexts are your teams solving for?

  66. What contexts are your teams solving for? Environments: In store

    On-the-go Platforms: iOS Android Social Web Formats: Digital Physical products
  67. What should your brand feel like, across all of these

    contexts?
  68. Mobile Order & Pay Social Media

  69. None
  70. Defining your range, helps teams understand where they can be

    expressive
  71. “Can I change the font?” What they say:

  72. Dials: Small, detailed choices that enable the levers

  73. Type Dials

  74. 1. Set a base font size 2. Set a font

    ratio Type
  75. None
  76. modularscale.com

  77. Size Scale Base font size: 1em Font ratio: 1.5

  78. Size Scale Base font size: 1em Font ratio: 1.067

  79. None
  80. Productive Expressive https://www.ibm.com/design/language/

  81. Always design a thing by considering it in its next

    larger context—a chair in a room, a room in a house, a house in an environment, an environment in a city plan. —Eliel Saarinen “
  82. Enable flexibility.

  83. https://www.pentagram.com/work/the-public-theater/story

  84. I began to realize that if you made everything the

    same, it was boring after the first year. If you changed it individually for each play, the theater lost recognizability. “ —Paula Scher
  85. https://www.pentagram.com/work/the-public-theater/story

  86. https://www.pentagram.com/work/the-public-theater/story

  87. What is variation?

  88. Unintentional divergence Intentional, but unnecessary divergence Intentional, meaningful divergence

  89. Unintentional divergence Intentional, but unnecessary divergence Intentional, meaningful divergence

  90. Contexts for variation.

  91. Brand Audience Environment

  92. None
  93. None
  94. None
  95. Good Variation Bad Variation vs

  96. Good Variation • If there’s a specific problem that we

    need a new pattern to solve • Determined by user scenarios and content needs • Strengthens brand voice in a way that serves our audience
  97. Bad Variation • Visual variation on components that serve the

    same function across brands, • Don’t do much to strengthen brand voice
  98. None
  99. None
  100. MASTHEAD Date, logo, tagline, image

  101. None
  102. None
  103. Varying components.

  104. Content Structure Style Behavior Flexibility Brad Frost, http://bradfrost.com/blog/post/pattern-variations/

  105. BBC Gel “Card” Component BBC Gel, https://www.bbc.co.uk/gel/guidelines/cards

  106. BBC Gel “Card” Component BBC Gel, https://www.bbc.co.uk/gel/guidelines/cards

  107. Google Material, https://material.io/design/material-theming/#material-theming

  108. BBC Gel “Card” Component BBC Gel, https://www.bbc.co.uk/gel/guidelines/cards

  109. None
  110. Enable improvisation.

  111. Chefs vs cooks

  112. None
  113. A cook knows what to do to create an enjoyable

    dish, then they use that knowledge and repeat what works to create a consistent experience. A chef not only knows what to do, but why it’s done. “ —Stephanie Poce
  114. When people understand the rationale behind the system, they’re more

    likely to use it creatively
  115. The right tool for the job

  116. None
  117. Not expressive

  118. None
  119. None
  120. Shared foundation Room for 
 variation + High bedrest Generous

    seat Polished or powder-coated Leather or fabric
  121. Shared foundation Room for 
 variation + High bedrest Generous

    seat Polished or powder-coated Leather or fabric Corporate Public Private
  122. None
  123. None
  124. Shared foundation Room for 
 variation + General, flexible components

    More rigid and specific components
  125. Evolving patterns from products

  126. Patterns stay alive because the people who are using them

    are also testing them. “ —Christopher Alexander, A Pattern Language
  127. None
  128. None
  129. None
  130. None
  131. None
  132. Encourage contribution

  133. “I’ll just fork this component.” What they say:

  134. Shared ownership What they care about:

  135. Shared ownership 
 keeps systems alive

  136. Contribution • Why should you contribute? • How you should

    contribute? • Celebrate contributions
  137. None
  138. None
  139. None
  140. Enable sharing across teams

  141. Team A Team B

  142. Team A Team B

  143. Team A Team B

  144. https://spotify.design/articles/2018-12-04/the-paradox-of-design-systems/

  145. We want to tap into a designer’s inherent desire to

    evolve or even completely rethink parts of our system. “ —Josh Mateo and Brendon Manwaring
  146. We want to create a paradigm shift wherein our designers

    no longer view themselves as users of the system, but instead see their role as core contributor and co-author of a shared system - one that they have ownership of. “ —Josh Mateo and Brendon Manwaring
  147. The “Edge Effect”

  148. Borders contain the greatest sources of diversity and creativity.

  149. None
  150. Enable creativity at the borders of your system.

  151. Thank you! @yeseniaa

  152. None