Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systèmes de composants ! " par Audrey Hacq

1,508 views

Published on

L’Atomic Design c’est quoi ? C’est une méthode de conception basée sur les composants, qui part du plus petit élément d’une interface (atome) pour construire tout le reste (molécules, organismes, templates, pages…).

“The whole will shape the part, the part will shape the whole” Cette méthode a été pour moi une vraie révélation. Elle permet de garantir une cohérence globale lors de la conception et de la réalisation d’un projet, de faire travailler les équipes ensemble autour de concepts communs et de gagner du temps avec un workflow de production bien huilé, sans pour autant perdre de vue la créativité. Bien appliquée, elle est l’assurance d’une expérience utilisateur réussie !

L’année dernière, j’ai eu l’occasion de mettre en place cette méthode à travers différents projets et de passer ainsi de la théorie à la pratique. Lors de cette conférence, je vous raconterai tout ce que j’ai appris sur l’Atomic Design et les différentes solutions pour l’appliquer concrètement sur vos prochains projets.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systèmes de composants ! " par Audrey Hacq

  1. 1. Juin 2017 - Audrey HACQ Fini le design par écran, vive les systèmes de composants ! ATOMIC DESIGN
  2. 2. #1. Coup de foudre à Brad Frost Hill #2. Mon atomic et moi #3. Vers un système de composants et au-delà #4. Le bonheur est dans le travail d’équipe
  3. 3. COUP DE FOUDRE À BRAD FROST HILL
  4. 4. Comment produire du contenu pour ce nouveau médium ?
  5. 5. Android screen size fragmentation. Image: OpenSignal
  6. 6. ©Audrey Hacq
  7. 7. « We are selling websites like paintings. Instead we should be selling beautiful and easy access to content, agnostic of device, screen size or context» Dan Mall
  8. 8. Mais comment sortir de cette conception par écran ?
  9. 9. ATOMES MOLÉCULE ORGANI
  10. 10. ATOMES MOLÉCULE ORGANISME TEMPLATES
  11. 11. ATOMES MOLÉCULE ORGANISME TEMPLA
  12. 12. MOLÉCULE ORGANISME TEMPLATES PAGES
  13. 13. MES MOLÉCULE ORGANISME TEMPLATES PAGE
  14. 14. ULE ORGANISME TEMPLATES PAGES
  15. 15. ULE ORGANISME TEMPLATES PAGES
  16. 16. SME TEMPLATES PAGES
  17. 17. SME TEMPLATES PAGES
  18. 18. ©TouchUp
  19. 19. ATOMES MOLÉCULE ORGANISME TEMPLATES PAGES ATOMIC DESIGN
  20. 20. ©Audrey Hacq
  21. 21. Les « living style guide » ©Lonely Planet
  22. 22. MON ATOMIC ET MOI
  23. 23. Travailler en atomic design sans parler d’atomic design ?
  24. 24. Métaphore #1 MON ATOMIC ET MOI
  25. 25. Les briques de base (Atomes)
  26. 26. Les composants simples et complexes (Molécules et organismes)
  27. 27. Un des résultats possibles
  28. 28. + Le style guide
  29. 29. Métaphore #2 MON ATOMIC ET MOI
  30. 30. Les notes (Atomes)
  31. 31. Les accords (molécules)
  32. 32. La phrase musicale (organismes)
  33. 33. La partition (résultat) 7 notes = une infinité de possibilités créatives
  34. 34. HARMONIE Équilibre de la mise en page et harmonie des composants
  35. 35. MÉLODIE Fluidité du parcours
  36. 36. RYTHME Varier les rythmes pour provoquer l'émotion ©TouchUp
  37. 37. ©Maridav
  38. 38. ©Amadeus Pas de bonne composition sans bon compositeur
  39. 39. "Be consistent, not uniform." Gov.uk design principles
  40. 40. VERS UN SYSTÈME DE COMPOSANTS ET AU-DELÀ
  41. 41. VERS UN SYSTÈME DE COMPOSANTS ET AU-DELÀ #1 Commencer le système
  42. 42. Atomes = Identité de marque
  43. 43. ©Gretel
  44. 44. ©Gretel
  45. 45. ©Gretel
  46. 46. ©Gretel
  47. 47. VERS UN SYSTÈME DE COMPOSANTS ET AU-DELÀ #2 Concevoir et affiner le système
  48. 48. Partir des fonctionnalités principales
  49. 49. Je ne veux pas faire un écran de login…
  50. 50. Je veux que mon utilisateur puisse se connecter à mon produit
  51. 51. Composants Parcours clés
  52. 52. Faire une distinction entre la structure d’un composant et son contenu
  53. 53. @TouchUp
  54. 54. @TouchUp
  55. 55. @TouchUp
  56. 56. @TouchUp
  57. 57. @TouchUp
  58. 58. @TouchUp
  59. 59. Concevoir le détail et l’ensemble
  60. 60. VERS UN SYSTÈME DE COMPOSANTS ET AU-DELÀ #3 Travailler comme les développeurs
  61. 61. Souvenez-vous…
  62. 62. Construire des systèmes vivants et évolutifs dans nos logiciels de conception
  63. 63. Sketch Figma Construire des systèmes vivants et évolutifs dans nos logiciels de conception
  64. 64. Un style guide dans mon logiciel de conception (Sketch) ATOMES MOLÉCULES
  65. 65. Des styles dynamiques
  66. 66. Partager le système
  67. 67. ADOBE SHARED LIBRARY Les bibliothèques partagées CRAFT PLUGIN BY INVISION
  68. 68. Une source unique pour tous les designers
  69. 69. DEV LIBRARY Le soucis : encore deux bibliothèques miroirs à maintenir
  70. 70. Demain : une bibliothèque unique pour tous ?
  71. 71. Avec des plugins comme react-sketchapp, cela paraît bientôt possible
  72. 72. Travailler comme les développeurs
  73. 73. Travailler comme les développeurs avec
  74. 74. Co-créons ensemble ! ©Joy Intermedia
  75. 75. LE BONHEUR EST DANS LE TRAVAIL D’ÉQUIPE
  76. 76. LE BONHEUR EST DANS LE TRAVAIL D’ÉQUIPE #1 S’approprier la méthode
  77. 77. LE BONHEUR EST DANS LE TRAVAIL D’ÉQUIPE #2 Nommer des garants
  78. 78. ©Gardien de la galaxie
  79. 79. LE BONHEUR EST DANS LE TRAVAIL D’ÉQUIPE #3 Faire participer tout le monde
  80. 80. LE MOT DE LA FIN
  81. 81. MÉTHODE DE TRAVAIL
  82. 82. MÉTHODE DE TRAVAIL ÉQUIPES MARQUE UTILISATEUR • Vision partagée • Collaboration • Productivité • Expérience unifiée • Relation avec la marque • Qualité de l’expérience • Ecosystème digital • Bases solides • Fast Time to market
  83. 83. MERCI @audreyhacq DES QUESTIONS ? www.backelite.com

×