Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le ﬂow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants

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

Product Designer - Agiliste

Florent Berthelot@berthel350

Développeur Web JS


Pourquoi ?

?Début p

roje

t

Utilisation d’une bibliothèque de composants


Comment faire différent ?

?


Le sujet

AQUA-COMPOSE


Des poissons ?

http://v1.aqua-compose.berthelot.io

Voilà c’est fait !


“Bien que répondant à nos exigences initiales, l’application ne répond pas à nos attentes en terme de design.”

Tous mes clients


Dans la tête du client

!Début p

roje

t


Fin d’intervention du designer

Ajout d’un designer

Proje

t moch

e

Proje

t joli


Un designer à la rescousse !

A toi de jouer Cécile !


Des poissons ?

Voilà c’est fait !


Code & Design

“Je n’ai pas photoshop, ….”


Code & Design


La triste réalité

!

Début p

roje

t


Ajout d’un designer

Proje

t moch

e

Proje

t joli


Et si on travaillait comme un banc ?


Le design, c’est des recherches

:)

Début p

roje

t


Recherches utilisateurs

Parcours utilisateurs

Wireframes


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


Et identification de parcours


Et du coup, ils font quoi les développeurs pendant ce temps ?


Le projet continue, on livre de la valeur métier !


Le projet avance

Il faut réduire la taille et la responsabilité de nos composants


Le projet avance


Wireframes


Les wireframes sont faits !

http://v2.aqua-compose.berthelot.io


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


La co-construction

:)Début p

roje

t




Wireframes

Recherches graphiques


Recherches graphiques : des choix sémantiques

Mindmap


Moodboard


Dosis ExtraBold 800Dosis ExtraBold 500

Texture

Lumière

Mouvements


Pour susciter des émotions !


Premier rendu d’un parcours...

● Partage des écrans et exportation des composants moléculaires

● Documentation de chaque composant : margin, padding, height, width, etc.


… et desktop


La co-construction

:)

Début p

roje

t




Wireframes


Co-construction du design system projet

Proje

t beau

et

fonct

ionnel


Ne plus penser page par page mais en composants !


Code & Design

Création d’un langage commun entre designer et développeur

Enfin, vous connaissez tous “l’ubiquitous language” du “DDD”


L’Atomic Design

Atomes Molécules Organismes Templates Pages


Début de l’Atomic : les Atomes, parlons le même langage


Les styles de typographie


Iconographie

PS : Stop avec les font-icons, SVG sprite !


Les animations pour rendre le produit vivant


Mise en place d’une grille !

Pour la conception Pour le développement

16 px = 1 rem

Pour les utilisateurs


Premiers composants fonctionnels : les molécules


Penser comportement


Et guidelines


Organismes : plusieurs molécules ensembles


Template : structure HTML


Création de pages type !


Penser accessibilité

Chaque composant porte sa propre accessibilité


et les contrastes !

Carré blanc sur fond blanc, Malevitch, 1918


Penser wording


Penser référencement

Le title de la page doit être “Compose ton aquarium avec les poissons les plus adaptés - Mon aquarium”


Nous avons un design system

https://zeroheight.com/7a6db4657/p/48c886

https://zeroheight.com/7a6db4657/p/48c886


Un design system est un produit

(💙Penser à la documentation de la documentation)


Mettre à jour au fur et à mesure le document central du design system

Garants Doc de référence Évolution


Ne fonctionne que si toute l’équipe est embarquée


Quels sont les implications dans le code ?


Le dossier common du projet

Et s’il s’appelait ...

DESIGN SYSTEM ?


Les composants d’un design system

- Simple- Flexible- Personnalisable- Testé- Documenté


Composants flexibles

L’utilisateur du design système doit pouvoir respecter la sémantique HTML


Composants personnalisables

L’utilisateur du design système doit pouvoir surcharger le style facilement en CSS


Composants testés


Un Composant = Une responsabilité

Respectez l’atomic design dans le code


FIRST Principle

Keep it (F)ocused.

Keep it (I)ndependent.

Keep it (R)eusable.

Keep it (S)mall.

Keep it (T)estable.


Un outil de développement


Supprimer Material du projet !


Démonstration !

https://aqua-compose.berthelot.io



Documentation du design system

Outils du designer

Outils du développeur

Outils collaboratifs

Les outils


Résumé

:)Début p

roje

t




Wireframes



Proje

t beau

et

fonct

ionnel


Material, Bootstrap, Bulma, …

===

Dette technique assumé


Quand mettre en place un design system ?

Dans chacun de vos projet !


Et pour aller plus loin ?

Autres applications

Supports imprimés

Supports de communications


Design system groupe

Ne jamais commencer par ça !


Pensez cross-technologies, le design system, c’est du design avant-tout !


La co-construction

:)Début p

roje

t




Wireframes



Extraction design system groupe


Pourquoi finalement se différencier ?

Pour le business

Pour les utilisateurs

Pour la diversité

Pour marquer son indépendance


Quand faire un design system différenciant ?

● Les interfaces vitrines

● Les interfaces ouvertes au public (B2C)


Dans quels cas il Ne faut Pas se différencier ?

Les interfaces métiers qui n’ont pas le budget Les PoCs


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


Merci !

Merci à Jérémie Patonnier, Christophe Addinquy, Hubert Giraud et Nicolas Bardoux


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

https://v1.aqua-compose.berthelot.io

https://v2.aqua-compose.berthelot.io


https://github.com/FBerthelot/aqua-compose

https://zeroheight.com/7a6db4657/p/4493da

Documents

Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le ﬂow (prototype cliquable, raconte une histoire) Partage des écrans avec les composants