Atomic Design
& Styleguide
Une pratique Atomic Minded
Crédit: Relais & Châteaux
Une méthode,
une bonne pratique
Atomic design
Atomic design
molecule organism template page
Illustrations issues de http://patternlab.io
Crédit : Brad Frost
atom
Atomic design
atom
Atomic design
atom
Atomic design
molecule
Atomic design
organism
Atomic design
template
Atomic design
page
Atomic design
atom
Atomic design
molecule
Atomic design
organism
Atomic design
template
Atomic design
page
Atomic design
Liste
des features
Création
des composants
Codage
des composants
Assemblage
des composants
Illustration : Ad...
Un outil
en mode projet
Styleguide
Styleguide
Et ce n’est pas…
Styleguide
Définition
• un styleguide documente le langage visuel
• un styleguide est un document évolutif
• un styleguide...
Styleguide
… in other words
INTERFACE STYLE GUIDE
MODULAR DESIGN SYSTEM
STYLEGUIDE DRIVEN DEVELOPMENT
LIVING STYLE GUIDE
P...
DéveloppementIntégration
Styleguide
Un outil en commun
UX design
& maquettes
Spécifications
fonctionnelles
Styleguide
D’un existant graphique…
Styleguide
… à un bundle Symfony
Quand le mettre en place ?
Styleguide
Design &
Développement
Mise en
production
Styleguide
Styleguide
"The Sidelines"
Concepts issus de https://css-tricks.com/w...
Design &
Développement
Mise en
production
Styleguide
Styleguide
"The Exhaust"
Concepts issus de https://css-tricks.com/whe...
Design &
Développement
Styleguide
Mise en
production
Styleguide
"The Dictator"
Concepts issus de https://css-tricks.com/wh...
Conception UX
& design
graphique
Intégration
& styleguide
Développement
Styleguide
Atomic Minded ?
Quelques exemples
supplémentaires de styleguides en ligne *
Styleguide
* "Nous ne sommes pas seuls…"
Styleguide
Code For America
http://codeforamerica.clearleft.com/
Styleguide
EdX
http://ux.edx.org/
Styleguide
CMS.gov
http://assets.cms.gov/
Styleguide
homify
https://www.homify.de/assets/styleguide.html
Styleguide
Salesforce
https://www.lightningdesignsystem.com/
Styleguide
MailChimp
http://ux.mailchimp.com
Styleguide
Lonely Planet
http://rizzo.lonelyplanet.com/styleguide
Ça donne quoi
en pratique chez C2iS ?
Styleguide
Identité
Styleguide
Interface UI Documentation
Styleguide
Styleguide
Styleguide
Identité
Styleguide
Interface UI Documentation
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Identité
Styleguide
Interface UI Documentation
Styleguide
Styleguide
Styleguide
Pour quels résultats
chez C2iS ?
Atomic Design & Styleguide
Atomic Design & Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Atomic Design & Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Atomic Design & Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur work...
Atomic Design & Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur work...
Atomic Design & Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur work...
Atomic Design & Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur work...
Prochain SlideShare
Chargement dans…5
×

Atomic Design & Styleguide

874 vues

Publié le

(Version longue de https://fr.slideshare.net/webdevlint/le-styleguide-bien-aliment-il-tient-ses-promesses)

La méthodologie "Atomic Design" dans la construction d'un styleguide chez C2iS (https://twitter.com/Agence_C2is)

La méthodologie "Atomic Design" s'adapte particulière bien dans la mise en place d'un styleguide, outil aujourd'hui indispensable dans la maîtrise de la gestion de projet — de l'UX à la mise en ligne, en passant par le design et le développement.

  • Soyez le premier à commenter

Atomic Design & Styleguide

  1. 1. Atomic Design & Styleguide Une pratique Atomic Minded Crédit: Relais & Châteaux
  2. 2. Une méthode, une bonne pratique Atomic design
  3. 3. Atomic design molecule organism template page Illustrations issues de http://patternlab.io Crédit : Brad Frost atom
  4. 4. Atomic design atom
  5. 5. Atomic design atom
  6. 6. Atomic design molecule
  7. 7. Atomic design organism
  8. 8. Atomic design template
  9. 9. Atomic design page
  10. 10. Atomic design atom
  11. 11. Atomic design molecule
  12. 12. Atomic design organism
  13. 13. Atomic design template
  14. 14. Atomic design page
  15. 15. Atomic design Liste des features Création des composants Codage des composants Assemblage des composants Illustration : Adriana De La Cuadra - http://blog.bitovi.com/style-guide-driven-development/
  16. 16. Un outil en mode projet Styleguide
  17. 17. Styleguide Et ce n’est pas…
  18. 18. Styleguide Définition • un styleguide documente le langage visuel • un styleguide est un document évolutif • un styleguide est un endroit unique pour toute l’équipe Susan Robertson – Avril 2014 http://alistapart.com/article/creating-style-guides
  19. 19. Styleguide … in other words INTERFACE STYLE GUIDE MODULAR DESIGN SYSTEM STYLEGUIDE DRIVEN DEVELOPMENT LIVING STYLE GUIDE PRODUCT DESIGN UNIFICATION UI STYLE GUIDE VISUAL STYLE GUIDE PATTERN LIBRARY PATTERN PRIMER WEB-BASED STYLE GUIDE
  20. 20. DéveloppementIntégration Styleguide Un outil en commun UX design & maquettes Spécifications fonctionnelles
  21. 21. Styleguide D’un existant graphique…
  22. 22. Styleguide … à un bundle Symfony
  23. 23. Quand le mettre en place ? Styleguide
  24. 24. Design & Développement Mise en production Styleguide Styleguide "The Sidelines" Concepts issus de https://css-tricks.com/where-style-guides-fit-into-process Crédit : Chris Coyier
  25. 25. Design & Développement Mise en production Styleguide Styleguide "The Exhaust" Concepts issus de https://css-tricks.com/where-style-guides-fit-into-process Crédit : Chris Coyier
  26. 26. Design & Développement Styleguide Mise en production Styleguide "The Dictator" Concepts issus de https://css-tricks.com/where-style-guides-fit-into-process Crédit : Chris Coyier
  27. 27. Conception UX & design graphique Intégration & styleguide Développement Styleguide Atomic Minded ?
  28. 28. Quelques exemples supplémentaires de styleguides en ligne * Styleguide * "Nous ne sommes pas seuls…"
  29. 29. Styleguide Code For America http://codeforamerica.clearleft.com/
  30. 30. Styleguide EdX http://ux.edx.org/
  31. 31. Styleguide CMS.gov http://assets.cms.gov/
  32. 32. Styleguide homify https://www.homify.de/assets/styleguide.html
  33. 33. Styleguide Salesforce https://www.lightningdesignsystem.com/
  34. 34. Styleguide MailChimp http://ux.mailchimp.com
  35. 35. Styleguide Lonely Planet http://rizzo.lonelyplanet.com/styleguide
  36. 36. Ça donne quoi en pratique chez C2iS ? Styleguide
  37. 37. Identité Styleguide Interface UI Documentation
  38. 38. Styleguide
  39. 39. Styleguide
  40. 40. Styleguide
  41. 41. Identité Styleguide Interface UI Documentation
  42. 42. Styleguide
  43. 43. Styleguide
  44. 44. Styleguide
  45. 45. Styleguide
  46. 46. Styleguide
  47. 47. Styleguide
  48. 48. Identité Styleguide Interface UI Documentation
  49. 49. Styleguide
  50. 50. Styleguide
  51. 51. Styleguide
  52. 52. Pour quels résultats chez C2iS ? Atomic Design & Styleguide
  53. 53. Atomic Design & Styleguide Résultats Une cohérence design/UX/UI pérenne
  54. 54. Atomic Design & Styleguide Résultats Une cohérence design/UX/UI pérenne Une amélioration de la production
  55. 55. Atomic Design & Styleguide Résultats Une cohérence design/UX/UI pérenne Une amélioration de la production Un meilleur workflow entre les équipes
  56. 56. Atomic Design & Styleguide Résultats Une cohérence design/UX/UI pérenne Une amélioration de la production Un meilleur workflow entre les équipes Une meilleure communication et un vocabulaire commun
  57. 57. Atomic Design & Styleguide Résultats Une cohérence design/UX/UI pérenne Une amélioration de la production Un meilleur workflow entre les équipes Une meilleure communication et un vocabulaire commun Une facilité de test tout au long du projet
  58. 58. Atomic Design & Styleguide Résultats Une cohérence design/UX/UI pérenne Une amélioration de la production Un meilleur workflow entre les équipes Une meilleure communication et un vocabulaire commun Une facilité de test tout au long du projet Un guide de référence, une pierre angulaire

×