Expressive Design Systems

Transcript

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

   View Slide

2. View Slide

3. Faster builds
   Better products
   Improved scaleability
   Stronger focus
   

   View Slide

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

   View Slide

5. Creativity
   What they care about:
   

   View Slide

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

   View Slide

7. Shared ownership
   What they care about:
   

   View Slide

8. What they say:
   “This is the best I could do, given
   the constraints of the system.”
   

   View Slide

9. Flexibility
   What they care about:
   

   View Slide

10. Rigid
    Monotonous
    Too specific
    Complicated
    

    View Slide

11. Expressive
    Design Systems
    

    View Slide

12. Expressive
    Design Systems are…
    

    View Slide

13. Expressive
    Design Systems are…
    Purpose-built
    

    View Slide

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

    View Slide

15. Expressive
    Design Systems are…
    Inspire use
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. Network consistency vs
    Local flexibility
    

    View Slide

25. Purpose-built
    Range of expression
    Inspires use
    

    View Slide

26. Purpose-built: Help commuters find their way
    Range of expression: Station flashcards
    Inspires use: Guidelines, not rules
    

    View Slide

27. Shared
    foundation
    Room for 

    variation
    +
    

    View Slide

28. Shared
    foundation
    Room for 

    variation
    +
    Experience
    principles
    Station flashcards
    

    View Slide

29. Shared
    foundation
    Room for 

    variation
    +
    Experience
    principles
    Station flashcards
    Time periods
    Materials
    Neighborhoods
    

    View Slide

30. Shared
    foundation
    Room for 

    variation
    +
    Harmony
    

    View Slide

31. Shared
    foundation
    Room for 

    variation
    +
    Flexibility
    

    View Slide

32. Shared
    foundation
    Room for 

    variation
    +
    Improvisation
    

    View Slide

33. Enable harmony.
    Enable flexibility.
    Enable improvisation.
    

    View Slide

34. Enable harmony.
    

    View Slide

35. Components Products
    

    View Slide

36. We don’t always know how these
    pieces are going to be put
    together, but we do want the
    pieces to fit.
    

    View Slide

37. Brand elements Components
    

    View Slide

38. Basic components
    Composite components
    Containers
    Layouts
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. Big Levers Small Dials
    &
    

    View Slide

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

    View Slide

46. Size
    Small Large
    

    View Slide

47. Scale
    Low size
    contrast
    High size
    contrast
    

    View Slide

48. Density
    Compact Airy
    

    View Slide

49. Weight
    Light Heavy
    

    View Slide

50. View Slide

51. View Slide

52. Small Large
    Compact Airy
    Low High
    Small Large
    Compact Airy
    Low High
    

    View Slide

53. How to define your levers
    

    View Slide

54. Use your brand traits
    

    View Slide

55. View Slide

56. Does the work, Explanatory, Smart,
    Audience-first, Generosity
    Illuminating, Beautiful, Rebellious,
    Thoughtful, Entertaining
    

    View Slide

57. Small Large Small Large
    Compact Airy Compact Airy
    

    View Slide

58. What’s your range?
    Small Large
    

    View Slide

59. What’s your range of
    expression?
    

    View Slide

60. creative.starbucks.com
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

64. creative.starbucks.com
    

    View Slide

65. What contexts are your
    teams solving for?
    

    View Slide

66. What contexts are your
    teams solving for?
    Environments:
    In store
    On-the-go
    Platforms:
    iOS
    Android
    Social
    Web
    Formats:
    Digital
    Physical products
    

    View Slide

67. What should your brand
    feel like, across all of
    these contexts?
    

    View Slide

68. Mobile Order & Pay Social Media
    

    View Slide

69. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

73. Type Dials
    

    View Slide

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

    View Slide

75. View Slide

76. modularscale.com
    

    View Slide

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

    View Slide

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

    View Slide

79. View Slide

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

    View Slide

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
    “
    

    View Slide

82. Enable flexibility.
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

87. What is variation?
    

    View Slide

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

    View Slide

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

    View Slide

90. Contexts for variation.
    

    View Slide

91. Brand
    Audience
    Environment
    

    View Slide

92. View Slide

93. View Slide

94. View Slide

95. Good Variation Bad Variation
    vs
    

    View Slide

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
    

    View Slide

97. Bad
    Variation
    • Visual variation on components
    that serve the same function
    across brands,
    • Don’t do much to strengthen
    brand voice
    

    View Slide

98. View Slide

99. View Slide

100. MASTHEAD
     Date, logo, tagline, image
     

     View Slide

101. View Slide

102. View Slide

103. Varying components.
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

109. View Slide

110. Enable improvisation.
     

     View Slide

111. Chefs vs cooks
     

     View Slide

112. View Slide

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
     

     View Slide

114. When people understand the
     rationale behind the system, they’re
     more likely to use it creatively
     

     View Slide

115. The right tool for the job
     

     View Slide

116. View Slide

117. Not expressive
     

     View Slide

118. View Slide

119. View Slide

120. Shared
     foundation
     Room for 

     variation
     +
     High bedrest
     Generous seat
     Polished or powder-coated
     Leather or fabric
     

     View Slide

121. Shared
     foundation
     Room for 

     variation
     +
     High bedrest
     Generous seat
     Polished or powder-coated
     Leather or fabric
     Corporate
     Public
     Private
     

     View Slide

122. View Slide

123. View Slide

124. Shared
     foundation
     Room for 

     variation
     +
     General, flexible
     components
     More rigid and specific
     components
     

     View Slide

125. Evolving patterns
     from products
     

     View Slide

126. Patterns stay alive because the
     people who are using them are
     also testing them.
     “
     —Christopher Alexander, A Pattern Language
     

     View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. View Slide

132. Encourage contribution
     

     View Slide

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

     View Slide

134. Shared ownership
     What they care about:
     

     View Slide

135. Shared ownership 

     keeps systems alive
     

     View Slide

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

     View Slide

137. View Slide

138. View Slide

139. View Slide

140. Enable sharing across teams
     

     View Slide

141. Team A
     Team B
     

     View Slide

142. Team A
     Team B
     

     View Slide

143. Team A Team B
     

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

147. The “Edge Effect”
     

     View Slide

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

     View Slide

149. View Slide

150. Enable creativity at the
     borders of your system.
     

     View Slide

151. Thank
     you! @yeseniaa
     

     View Slide

152. View Slide