Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Divide et Impera. Why and how to build a Design System

1 261 vues

Publié le

We are no longer designing pages, we are now
designing complex systems of components. How can we design, build and maintain consistent and coherent user interfaces?

The speech by Roberto Falcone about Design Systems and Atomic Design @ MilanUXBookClub.

Publié dans : Design
  • Visit this site: tinyurl.com/sexinarea and find sex in your area for one night)) You can find me on this site too)
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Girls for sex are waiting for you https://bit.ly/2TQ8UAY
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Meetings for sex in your area are there: https://bit.ly/2TQ8UAY
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Best site for flirting and sex in your area you can find there: https://bit.ly/2SlcOnO
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Divide et Impera. Why and how to build a Design System

  1. 1. 10th April, 2018M i k a m a i M i l a n o Divide et impera Why and how to build a Design System R O B E R T O F A L C O N E
  2. 2. 2 Roberto “Bob” Falcone robertofalcone // Lead Experience Designer @ Musement // Former Experience Designer @ Sketchin // Visiting Professor @ PoliDesign // Visiting Professor @ TAG Innovation School // Member of the Jury @ CSS Design Awards // Founder @ UXers Milan UX Book Club Experience Designer robertofalcone.it
  3. 3. 3Milan UX Book ClubD i v i d e e t i m p e r a . @robertofalcone
  4. 4. 4Milan UX Book ClubD i v i d e e t i m p e r a .
  5. 5. 5 Design Systems Atomic Design Building a Design System 01. 02. 03. Milan UX Book ClubD i v i d e e t i m p e r a . Divideetimpera. Myths of Design Systems Case Studies 04. 05. Why and how to build a Design System
  6. 6. 6Milan UX Book Club Design Systems D i v i d e e t i m p e r a .
  7. 7. 7Milan UX Book ClubD i v i d e e t i m p e r a . Design Systems Everywhere!
  8. 8. 9Milan UX Book Club Onceuponatime… D i v i d e e t i m p e r a . There were static web“pages”
  9. 9. 1 0Milan UX Book ClubD i v i d e e t i m p e r a .
  10. 10. 1 1Milan UX Book Club DE
 VICES FRAG ME
 NTATION D i v i d e e t i m p e r a .
  11. 11. 1 2 Stephen Hay «We are no longer designing pages, we are now designing complex systems of components». Milan UX Book ClubD i v i d e e t i m p e r a . Principal UX Design Lead @catawiki
  12. 12. 1 3 How can we design, build and maintain consistent and coherent user interfaces? TOPIC Milan UX Book ClubD i v i d e e t i m p e r a .
  13. 13. 1 4Milan UX Book ClubD i v i d e e t i m p e r a . DesignSystems
  14. 14. 1 5D i v i d e e t i m p e r a . Milan UX Book Club Four Books of Architecture Palladio , 1570
  15. 15. 1 6D i v i d e e t i m p e r a . Milan UX Book Club New York City Transit Authority Graphics Standards Manual Massimo Vignelli and Bob Noorda - 1970
  16. 16. 1 7D i v i d e e t i m p e r a . Milan UX Book Club 1975 NASA Standard Manual
  17. 17. 1 8D i v i d e e t i m p e r a . Milan UX Book Club Yahoo! Pattern Library 2009
  18. 18. 1 9D i v i d e e t i m p e r a . Milan UX Book Club Google Material Design 2014
  19. 19. 2 0Milan UX Book Club Atomic Design D i v i d e e t i m p e r a .
  20. 20. 2 1Milan UX Book ClubD i v i d e e t i m p e r a .
  21. 21. 2 2Milan UX Book Club ATOMICDESIGN D i v i d e e t i m p e r a . 2013
  22. 22. 2 3Milan UX Book ClubD i v i d e e t i m p e r a .
  23. 23. 2 4Milan UX Book Club ATOMS D i v i d e e t i m p e r a .
  24. 24. 2 5Milan UX Book ClubD i v i d e e t i m p e r a .
  25. 25. 2 6D i v i d e e t i m p e r a . Milan UX Book Club MOLECULES
  26. 26. 2 7D i v i d e e t i m p e r a . Milan UX Book Club ORGANISMS
  27. 27. 2 8D i v i d e e t i m p e r a . Milan UX Book Club ECOSYSTEMS/ 
 TEMPLATES
  28. 28. 2 9D i v i d e e t i m p e r a . Milan UX Book Club ENVIROMENTS / PAGES
  29. 29. 3 0Milan UX Book ClubD i v i d e e t i m p e r a .
  30. 30. 3 1 Brad Frost «One of the biggest advantages atomic design provides is the ability to quickly shift between abstract and concrete». Milan UX Book ClubD i v i d e e t i m p e r a . Author of “Atomic Design”
  31. 31. 3 2Milan UX Book ClubD i v i d e e t i m p e r a .
  32. 32. 3 3Milan UX Book ClubD i v i d e e t i m p e r a .
  33. 33. 3 4Milan UX Book Club Buildinga DesignSystem D i v i d e e t i m p e r a .
  34. 34. 3 5Milan UX Book ClubD i v i d e e t i m p e r a .
  35. 35. 3 6Milan UX Book ClubD i v i d e e t i m p e r a . GE Predix
  36. 36. 3 7Milan UX Book ClubD i v i d e e t i m p e r a . Badoo Cosmos
  37. 37. 3 8Milan UX Book Club No “Onesizefitsall” D i v i d e e t i m p e r a . Public design systems should be learned from, not copied
  38. 38. 3 9Milan UX Book Club How we can design and build our own designsystem? D i v i d e e t i m p e r a .
  39. 39. 4 0Milan UX Book ClubD i v i d e e t i m p e r a . Divideet impera Divide a complex job into small parts and rule the whole picture
  40. 40. 4 1Milan UX Book ClubD i v i d e e t i m p e r a .
  41. 41. 4 2Milan UX Book ClubD i v i d e e t i m p e r a .
  42. 42. 4 3 # 1. Milan UX Book Club Interface InventoryAudit D i v i d e e t i m p e r a .
  43. 43. 4 4Milan UX Book ClubD i v i d e e t i m p e r a .
  44. 44. 4 5Milan UX Book ClubD i v i d e e t i m p e r a .
  45. 45. 4 6 # 2. Milan UX Book Club Define principles D i v i d e e t i m p e r a .
  46. 46. 4 7Milan UX Book ClubD i v i d e e t i m p e r a .
  47. 47. 4 8 #3. Milan UX Book Club Define a nameconvention D i v i d e e t i m p e r a .
  48. 48. 4 9D i v i d e e t i m p e r a . Milan UX Book Club NAME
 CONVENTION ‣ folders ‣ projects ‣ files ‣ artboards ‣ layers ‣ symbols ‣ states ‣ instances ‣ styles
  49. 49. 5 0Milan UX Book ClubD i v i d e e t i m p e r a .
  50. 50. 5 1Milan UX Book ClubD i v i d e e t i m p e r a .
  51. 51. 5 2Milan UX Book ClubD i v i d e e t i m p e r a .
  52. 52. 5 3 # 4. Milan UX Book Club Create documentation D i v i d e e t i m p e r a .
  53. 53. 5 4Milan UX Book ClubD i v i d e e t i m p e r a .
  54. 54. 5 5Milan UX Book Club COLORI GRIGLIE TIPOGRAFIA UI ELEMENTS D i v i d e e t i m p e r a . UITOOLKIT
  55. 55. 5 6 # 5. Milan UX Book Club Define a colorpalette D i v i d e e t i m p e r a .
  56. 56. 5 7 Map also lighter and darker variations of the main brand color Lighter variations are obtained by increasing the brightness and lowering the saturation compared to the main color. Lighter variations Darker variations are obtained by lowering the brightness and increasing the saturation compared to the main color. Darker variations Milan UX Book ClubD i v i d e e t i m p e r a .
  57. 57. 5 8 #6. Milan UX Book Club Set up a gridsystem D i v i d e e t i m p e r a .
  58. 58. 5 9Milan UX Book ClubD i v i d e e t i m p e r a .
  59. 59. 6 0 #7. Milan UX Book Club Define typography D i v i d e e t i m p e r a .
  60. 60. 6 1Milan UX Book ClubD i v i d e e t i m p e r a .
  61. 61. 6 2 #8. Milan UX Book Club Design UIPatterns D i v i d e e t i m p e r a .
  62. 62. 6 3Milan UX Book ClubD i v i d e e t i m p e r a .
  63. 63. 6 4 #9. Milan UX Book Club Establish a ComponentsRatio D i v i d e e t i m p e r a .
  64. 64. 6 5Milan UX Book ClubD i v i d e e t i m p e r a .
  65. 65. 6 6Milan UX Book ClubD i v i d e e t i m p e r a . «Belikewater, myfriend» Choose a device-agnostic Design Components ratio
  66. 66. 6 7Milan UX Book ClubD i v i d e e t i m p e r a .
  67. 67. 6 8 #10. Milan UX Book Club Compose Templates D i v i d e e t i m p e r a .
  68. 68. 6 9Milan UX Book ClubD i v i d e e t i m p e r a .
  69. 69. 7 0 #11. Milan UX Book Club Build Pages D i v i d e e t i m p e r a .
  70. 70. 7 1Milan UX Book ClubD i v i d e e t i m p e r a .
  71. 71. 7 2 #12. Milan UX Book Club Provide a shared SourceofTruth D i v i d e e t i m p e r a .
  72. 72. 7 3Milan UX Book ClubD i v i d e e t i m p e r a .
  73. 73. 7 4D i v i d e e t i m p e r a . Milan UX Book Club Advantages of using a Design System ✓ UI coherence ✓ Common and shared language ✓ Greater maintainability of the project ✓ Rapid prototyping and faster iterations
  74. 74. 7 5Milan UX Book ClubD i v i d e e t i m p e r a .
  75. 75. 7 6Milan UX Book ClubD i v i d e e t i m p e r a .
  76. 76. 7 7Milan UX Book Club MythsofDesign Systems D i v i d e e t i m p e r a .
  77. 77. 7 8 Myth #1 Milan UX Book Club ADesignSystem istoolimiting D i v i d e e t i m p e r a . With a design system, new solutions can be created and fed back into the system making improvements available to everyone. Reality
  78. 78. 7 9 Myth #2 Milan UX Book Club ADesignSystem leadstoalossofcreativity D i v i d e e t i m p e r a . The components of a design system are interdependent, so when a change is made in one location, the change will be inherited throughout the whole system. Reality
  79. 79. 8 0 Myth #3 Milan UX Book Club Onceadesignsystemis built,theworkiscomplete. D i v i d e e t i m p e r a . A design system is living, meaning it will require ongoing maintenance and improvements as needs arise. Reality
  80. 80. 8 1 Myth #4 Milan UX Book Club ADesignSystem consistsofaStyleGuide D i v i d e e t i m p e r a . Simply having a pattern library of elements to choose from, allow the team to keep consistency, but it doesn’t preclude from building interfaces far from the product or the concepts behind it. Reality
  81. 81. 8 2Milan UX Book ClubD i v i d e e t i m p e r a .
  82. 82. 8 3Milan UX Book ClubD i v i d e e t i m p e r a .
  83. 83. 8 4Milan UX Book ClubD i v i d e e t i m p e r a .
  84. 84. 8 5Milan UX Book Club CaseStudies D i v i d e e t i m p e r a .
  85. 85. 8 6D i v i d e e t i m p e r a . Milan UX Book Club SPOTIFY GLUE GLUE (Global Language for a Unified Experience)
  86. 86. 8 7Milan UX Book ClubD i v i d e e t i m p e r a .
  87. 87. 8 8D i v i d e e t i m p e r a . Milan UX Book Club SPOTIFY GLUE PRINCIPLES
  88. 88. 8 9Milan UX Book ClubD i v i d e e t i m p e r a .
  89. 89. 9 0D i v i d e e t i m p e r a . Milan UX Book Club AIRBNB DESIGN
 LANGUAGE
 SYSTEM
  90. 90. 9 1Milan UX Book ClubD i v i d e e t i m p e r a .
  91. 91. 9 2D i v i d e e t i m p e r a . Milan UX Book Club AirBnb Design Language System Principles Unified: Each piece is part of a greater whole and should contribute positively to the system at scale. There should be no isolated features or outliers. Universal: Airbnb is used around the world by a wide global community. Our products and visual language should be welcoming and accessible. Iconic: We’re focused when it comes to both design and functionality. Our work should speak boldly and clearly to this focus. Conversational: Our use of motion breathes life into our products, and allows us to communicate with users in easily understood ways.
  92. 92. 9 3Milan UX Book ClubD i v i d e e t i m p e r a .
  93. 93. 9 4Milan UX Book ClubD i v i d e e t i m p e r a .
  94. 94. 9 5Milan UX Book ClubD i v i d e e t i m p e r a .
  95. 95. 9 6Milan UX Book ClubD i v i d e e t i m p e r a .
  96. 96. 9 7Milan UX Book ClubD i v i d e e t i m p e r a .
  97. 97. 9 8Milan UX Book ClubD i v i d e e t i m p e r a .
  98. 98. 9 9 Alex Schleifer «Here’s the simple truth: you can’t innovate on products without first innovating the way you build them» Milan UX Book ClubD i v i d e e t i m p e r a . VP of Design @ AirBnb
  99. 99. 1 0 0D i v i d e e t i m p e r a . Milan UX Book Club MUSEMENT ATOMIC 
 DESIGN
  100. 100. 1 0 1Milan UX Book ClubD i v i d e e t i m p e r a . A Journey to a Relationship We want to build a relationship with the user instead of selling him just a ticket. We want to support him in the entirety of the experience journey.
  101. 101. 1 0 2Milan UX Book ClubD i v i d e e t i m p e r a .
  102. 102. 1 0 3Milan UX Book ClubD i v i d e e t i m p e r a .
  103. 103. 1 0 4Milan UX Book ClubD i v i d e e t i m p e r a .
  104. 104. 1 0 5Milan UX Book ClubD i v i d e e t i m p e r a .
  105. 105. 1 0 6Milan UX Book ClubD i v i d e e t i m p e r a .
  106. 106. 1 0 7Milan UX Book ClubD i v i d e e t i m p e r a .
  107. 107. Milan UX Book ClubD i v i d e e t i m p e r a . 1 0 8
  108. 108. Milan UX Book ClubD i v i d e e t i m p e r a . 1 0 9
  109. 109. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 0 Agoodstartwith AtomicDesign
  110. 110. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 1 DevTeamranfaster thanDesignTeam onAtomicDesign
  111. 111. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 2
  112. 112. 1 1 3 Cristian Ronzio «Guys, we can’t keep create exceptions to handle cases like this!» Milan UX Book ClubD i v i d e e t i m p e r a . Lead Front-End Architect @ Musement
  113. 113. 1 1 4 «Have you already mapped this new UI element into the design library?» Milan UX Book ClubD i v i d e e t i m p e r a . Lorenzo Simone Front-End Architect @ Musement
  114. 114. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 5
  115. 115. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 6
  116. 116. 1 1 7 «Why don’t we reuse these UI components we already have in our design library? Milan UX Book ClubD i v i d e e t i m p e r a . Mattia Gatti UI Designer @ Musement
  117. 117. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 8
  118. 118. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 9 ADesign Systemis a marathon, notasprint
  119. 119. 1 2 0Milan UX Book ClubD i v i d e e t i m p e r a .
  120. 120. 1 2 1D i v i d e e t i m p e r a . Milan UX Book Club EVOLUTION OF MUSEMENT DESIGN SYSTEM ✓ Loading Strategy ✓ Functional Specs ✓ Microanimations ✓ Copywriting ✓ A/B Tests
  121. 121. 1 2 2Milan UX Book Club SKETCH D i v i d e e t i m p e r a .
  122. 122. 1 2 3Milan UX Book Club ZEPLIN D i v i d e e t i m p e r a .
  123. 123. 1 2 4Milan UX Book Club LINGO D i v i d e e t i m p e r a .
  124. 124. 1 2 5Milan UX Book Club ABSTRACT D i v i d e e t i m p e r a .
  125. 125. 1 2 6D i v i d e e t i m p e r a . Milan UX Book Club Lessons learned ✓ We can’t force change ✓ We should learn from others ✓ We have to adapt what we learned to our context ✓ We must be prepared for failure ✓ We should keep persevering ✓ It is worth it
  126. 126. 1 2 7Milan UX Book Club Appendix D i v i d e e t i m p e r a .
  127. 127. Google Milan UX Book Club 1 2 8D i v i d e e t i m p e r a .
  128. 128. Dropbox Milan UX Book Club 1 2 9D i v i d e e t i m p e r a .
  129. 129. LonelyPlanet Milan UX Book Club 1 3 0D i v i d e e t i m p e r a .
  130. 130. MailChimp Milan UX Book Club 1 3 1D i v i d e e t i m p e r a .
  131. 131. ShopifyPolaris Milan UX Book Club 1 3 2D i v i d e e t i m p e r a .
  132. 132. Salesforce Milan UX Book Club 1 3 3D i v i d e e t i m p e r a .
  133. 133. Microsoft Fluent Milan UX Book Club 1 3 4D i v i d e e t i m p e r a .
  134. 134. bradfrost.com Milan UX Book Club 1 3 5D i v i d e e t i m p e r a .
  135. 135. styleguides.io Milan UX Book Club 1 3 6D i v i d e e t i m p e r a .
  136. 136. patternlab.io Milan UX Book Club 1 3 7D i v i d e e t i m p e r a .
  137. 137. 1 3 8Milan UX Book ClubD i v i d e e t i m p e r a .
  138. 138. 1 3 9//
  139. 139. 1 4 0 Questions? Milan UX Book ClubD i v i d e e t i m p e r a .
  140. 140. 1 4 1Milan UX Book ClubD i v i d e e t i m p e r a . T h a n k y o u robertofalcone robertofalcone.it

×