Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Entre design et développement

Ac9d4074239f88fca7faf92e9804a765?s=47 Kévin Bizien
December 09, 2016

Entre design et développement

Communiquer et parler le même langage entre designers et développeurs est primordiale pour concevoir efficacement une interface. Nous voyons aujourd’hui de plus en plus de startups ou entreprises qui internalisent la création et le design plutôt que de faire appel à des prestataires externes, et ce n’est pas une coïncidence.

Ac9d4074239f88fca7faf92e9804a765?s=128

Kévin Bizien

December 09, 2016
Tweet

More Decks by Kévin Bizien

Other Decks in Design

Transcript

  1. Living styleguide Entre design et développement kbizien. Rencontres Interactives #13

  2. Rencontres Interactives #13 @kbizien #RIdeCaen Kevin Bizien Creative developer

  3. Rencontres Interactives #13 @kbizien #RIdeCaen Réflexion

  4. Rencontres Interactives #13 @kbizien #RIdeCaen

  5. Rencontres Interactives #13 @kbizien #RIdeCaen Des outils différents Sans méthodes

    / communication = incohérences, improductif, frustrations, difficilement maintenable
  6. Rencontres Interactives #13 @kbizien #RIdeCaen Solution

  7. Rencontres Interactives #13 @kbizien #RIdeCaen Maintenir un “living styleguide”

  8. Rencontres Interactives #13 @kbizien #RIdeCaen Styleguides

  9. Rencontres Interactives #13 @kbizien #RIdeCaen Front-end Styleguides

  10. Rencontres Interactives #13 @kbizien #RIdeCaen Living Front-end Styleguides

  11. Rencontres Interactives #13 @kbizien #RIdeCaen Illustration

  12. Rencontres Interactives #13 @kbizien #RIdeCaen Avantages Favorise le développement modulaire

    et la réutilisation de patterns
  13. Rencontres Interactives #13 @kbizien #RIdeCaen Avantages Assure la cohérence global

    du langage visuel du produit
  14. Rencontres Interactives #13 @kbizien #RIdeCaen Avantages Documentation à destination de

    tous les membres de l’équipe de production et notamment les nouvelles recrues
  15. Rencontres Interactives #13 @kbizien #RIdeCaen Avantages Aider les membres de

    l’équipe à communiquer et itérer
  16. Rencontres Interactives #13 @kbizien #RIdeCaen Avantages Apprendre les problématiques de

    chacun et gagner en compétence
  17. Rencontres Interactives #13 @kbizien #RIdeCaen Mise en situation

  18. Rencontres Interactives #13 @kbizien #RIdeCaen Production de maquettes graphique à

    partir des breakpoints utilisés dans le code Palm - 320px Wall - 1280px
  19. Rencontres Interactives #13 @kbizien #RIdeCaen Organisation des composants par breakpoints

    pour une visu responsive
  20. Rencontres Interactives #13 @kbizien #RIdeCaen Découpage du design en patterns,

    atomisation des composants
  21. Rencontres Interactives #13 @kbizien #RIdeCaen Exemple

  22. Rencontres Interactives #13 @kbizien #RIdeCaen Intégration des composants dans le

    living styleguide
  23. Rencontres Interactives #13 @kbizien #RIdeCaen Consommation des composants dans les

    vues
  24. Rencontres Interactives #13 @kbizien #RIdeCaen Exemple de découpage atomic d’un

    composant
  25. Rencontres Interactives #13 @kbizien #RIdeCaen Exemple

  26. Rencontres Interactives #13 @kbizien #RIdeCaen Design système

  27. Rencontres Interactives #13 @kbizien #RIdeCaen Aller plus loin • Externalisation

    des composants UI pour un partage sur plusieurs projets (web app, applications mobiles, module iframe…) • Création d’un design système complet avec documentation de la charte graphique graphique de l’entreprise. • Explication des process globaux de production (design, intégration, dev front…) • Document utile pour le marketing et le support client.
  28. Rencontres Interactives #13 @kbizien #RIdeCaen Kevin Bizien @kbizien bonjour@kevinbizien.com www.kevinbizien.com

    Creative developer Merci.