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.

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.