Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Styleguide,
bien alimenté
il tient ses promesses
Laurent GUITTON – Front-end Manager
@webdevlintCrédit: Relais & ChâteauxC...
Styleguide
C’est…
• un styleguide est un document évolutif
• il documente le langage visuel
• il est un endroit unique pou...
Styleguide
C’est…
INTERFACE STYLE GUIDE
MODULAR DESIGN SYSTEM
STYLEGUIDE DRIVEN DEVELOPMENT
LIVING STYLE GUIDE
PRODUCT DES...
Spécifications
fonctionnelles
Styleguide
Un livrable
UX design
& maquettes
Spécifications
fonctionnelles
Styleguide
Un livrable
UX design
& maquettes
Styleguide
Styleguide
Le contexte
600 K
visites
uniques/mois
250 K
pages
référencées
520
hôtels
& restaurants
8
Langues
actuellement
Styleguide
Le contexte
Conception UX
& design
graphique
Styleguide html
⇅
Développement
Site en
production
Styleguide
Le contexte
Une méthode
Une bonne pratique pour un bon styleguide
Styleguide
Styleguide
Atomic design
molecule organism template page
Illustrations issues de http://patternlab.io
Crédit : Brad Frost
...
Styleguide
Atomic design
atom
Styleguide
Atomic design
atom
Styleguide
Atomic design
molecule
Styleguide
Atomic design
organism
Styleguide
Atomic design
template
Styleguide
Atomic design
page
Ça donne quoi pour R&C ?
Styleguide
Identité
Styleguide
Relais & Châteaux
Interface UI Documentation
Styleguide
Relais & Châteaux
Styleguide
Relais & Châteaux
Styleguide
Relais & Châteaux
Identité
Styleguide
Relais & Châteaux
Interface UI Documentation
Styleguide
Relais & Châteaux
Styleguide
Relais & Châteaux
Styleguide
Relais & Châteaux
Identité
Styleguide
Relais & Châteaux
Interface UI Documentation
Styleguide
Relais & Châteaux
Styleguide
Relais & Châteaux
Styleguide
Relais & Châteaux
Pour quels résultats ?
Styleguide
Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur workflow entre les é...
Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur workflow entre les é...
Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur workflow entre les é...
Styleguide
Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur workflow entre les é...
Styleguide
Bien alimenté, il tient ses promesses
Alimentez-le,
soignez-le,
bichonnez-le,
et surtout, vérifiez son bon déve...
Prochain SlideShare
Chargement dans…5
×

Le styleguide, bien alimenté il tient ses promesses

2 647 vues

Publié le

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.

Le styleguide, bien alimenté il tient ses promesses

  1. 1. Styleguide, bien alimenté il tient ses promesses Laurent GUITTON – Front-end Manager @webdevlintCrédit: Relais & ChâteauxCrédit: Relais & Châteaux
  2. 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. 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
  4. 4. Spécifications fonctionnelles Styleguide Un livrable UX design & maquettes
  5. 5. Spécifications fonctionnelles Styleguide Un livrable UX design & maquettes Styleguide
  6. 6. Styleguide Le contexte 600 K visites uniques/mois 250 K pages référencées 520 hôtels & restaurants 8 Langues actuellement
  7. 7. Styleguide Le contexte
  8. 8. Conception UX & design graphique Styleguide html ⇅ Développement Site en production Styleguide Le contexte
  9. 9. Une méthode Une bonne pratique pour un bon styleguide Styleguide
  10. 10. Styleguide Atomic design molecule organism template page Illustrations issues de http://patternlab.io Crédit : Brad Frost atom
  11. 11. Styleguide Atomic design atom
  12. 12. Styleguide Atomic design atom
  13. 13. Styleguide Atomic design molecule
  14. 14. Styleguide Atomic design organism
  15. 15. Styleguide Atomic design template
  16. 16. Styleguide Atomic design page
  17. 17. Ça donne quoi pour R&C ? Styleguide
  18. 18. Identité Styleguide Relais & Châteaux Interface UI Documentation
  19. 19. Styleguide Relais & Châteaux
  20. 20. Styleguide Relais & Châteaux
  21. 21. Styleguide Relais & Châteaux
  22. 22. Identité Styleguide Relais & Châteaux Interface UI Documentation
  23. 23. Styleguide Relais & Châteaux
  24. 24. Styleguide Relais & Châteaux
  25. 25. Styleguide Relais & Châteaux
  26. 26. Identité Styleguide Relais & Châteaux Interface UI Documentation
  27. 27. Styleguide Relais & Châteaux
  28. 28. Styleguide Relais & Châteaux
  29. 29. Styleguide Relais & Châteaux
  30. 30. Pour quels résultats ? Styleguide
  31. 31. Styleguide Résultats Une cohérence design/UX/UI pérenne
  32. 32. Styleguide Résultats Une cohérence design/UX/UI pérenne Une amélioration de la production
  33. 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. 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. 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. 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. 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

×