Le styleguide, bien alimenté il tient ses promesses
•
6 gefällt mir•3,614 views
Il n'y a encore pas si longtemps, le travail de l'intégrateur était de transformer une maquette graphique en rendu HTML, et si possible, au pixel près. Avec l'arrivée de nouveaux intervenants, de nouvelles pratiques techniques et de collaboration en équipe, conserver une cohérence graphique tout au long d'un projet devient un véritable objectif de réussite. L'objectif d'un styleguide est de mettre en musique le travail d'un UX, d'un DA, d'un développeur front-end, puis d'un développeur back-end, en passant par le chef de projet et bien évidemment le client, et de pouvoir le voir se concrétiser pas à pas. Les développeurs vont devoir alimenter ce styleguide interactif, le soigner, le bichonner et vérifier son bon développement : c'est un gage à la fois de réussite et de maintenance dans le temps. Voici le sujet proposé pour l'édition 2015 de Paris Web, au travers d'un exemple concret : le nouveau site de Relais et Châteaux mis en oeuvre par C2iS.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (15)
Ähnlich wie Le styleguide, bien alimenté il tient ses promesses
Ähnlich wie Le styleguide, bien alimenté il tient ses promesses (20)
Le styleguide, bien alimenté il tient ses promesses
- 1. Styleguide, bien alimenté il tient ses promesses Laurent GUITTON – Front-end Manager @webdevlintCrédit: Relais & ChâteauxCrédit: Relais & Châteaux
- 2. Styleguide C’est… • un styleguide est un document évolutif • il documente le langage visuel • il est un endroit unique pour toute l’équipe Susan Robertson – Avril 2014 http://alistapart.com/article/creating-style-guides
- 3. Styleguide C’est… INTERFACE STYLE GUIDE MODULAR DESIGN SYSTEM STYLEGUIDE DRIVEN DEVELOPMENT LIVING STYLE GUIDE PRODUCT DESIGN UNIFICATION UI STYLE GUIDE VISUAL STYLE GUIDE PATTERN LIBRAIRY PATTERN PRIMER WEB-BASED STYLE GUIDE
- 5. Spécifications fonctionnelles Styleguide Un livrable UX design & maquettes Styleguide
- 6. Styleguide Le contexte 600 K visites uniques/mois 250 K pages référencées 520 hôtels & restaurants 8 Langues actuellement
- 8. Conception UX & design graphique Styleguide html ⇅ Développement Site en production Styleguide Le contexte
- 9. Une méthode Une bonne pratique pour un bon styleguide Styleguide
- 10. Styleguide Atomic design molecule organism template page Illustrations issues de http://patternlab.io Crédit : Brad Frost atom
- 17. Ça donne quoi pour R&C ? Styleguide
- 18. Identité Styleguide Relais & Châteaux Interface UI Documentation
- 22. Identité Styleguide Relais & Châteaux Interface UI Documentation
- 26. Identité Styleguide Relais & Châteaux Interface UI Documentation
- 30. Pour quels résultats ? Styleguide
- 31. Styleguide Résultats Une cohérence design/UX/UI pérenne
- 32. Styleguide Résultats Une cohérence design/UX/UI pérenne Une amélioration de la production
- 33. Styleguide Résultats Une cohérence design/UX/UI pérenne Une amélioration de la production Un meilleur workflow entre les équipes
- 34. 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
- 35. 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
- 36. 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
- 37. Styleguide Bien alimenté, il tient ses promesses Alimentez-le, soignez-le, bichonnez-le, et surtout, vérifiez son bon développement ! MERCI http://www.relaischateaux.com/styleguide
Hinweis der Redaktion
- 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 aussi 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
- Petit point sur le contexte. Relais et châteaux c’est 520 hôtels de charme et restaurants étoilés, répartis dans 60 pays. C’est 600 000 visites uniques par mois, environ 250 000 pages indexées dans 8 langues. C’est 4 mois de conception et un peu plus 4 mois de production pour une mise en ligne qui a eu lieu début aout. C’est donc un petit projet qui a nécessité une approche riche et cohérente dans la conception et la production de son interface.
- C2iS a été missionné, avec Ogilvy One, pour repenser l’expérience Relais & Châteaux au travers d’un nouveau site. C’est donc dans ce tryptique que s’inscrit le styleguide
- C’est pour nous une collaboration entre plus d’une trentaine d’intervenants, repartie entre 2 agences à Paris et à Lyon et un client commun.
- 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é
- On va s’intéresser au styleguide en lui-même c’est-à-dire son contenu
- 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.
- 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.
- 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
- Bon une fois qu’on a fait tout ça, vous êtes en droit de vous demander ce que ça vous apporter en plus dans la conduite du projet ?
- 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.
- Tout ça pour vous dire qu’un styleguide bien alimenté tient toutes ses promesses ! Alors, si vous l’alimentez, si vous le soignez, si vous le bichonnez, et que vous suivez de près son développement, Il devrait vous rendre bien des services. Merci à tous pour votre attention !