Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le ﬂow...

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

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

Fin d’intervention du designer

Ajout d’un designer

t moch

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

Ajout d’un designer

t moch

t joli

Et si on travaillait comme un banc ?

Le design, c’est des recherches

Début p

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

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

Wireframes

Co-construction du design system projet

t beau

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

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

Wireframes

t beau

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

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

● 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

Designers, développeurs, créons la différence · Prototypage dans Invision pour montrer le ﬂow...

Documents

Comparison of the Simplification of the Pressure Profiles ......described by the binary friction model (BFM) considering the binary diffusion, Knudsen diffusion, and viscous ﬂow

DOCTORAT DE L'UNIVERSITÉ DE TOULOUSE · 2014-06-24 · Preface The present document considers the physics and modeling of shock wave/boundary layer interactions in transonic ﬂow

CLIQUABLE! Message du président 2 Spiritualité 3 ... › sites › default › files › vincenpaul...anniversaire du Charisme Vincentien. Chaque jour, nous prendrons du temps pour

Design Sprints: Créons un monde meilleur !

créons un environnement meilleur

Nous créons ce dont vous avez besoin pour vendre et communiquer ! DÉCOUVREZ NOTRE OFFRE PRESTATIONS & DOMAINES DEXPERTISE CREATIONIMPRESSIONPROMOTIONMARKETINGAUDITMEDIAS

Numerical methods for solid particles in particulate ﬂow …laure/articles/PLaure_GBeaume_O... · 2007. 3. 22. · space of square-integrable measurable functions on Ω. The inner

digital et cliquable - Paris · 2021. 1. 11. · saint-simon amÉlie g. brassens r. m. rilke m. tsvetaÏeva glaciÈre italie j. p. melville m. durand buffon bilipo m. arkoun diderot

Sekundi et à votre service pour sécuriser le poste client. « Nous créons des solutions »

Installation Guide · 2021. 7. 7. · 3. Installation Checkout NOTE: The water ﬂow from the sprayer can be limited by adjusting the angle valve. NOTE: The water temperature can

digital et cliquable - Paris

Le mot de passe est par défaut le jour, le mois et l'année ...maths.lebon.free.fr/documents/B2I/Comment_utiliser_Gibii-eleve.pdfLe deuxième bouton cliquable aussi vous permet de

Higher antioxidant and lower cadmium concentrations and ......were based on those previously published by Brandt et al.(27), and ﬂow diagrams of the protocols used are shown in Figs

Créons des produits exceptionnels ! animé par Yannick Grenzinger

Qu'est-ce qu'une carte conceptuelle - tecfa.unige.chtecfa.unige.ch/tecfa/teaching/staf17/0102/ress/doc/p1_fad/cc.pdf · mots-clefs, réaliser une carte cliquable, synthèse visuelle

Single fractures under normal stress: The relation …...Single fractures under normal stress: The relation between fracture specific sti•ness and fluid flow L.J. Pyrak-Noltea,b,*,

Cours 3 Outils de développement · frustration de devoir faire des changements car ça devient facile. Rupture du “ﬂow” Faire l’aller-retour entre le clavier et la souris

le diagnostic simplifié - Material Médico - Instrumentos ... · du sommeil Créons le futur ... (Médecine généraliste, cardiologie, ORL, Odontologie, psychiatrie ... ou manuel

Conçu, édité et animé par Partenaires de lʼédition actuelle · Diaporama en cover ﬂow Vue plein écran légendée Exemples ... Charles Baudelaire, Rainer Maria Rilke, Guillaume

Original article Is synchronised NIPPV more effective than ... · NIPPV was delivered using the same parameters as ﬂow-SNIPPV at a mechanical RR of 20 bpm. During ﬂow-SNIPPVand