designers, développeurs, créons la différence · prototypage dans invision pour montrer le flow...
TRANSCRIPT
![Page 1: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/1.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Designers, développeurs, créons la différence !
![Page 2: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/2.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Tous les sites se ressemblent !
![Page 3: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/3.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Cécile Freyd-Foucault@cecilefreydf
Product Designer - Agiliste
Florent Berthelot@berthel350
Développeur Web JS
![Page 4: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/4.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Pourquoi ?
?Début p
roje
t
Utilisation d’une bibliothèque de composants
![Page 5: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/5.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Comment faire différent ?
?
![Page 6: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/6.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Le sujet
AQUA-COMPOSE
![Page 7: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/7.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Des poissons ?
http://v1.aqua-compose.berthelot.io
Voilà c’est fait !
![Page 8: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/8.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
“Bien que répondant à nos exigences initiales, l’application ne répond pas à nos attentes en terme de design.”
Tous mes clients
![Page 9: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/9.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Dans la tête du client
!Début p
roje
t
Utilisation d’une bibliothèque de composants
Fin d’intervention du designer
Ajout d’un designer
Proje
t moch
e
Proje
t joli
![Page 10: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/10.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Un designer à la rescousse !
A toi de jouer Cécile !
![Page 11: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/11.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Des poissons ?
Voilà c’est fait !
![Page 12: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/12.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Code & Design
“Je n’ai pas photoshop, ….”
![Page 13: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/13.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Code & Design
![Page 14: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/14.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
La triste réalité
!
Début p
roje
t
Utilisation d’une bibliothèque de composants
Ajout d’un designer
Proje
t moch
e
Proje
t joli
![Page 15: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/15.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Et si on travaillait comme un banc ?
![Page 16: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/16.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Le design, c’est des recherches
:)
Début p
roje
t
Utilisation d’une bibliothèque de composants
Recherches utilisateurs
Parcours utilisateurs
Wireframes
![Page 17: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/17.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Recherches utilisateur
“Ça prend du temps, n’apporte pas de valeur… et de toute façon on sait ce dont nos utilisateurs ont besoin !”
Des clients
![Page 18: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/18.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Et identification de parcours
![Page 19: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/19.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Et du coup, ils font quoi les développeurs pendant ce temps ?
![Page 20: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/20.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Le projet continue, on livre de la valeur métier !
![Page 21: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/21.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Le projet avance
Il faut réduire la taille et la responsabilité de nos composants
![Page 22: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/22.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Le projet avance
![Page 23: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/23.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Wireframes
![Page 24: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/24.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Les wireframes sont faits !
http://v2.aqua-compose.berthelot.io
![Page 25: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/25.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Mise en place des bons outils de création et partage !
● Prototypage dans Invision pour montrer le flow
(prototype cliquable, raconte une histoire)
● Partage des écrans avec les composants sur Zeplin
![Page 26: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/26.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
La co-construction
:)Début p
roje
t
Utilisation d’une bibliothèque de composants
Recherches utilisateurs
Parcours utilisateurs
Wireframes
Recherches graphiques
![Page 27: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/27.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Recherches graphiques : des choix sémantiques
Mindmap
![Page 28: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/28.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Moodboard
![Page 29: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/29.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Dosis ExtraBold 800Dosis ExtraBold 500
Texture
Lumière
Mouvements
![Page 30: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/30.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Pour susciter des émotions !
![Page 31: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/31.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Premier rendu d’un parcours...
● Partage des écrans et exportation des composants moléculaires
● Documentation de chaque composant : margin, padding, height, width, etc.
![Page 32: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/32.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
… et desktop
![Page 33: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/33.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
La co-construction
:)
Début p
roje
t
Utilisation d’une bibliothèque de composants
Recherches utilisateurs
Parcours utilisateurs
Wireframes
Recherches graphiques
Co-construction du design system projet
Proje
t beau
et
fonct
ionnel
![Page 34: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/34.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Ne plus penser page par page mais en composants !
![Page 35: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/35.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Code & Design
Création d’un langage commun entre designer et développeur
Enfin, vous connaissez tous “l’ubiquitous language” du “DDD”
![Page 36: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/36.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
L’Atomic Design
Atomes Molécules Organismes Templates Pages
![Page 37: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/37.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Début de l’Atomic : les Atomes, parlons le même langage
![Page 38: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/38.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Les styles de typographie
![Page 39: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/39.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Iconographie
PS : Stop avec les font-icons, SVG sprite !
![Page 40: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/40.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Les animations pour rendre le produit vivant
![Page 41: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/41.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Mise en place d’une grille !
Pour la conception Pour le développement
16 px = 1 rem
Pour les utilisateurs
![Page 42: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/42.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Premiers composants fonctionnels : les molécules
![Page 43: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/43.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Penser comportement
![Page 44: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/44.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Et guidelines
![Page 45: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/45.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Organismes : plusieurs molécules ensembles
![Page 46: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/46.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Template : structure HTML
![Page 47: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/47.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Création de pages type !
![Page 48: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/48.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Penser accessibilité
Chaque composant porte sa propre accessibilité
![Page 49: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/49.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
et les contrastes !
Carré blanc sur fond blanc, Malevitch, 1918
![Page 50: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/50.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Penser wording
![Page 51: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/51.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Penser référencement
Le title de la page doit être “Compose ton aquarium avec les poissons les plus adaptés - Mon aquarium”
![Page 52: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/52.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Nous avons un design system
https://zeroheight.com/7a6db4657/p/48c886
![Page 53: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/53.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Un design system est un produit
(💙Penser à la documentation de la documentation)
![Page 54: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/54.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Mettre à jour au fur et à mesure le document central du design system
Garants Doc de référence Évolution
![Page 55: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/55.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Ne fonctionne que si toute l’équipe est embarquée
![Page 56: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/56.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Quels sont les implications dans le code ?
![Page 57: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/57.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Le dossier common du projet
Et s’il s’appelait ...
DESIGN SYSTEM ?
![Page 58: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/58.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Les composants d’un design system
- Simple- Flexible- Personnalisable- Testé- Documenté
![Page 59: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/59.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Composants flexibles
L’utilisateur du design système doit pouvoir respecter la sémantique HTML
![Page 60: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/60.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Composants personnalisables
L’utilisateur du design système doit pouvoir surcharger le style facilement en CSS
![Page 61: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/61.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Composants testés
![Page 62: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/62.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Un Composant = Une responsabilité
Respectez l’atomic design dans le code
![Page 63: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/63.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
FIRST Principle
Keep it (F)ocused.
Keep it (I)ndependent.
Keep it (R)eusable.
Keep it (S)mall.
Keep it (T)estable.
![Page 64: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/64.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Un outil de développement
![Page 65: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/65.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Supprimer Material du projet !
![Page 66: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/66.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Démonstration !
https://aqua-compose.berthelot.io
![Page 67: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/67.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Documentation du design system
Outils du designer
Outils du développeur
Outils collaboratifs
Les outils
![Page 68: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/68.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Résumé
:)Début p
roje
t
Utilisation d’une bibliothèque de composants
Recherches utilisateurs
Parcours utilisateurs
Wireframes
Recherches graphiques
Co-construction du design system projet
Proje
t beau
et
fonct
ionnel
![Page 69: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/69.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Material, Bootstrap, Bulma, …
===
Dette technique assumé
![Page 70: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/70.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Quand mettre en place un design system ?
Dans chacun de vos projet !
![Page 71: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/71.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Et pour aller plus loin ?
Autres applications
Supports imprimés
Supports de communications
![Page 72: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/72.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Design system groupe
Ne jamais commencer par ça !
![Page 73: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/73.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Pensez cross-technologies, le design system, c’est du design avant-tout !
![Page 74: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/74.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
La co-construction
:)Début p
roje
t
Utilisation d’une bibliothèque de composants
Recherches utilisateurs
Parcours utilisateurs
Wireframes
Recherches graphiques
Co-construction du design system projet
Extraction design system groupe
![Page 75: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/75.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Pourquoi finalement se différencier ?
Pour le business
Pour les utilisateurs
Pour la diversité
Pour marquer son indépendance
![Page 76: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/76.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Quand faire un design system différenciant ?
● Les interfaces vitrines
● Les interfaces ouvertes au public (B2C)
![Page 77: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/77.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Dans quels cas il Ne faut Pas se différencier ?
Les interfaces métiers qui n’ont pas le budget Les PoCs
![Page 78: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/78.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Dans tous les cas utilisez un design system adapté à votre besoin
Material, n’est pas adapté aux back-officesBulma est plus adapté dans ce cas
![Page 79: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/79.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Merci !
Merci à Jérémie Patonnier, Christophe Addinquy, Hubert Giraud et Nicolas Bardoux
![Page 80: Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le flow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants](https://reader034.vdocuments.mx/reader034/viewer/2022052009/601de428a351046e9301adbb/html5/thumbnails/80.jpg)
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Liens
● https://v1.aqua-compose.berthelot.io● https://v2.aqua-compose.berthelot.io
● https://aqua-compose.berthelot.io● https://github.com/FBerthelot/aqua-compose● https://zeroheight.com/7a6db4657/p/4493da