O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Le styleguide, bien alimenté il tient ses promesses

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.

  • Entre para ver os comentários

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

×