Juin 2017 - Audrey HACQ
Fini le design par écran,
vive les systèmes de composants !
ATOMIC DESIGN
#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...
COUP DE FOUDRE
À BRAD FROST HILL
Comment produire du contenu pour ce nouveau médium ?
Android screen size fragmentation. Image: OpenSignal
©Audrey Hacq
« We are selling websites like paintings.
Instead we should be selling beautiful and easy
access to content, agnostic of d...
Mais comment sortir
de cette conception par écran ?
ATOMES MOLÉCULE ORGANI
ATOMES MOLÉCULE ORGANISME TEMPLATES
ATOMES MOLÉCULE ORGANISME TEMPLA
MOLÉCULE ORGANISME TEMPLATES PAGES
MES MOLÉCULE ORGANISME TEMPLATES PAGE
ULE ORGANISME TEMPLATES PAGES
ULE ORGANISME TEMPLATES PAGES
SME TEMPLATES PAGES
SME TEMPLATES PAGES
©TouchUp
ATOMES MOLÉCULE ORGANISME TEMPLATES PAGES
ATOMIC DESIGN
©Audrey Hacq
Les « living style guide »
©Lonely Planet
MON ATOMIC
ET MOI
Travailler en atomic design sans parler d’atomic design ?
Métaphore #1
MON ATOMIC ET MOI
Les briques de base
(Atomes)
Les composants simples et complexes
(Molécules et organismes)
Un des résultats possibles
+
Le style guide
Métaphore #2
MON ATOMIC ET MOI
Les notes
(Atomes)
Les accords
(molécules)
La phrase musicale
(organismes)
La partition
(résultat)
7 notes = une infinité de possibilités créatives
HARMONIE
Équilibre de la mise en page et harmonie des composants
MÉLODIE
Fluidité du parcours
RYTHME
Varier les rythmes pour provoquer l'émotion
©TouchUp
©Maridav
©Amadeus
Pas de bonne composition sans bon compositeur
"Be consistent, not uniform."
Gov.uk design principles
VERS UN SYSTÈME
DE COMPOSANTS
ET AU-DELÀ
VERS UN SYSTÈME DE COMPOSANTS ET AU-DELÀ
#1
Commencer
le système
Atomes
=
Identité de marque
©Gretel
©Gretel
©Gretel
©Gretel
VERS UN SYSTÈME DE COMPOSANTS ET AU-DELÀ
#2
Concevoir et affiner
le système
Partir des
fonctionnalités principales
Je ne veux pas faire un écran de login…
Je veux que mon utilisateur puisse se connecter à mon produit
Composants Parcours clés
Faire une distinction entre la structure d’un composant et son contenu
@TouchUp
@TouchUp
@TouchUp
@TouchUp
@TouchUp
@TouchUp
Concevoir le détail et l’ensemble
VERS UN SYSTÈME DE COMPOSANTS ET AU-DELÀ
#3
Travailler comme
les développeurs
Souvenez-vous…
Construire des systèmes vivants et évolutifs dans nos logiciels de conception
Sketch Figma
Construire des systèmes vivants et évolutifs dans nos logiciels de conception
Un style guide dans mon logiciel de conception (Sketch)
ATOMES MOLÉCULES
Des styles dynamiques
Partager le système
ADOBE SHARED LIBRARY
Les bibliothèques partagées
CRAFT PLUGIN BY INVISION
Une source unique pour tous les designers
DEV LIBRARY
Le soucis : encore deux bibliothèques miroirs à maintenir
Demain : une bibliothèque unique pour tous ?
Avec des plugins comme react-sketchapp, cela paraît bientôt possible
Travailler comme
les développeurs
Travailler comme
les développeurs
avec
Co-créons ensemble !
©Joy Intermedia
LE BONHEUR EST DANS
LE TRAVAIL D’ÉQUIPE
LE BONHEUR EST DANS LE TRAVAIL D’ÉQUIPE
#1
S’approprier la méthode
LE BONHEUR EST DANS LE TRAVAIL D’ÉQUIPE
#2
Nommer des garants
©Gardien de la galaxie
LE BONHEUR EST DANS LE TRAVAIL D’ÉQUIPE
#3
Faire participer tout le monde
LE MOT DE
LA FIN
MÉTHODE DE TRAVAIL
MÉTHODE DE TRAVAIL
ÉQUIPES MARQUE UTILISATEUR
• Vision partagée
• Collaboration
• Productivité
• Expérience unifiée
• Relat...
MERCI
@audreyhacq
DES QUESTIONS ?
www.backelite.com
Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systèmes de composants ! " par Audrey Hacq
Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systèmes de composants ! " par Audrey Hacq
Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systèmes de composants ! " par Audrey Hacq
Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systèmes de composants ! " par Audrey Hacq
Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systèmes de composants ! " par Audrey Hacq
Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systèmes de composants ! " par Audrey Hacq
Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systèmes de composants ! " par Audrey Hacq
Prochain SlideShare
Chargement dans…5
×

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

373 vues

Publié le

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.

Publié dans : Design
  • Soyez le premier à commenter

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

×