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

508 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.

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
508
Sur SlideShare
0
Issues des intégrations
0
Intégrations
17
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Bonjour à tous et merci pour votre présence !
    Je m’appelle Laurent, je suis Front-end Manager chez C2iS, une agence web lyonnaise.
    Ce que je vous propose aujourd’hui c’est de vous faire un retour d’expérience sur la mise en place de styleguides, à travers l’exemple de Relais & Chateaux
    Styleguide, bien alimenté il tient ses promesses
  • Mettre en point un styleguide nécessite de mettre en place une méthodologie.
    Il en existe plusieurs et c’est à vous de choisir celle qui correspond à vos habitudes de travail.
    Sachez juste que plus vous travaillerez de façon modulaire, plus il sera facile de maintenir et de faire évoluer votre styleguide.
    On va passer rapidement sur le sujet, mais c’est vraiment une démarche efficace et performante qui s’inscrit dans l’optique d’un styleguide.
  • Personnellement, j’ai un faible pour la méthode dite « Atomic design » parce que c’est un modèle structurant qui apporte une vision micro et macro de l’interface.
    C’est vraiment une façon globale de penser votre interface qui permet de créer des systèmes évolutifs qui vont fonctionner par assemblages d’éléments de différents niveaux.
    Brad Frost propose une approche assez semblable à
    OOCSS de Nicole Sullivan
    ou encore SMACSS de Jonathan Snook
    dans la mesure où l'on va coder les éléments de l’interface qui seront réutilisables, évolutives et modulaires.
  • Dans le modèle Atomic, comme vous l’avez vu il y a 5 niveaux.
    Le premier, dit Atom, concerne les éléments les plus simples
    On parle d’Atom quand un élément est "non divisible" ;-) comme le sont les balises html
    Là vous avez sous les yeux un atom, un élément premier : un button
  • Un élément que nous avons défini en CSS à partir de la charte graphique :
    couleurs
    Et typographies
  • Suivent les molécules qui si vous avez bien suivi vos cours de bio
    sont l'assemblage d'au moins deux atomes
  • Puis viennent les organisms (qui chez les anglophones contrairement à nous un ensemble de molécules)

    Ce qui est important dans cette méthode, c’est que chaque niveau peut avoir un impact sur un élément de niveau inférieur,
    En lui donnant des attributs spécifiques mais sans altérer pour autant les niveaux précédents comme le positionnement d’un atom ou d’un molécule
  • Dans le modèle Atomic vient ensuite la notion de template.
    Maintenant que chaque élément de l’interface a bien été défini, on va pouvoir assembler nos organisms
    sous forme de templates pour retrouver les blocs cohérents
  • Dernier niveau, celui de la page.
    C’est ce qui est généralement attendu par le client  en général, le reste l’intéresse bizarrement un peu moins au début
    On est dans quelque chose de connu, la fameuse page html montée – l’avantage c’est qu’elle va nous permettre de valider
    les interactions dans leur globalité
  • Dans le modèle Atomic, comme vous l’avez vu il y a 5 niveaux.
    Le premier, dit Atom, concerne les éléments les plus simples
    On parle d’Atom quand un élément est "non divisible" ;-) comme le sont les balises html
    Là vous avez sous les yeux un atom, un élément premier : un button
  • Dans le modèle Atomic, comme vous l’avez vu il y a 5 niveaux.
    Le premier, dit Atom, concerne les éléments les plus simples
    On parle d’Atom quand un élément est "non divisible" ;-) comme le sont les balises html
    Là vous avez sous les yeux un atom, un élément premier : un button
  • Dans le modèle Atomic, comme vous l’avez vu il y a 5 niveaux.
    Le premier, dit Atom, concerne les éléments les plus simples
    On parle d’Atom quand un élément est "non divisible" ;-) comme le sont les balises html
    Là vous avez sous les yeux un atom, un élément premier : un button
  • Dans le modèle Atomic, comme vous l’avez vu il y a 5 niveaux.
    Le premier, dit Atom, concerne les éléments les plus simples
    On parle d’Atom quand un élément est "non divisible" ;-) comme le sont les balises html
    Là vous avez sous les yeux un atom, un élément premier : un button
  • Dans le modèle Atomic, comme vous l’avez vu il y a 5 niveaux.
    Le premier, dit Atom, concerne les éléments les plus simples
    On parle d’Atom quand un élément est "non divisible" ;-) comme le sont les balises html
    Là vous avez sous les yeux un atom, un élément premier : un button
  • Dernier niveau, celui de la page.
    C’est ce qui est généralement attendu par le client  en général, le reste l’intéresse bizarrement un peu moins au début
    On est dans quelque chose de connu, la fameuse page html montée – l’avantage c’est qu’elle va nous permettre de valider
    les interactions dans leur globalité
  • Mettre en point un styleguide nécessite de mettre en place une méthodologie.
    Il en existe plusieurs et c’est à vous de choisir celle qui correspond à vos habitudes de travail.
    Sachez juste que plus vous travaillerez de façon modulaire, plus il sera facile de maintenir et de faire évoluer votre styleguide.
    On va passer rapidement sur le sujet, mais c’est vraiment une démarche efficace et performante qui s’inscrit dans l’optique d’un styleguide.
  • Une petite définition assez simple mais suffisante pour cadrer un peu tout ça,
    Nous est donnée par Susan Robertson dans un de ses article sur A List Apart :
    un styleguide est un document amené à évoluer qui va détailler graphiquement tous les éléments qui compose votre site
    il documente le langage visuel, tels que les styles du site, les palettes de couleurs, les typographies, etc.
    c’est aussi un endroit où vont pouvoir se rassembler tous les acteurs du projet – que ce soient les chefs de projets, les graphistes et les développeurs et même votre client
  • Selon les articles que vous trouverez sur le sujet, on le trouve sous différents noms :
    Living style guide
    Interface style guide
    Pattern librairy
    UI ou Visual Styleguide
    Ou encore Styleguide Driven Development

    Pour simplifier on va se cantonner au mot Styleguide si vous voulez bien 
  • L’idée ici est d’ajouter dans nos livrables le styleguide comme un outil de cadrage et de validation.
  • Selon les articles que vous trouverez sur le sujet, on le trouve sous différents noms :
    Living style guide
    Interface style guide
    Pattern librairy
    UI ou Visual Styleguide
    Ou encore Styleguide Driven Development

    Pour simplifier on va se cantonner au mot Styleguide si vous voulez bien 
  • Suite à une conférence de Brad Frost, Chris Coyier a définit
    4 approches basées sur son expérience
  • "The Sidelines"
    Dans ce cas, vous avez un styleguide mais c’est un projet à part
    Vous devez le mettre à jour indépendemment du site web en répercutant les modifications
  • "The Exhaust"
    Dans ce cas, vous développez le site web
    Le styleguide est produit à partir du site et des process du développement
    Le styleguide sert d’outil de test
  • "The Dictator"
    Dans cette approche le styleguide fait foi !
    Rien ne part en production qui ne fasse pas partie du styleguide
    Et qui n’a pas été validé
  • Mettre en point un styleguide nécessite de mettre en place une méthodologie.
    Il en existe plusieurs et c’est à vous de choisir celle qui correspond à vos habitudes de travail.
    Sachez juste que plus vous travaillerez de façon modulaire, plus il sera facile de maintenir et de faire évoluer votre styleguide.
    On va passer rapidement sur le sujet, mais c’est vraiment une démarche efficace et performante qui s’inscrit dans l’optique d’un styleguide.
  • Mettre en point un styleguide nécessite de mettre en place une méthodologie.
    Il en existe plusieurs et c’est à vous de choisir celle qui correspond à vos habitudes de travail.
    Sachez juste que plus vous travaillerez de façon modulaire, plus il sera facile de maintenir et de faire évoluer votre styleguide.
    On va passer rapidement sur le sujet, mais c’est vraiment une démarche efficace et performante qui s’inscrit dans l’optique d’un styleguide.
  • Là où le styleguide prend tout son sens en tant que « pattern library »
    c’est au moment où vous allez lister et décliner les éléments de l’interface
    comme votre grille, la liste de vos breakpoints parce votre site est responsive
    les éléments html
    les titrages, les styles de paragraphes et de texte riche, les icones, les boutons, les champs de formulaires, les tableaux de données, etc.
    et aussi tous vos modules
    votre navigation, les images & vidéos, les modules comme les tooltips, les sliders, les systèmes d’onglets, les datepickers, et ainsi de suite
  • En gros la liste des éléments que je viens de fournir, c’est ce que nous avons mis en place
    sur Relais & Châteaux dans un objectif de faire collaborer tous les métiers qui sont intervenu
  • Je vais juste vous passer quelques slides pour illustrer le styleguide que nous avons développé pour Relais & Châteaux

    On retrouve la définition de la palette de couleurs et des typographies choisies
  • On parlait d’iconographie et de ton de discours, en voici quelques exemples
  • Là où le styleguide prend tout son sens en tant que « pattern library »
    c’est au moment où vous allez lister et décliner les éléments de l’interface
    comme votre grille, la liste de vos breakpoints parce votre site est responsive
    les éléments html
    les titrages, les styles de paragraphes et de texte riche, les icones, les boutons, les champs de formulaires, les tableaux de données, etc.
    et aussi tous vos modules
    votre navigation, les images & vidéos, les modules comme les tooltips, les sliders, les systèmes d’onglets, les datepickers, et ainsi de suite
  • Comme vous pouvez le voir, chaque élément du styleguide est documenté dans ses usages, et le code est directement accessible comme par exemple, le remplissage et les appels du sprites des icônes SVG, les modules comme la navigation ou le moteur de recherche, ou des cas d’utilisation des différents types de datepickers etc.
  • Comme vous pouvez le voir, chaque élément du styleguide est documenté dans ses usages, et le code est directement accessible comme par exemple, le remplissage et les appels du sprites des icônes SVG, les modules comme la navigation ou le moteur de recherche, ou des cas d’utilisation des différents types de datepickers etc.
  • La grille qui structure nos pages
  • La grille qui structure nos pages
  • Comme vous pouvez le voir, chaque élément du styleguide est documenté dans ses usages, et le code est directement accessible comme par exemple, le remplissage et les appels du sprites des icônes SVG, les modules comme la navigation ou le moteur de recherche, ou des cas d’utilisation des différents types de datepickers etc.
  • Comme vous pouvez le voir, chaque élément du styleguide est documenté dans ses usages, et le code est directement accessible comme par exemple, le remplissage et les appels du sprites des icônes SVG, les modules comme la navigation ou le moteur de recherche, ou des cas d’utilisation des différents types de datepickers etc.
  • Là où le styleguide prend tout son sens en tant que « pattern library »
    c’est au moment où vous allez lister et décliner les éléments de l’interface
    comme votre grille, la liste de vos breakpoints parce votre site est responsive
    les éléments html
    les titrages, les styles de paragraphes et de texte riche, les icones, les boutons, les champs de formulaires, les tableaux de données, etc.
    et aussi tous vos modules
    votre navigation, les images & vidéos, les modules comme les tooltips, les sliders, les systèmes d’onglets, les datepickers, et ainsi de suite
  • Et on retrouve également une partie documentation : avec là, le code style, ce qui est important quand vous travaillez à plusieurs intervenants sur un projet
  • Et on retrouve également une partie documentation : avec là, le code style, ce qui est important quand vous travaillez à plusieurs intervenants sur un projet
  • Et on retrouve également une partie documentation : avec là, le code style, ce qui est important quand vous travaillez à plusieurs intervenants sur un projet
  • Mettre en point un styleguide nécessite de mettre en place une méthodologie.
    Il en existe plusieurs et c’est à vous de choisir celle qui correspond à vos habitudes de travail.
    Sachez juste que plus vous travaillerez de façon modulaire, plus il sera facile de maintenir et de faire évoluer votre styleguide.
    On va passer rapidement sur le sujet, mais c’est vraiment une démarche efficace et performante qui s’inscrit dans l’optique d’un styleguide.
  • Premier résultat, vous serez certain d’avoir une cohérence graphique à tous les niveaux - ce qui est déjà un bon point de départ
  • Ensuite, vous verrez que vous gagnerez en productivité,
    notamment parce
    que les intégrateurs n’ouvriront plus Photoshop pour ne citez que lui,
    que les développeurs auront la matière nécessaire et aussi plus de confort pour composer avec les templates
  • Sur de petits projets, c’est moins visible, même si l’outil va permettre aux graphistes et aux développeurs de s’appuyer sur le styleguide.
    Sur Relais & Châteaux, par exemple, ce sont 4 devs front et 5 devs backs qui ont travaillé en parallèle : avoir une bonne méthodologie et des outils de partage est primordial
  • J’imagine que ça vous est déjà arrivé de parler, allez, de popin ou de slider avec d’autres personnes que des intés par exemple,
    De média-queries et de breakpoints,
    d’accessibilité et d’ARIA,
    Enfin bref… le styleguide étant un document de partage, voyez le; comme un référentiel et un dictionnaire à partir duquel tout le monde
    va pouvoir s’entre sur les fonctionnalités et le vocabulaire associé
  • On parlait il y a quelques instants d’atoms, de molecules et d’organism.
    Vous avez la capacité de tester vos modules à la fois en tant qu’entité et également en tant que élément qui s’inscrit dans une interface.
    Qu’il s’agisse de mettre en place des stratégies SEO avec les datas structurés schemas ou des démarches d’accessibilité avec entre autre ARIA, vous serrez en mesure de les piloter efficacement et de les documenter.
  • Et enfin un référenciel
    En phase de recette du site ça peut être intéressant de vérifier l’implémentation d’un module : avec l’habitude, et parce que les intégrateurs ont super bien bossé aussi,
    vous avez à disposition une bibliothèque de références qui
    est basé sur les spécifications fonctionnelles et sur les maquettes,
    est maintenu tout au long du projet et des évolutions
    et qui en plus intègre des documentations à porter de main
    Avec ça, vous avez les fondations front de votre projet.
  • 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

    ×