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 !
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Tous les sites se ressemblent !
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Cécile Freyd-Foucault@cecilefreydf
Product Designer - Agiliste
Florent Berthelot@berthel350
Développeur Web JS
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Pourquoi ?
?Début p
roje
t
Utilisation d’une bibliothèque de composants
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Comment faire différent ?
?
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Le sujet
AQUA-COMPOSE
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Des poissons ?
http://v1.aqua-compose.berthelot.io
Voilà c’est fait !
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
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
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Un designer à la rescousse !
A toi de jouer Cécile !
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Des poissons ?
Voilà c’est fait !
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Code & Design
“Je n’ai pas photoshop, ….”
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Code & Design
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
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Et si on travaillait comme un banc ?
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
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
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Et identification de parcours
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Et du coup, ils font quoi les développeurs pendant ce temps ?
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 !
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Le projet avance
Il faut réduire la taille et la responsabilité de nos composants
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Le projet avance
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Wireframes
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Les wireframes sont faits !
http://v2.aqua-compose.berthelot.io
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
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
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Recherches graphiques : des choix sémantiques
Mindmap
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Moodboard
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Dosis ExtraBold 800Dosis ExtraBold 500
Texture
Lumière
Mouvements
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Pour susciter des émotions !
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.
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
… et desktop
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
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 !
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”
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
L’Atomic Design
Atomes Molécules Organismes Templates Pages
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Début de l’Atomic : les Atomes, parlons le même langage
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Les styles de typographie
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 !
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Les animations pour rendre le produit vivant
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
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Premiers composants fonctionnels : les molécules
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Penser comportement
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Et guidelines
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Organismes : plusieurs molécules ensembles
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Template : structure HTML
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Création de pages type !
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Penser accessibilité
Chaque composant porte sa propre accessibilité
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
et les contrastes !
Carré blanc sur fond blanc, Malevitch, 1918
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Penser wording
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”
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Nous avons un design system
https://zeroheight.com/7a6db4657/p/48c886
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Un design system est un produit
(💙Penser à la documentation de la documentation)
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
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Ne fonctionne que si toute l’équipe est embarquée
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Quels sont les implications dans le code ?
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Le dossier common du projet
Et s’il s’appelait ...
DESIGN SYSTEM ?
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Les composants d’un design system
- Simple- Flexible- Personnalisable- Testé- Documenté
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Composants flexibles
L’utilisateur du design système doit pouvoir respecter la sémantique HTML
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
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Composants testés
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Un Composant = Une responsabilité
Respectez l’atomic design dans le code
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.
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Un outil de développement
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Supprimer Material du projet !
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Démonstration !
https://aqua-compose.berthelot.io
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Documentation du design system
Outils du designer
Outils du développeur
Outils collaboratifs
Les outils
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
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Material, Bootstrap, Bulma, …
===
Dette technique assumé
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 !
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Et pour aller plus loin ?
Autres applications
Supports imprimés
Supports de communications
Cécile Freyd-Foucault @cecilefreydf et Florent Berthelot @berthel350
Design system groupe
Ne jamais commencer par ça !
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 !
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
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
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)
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
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
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
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