Vous êtes développeur et vous n'arrivez jamais à reproduire les écrans fournis par les designers de votre équipe ? Vous êtes designer et vous ne parvenez pas à suivre le rythme de production pour fournir dans les temps les écrans aux développeurs ? L'Atomic Design, est une méthode de design par composants imaginée par Brad Frost, qui permet de sortir de la conception d'interfaces par pages ou en écrans. Cette méthodologie utilisée depuis longtemps par les développeurs permet de rapprocher les méthodes de conception d'interfaces et la façon dont celles-ci sont développées. L'Atomic Design permet de créer des environnements de design cohérents, évolutifs et conformes aux attentes des utilisateurs à travers la création d'un Design System.

1. L’Atomic
Design
Un framework pour faire travailler ensemble
Designers et Développeurs

2. QUI NOUS SOMMES ?
Loïc
UI Developer - Studio Floax
@CaptainFloax
Lucas
Full-Stack Developer - Studio Floax
@LcsBillet

3. DESIGNER EN TANT QUE DÉVELOPPEUR ?

4. Collaborer avec toutes les équipes
Factoriser le travail
Industrialiser les méthodes

6. « We’re all selling websites like paintings. Instead we
should be selling beautiful and easy access to content,
agnostic of device, screen size or context. »
Dan Mall

7. FRAGMENTATION DES TAILLES D’ÉCRANS
* Ordinateurs
* Smartphones
* Consoles
* Montres connectées
* IOT

8. GET YOUR CONTENT READY
TO GO ANYWHERE,
BECAUSE IT IS GOING
TO GO EVERYWHERE.
Brad FROST

9. L’ATOMIC DESIGN
On ne conçoit plus des pages mais des éléments d’interfaces
qui vont devoir trouver leur place dans des environnements
aussi bien immenses (projections sur un mur) que tout petits
(écrans de montres connectées)
‣ Design et développement par
composants

11. Les atomes Les molécules Les organismes
Les templates Les pages

12. Les atomes

13. LES ÉLÉMENTS IRRÉDUCTIBLES
Les atomes
Brique de base de l’identité de la marque.
Il peut s’agir d’un logo, d’une couleur, d’un texte, ou d’un
icône.
* Indivisibles
* Pas de but fonctionnel

14. Les molécules

15. COMPOSANTS SIMPLES
La colonne vertébrale du système de design.
Il peut s’agir d’un champs de recherche, d’une carte, ou d’un
bouton.
* Elements non complexes
* Avec but fonctionnel limité
Les molécules

16. Les organismes

17. PARTIES D’INTERFACE FINALE
Ce sont des sections reproductibles dans l’interface.
Il peut s’agir d’un header composé d’un champs de
recherche, d’un logo et d’une barre de navigation.
* Sections reproductibles
* Logique fonctionnelle complexe
Les organismes

18. Les templates

19. ENSEMBLES ABSTRAITS
Les templates sont abstraits et peuvent servir
plusieurs écrans, avec du contenu différent. Un
template n’a aucun contenu.
* Sans contenu
* Modèles simples et réutilisables
Les templates

20. Les pages

21. MAQUETTES TRADITIONNELLES
On ajoute le contenu aux différents templates réalisés
pour obtenir des maquettes HD et définir ce que
l’utilisateur verra concrètement.
Les pages

23. MAIS FINALEMENT, ON UTILISERAIT PAS
DÉJÀ CE TYPE DE MÉTHODES ?

28. C’EST QUOI, UN SYSTÈME DE DESIGN ?

30. LES SYSTÈMES DE DESIGN
* Vivant
* Agnostique
* Modulaire
* Universel
* Inclusif

32. TOUCHE PAS À MA
CRÉATIVITÉ
‣ Mais quel est donc le rôle du
designer ?
Je suis un artiste
La sensation de perdre l’aspect artistique vient de l’envie que chaque
interface soit, dans sa globalité, comme une oeuvre
Je ne suis pas un robot
Peur de n’avoir qu’à créer une suite de composants sans lien et sans dimension
artistique

33. POURRAIT-IL Y AVOIR DE
BONS ROMANS SANS BONS
ÉCRIVAINS ?
Spoiler : Non.

34. GAGNER EN CONSISTANCE, PAS EN
UNIFORMITÉ

35. PASSER D’ÉLÉMENTS SPÉCIFIQUES À
GÉNÉRIQUES

36. Il faut faire une vraie distinction entre la structure d’un élément
et son contenu.

37. DÉFINIR DES ATOMES FORTS ET CRÉATIFS
POUR AVOIR DES ORGANISMES
COHÉRENTS ET STRUCTURÉS

38. ET LES AVANTAGES ?
* Gagner du temps sur les tâches répétitives
* Faire des modifications globales
* Rester cohérent sans y réfléchir
* Eviter de dupliquer

39. COMMENT METTRE TOUT ÇA EN PLACE ?

40. LORS UN NOUVEAU PROJET
* Définir les atomes et l’identité de la marque
* Trouver les fonctionnalités principales
* Définir des parcours spécifiques
‣ Concevoir une expérience globale

41. LORS D’UN PROJET EXISTANT
* Faire l’inventaire de l’interface existante
* Découper l’ensemble en atomes
* Comprendre et intégrer les styles guides des développeurs
* Combiner l’ensemble pour créer le nouveau Système de
design
‣ Interpréter, comprendre et structurer
l’existant

42. ET DANS LA VRAIE VIE ?
* Adapter les termes et le scope en fonction des équipes
* C’est une démarche plus qu’une recette
* Avoir des « garants » du système

43. QUELQUES OUTILS
*Sketch, Invision Studio, Figma, Framer
*Framer X, React.app
*Storybook

44. SHOULD DESIGNERS CODE ?
SHOULD DEVELOPERS DESIGN ?

45. CO-CRÉER POUR MIEUX
COLLABORER
Une librairie pour les gouverner toutes
Réunir styles guides, pattern librairies, chartes graphiques, …
Parler la même langue
Utiliser des termes identiques pour simplifier les échanges et la construction
d’objectifs communs
Définir des objectifs communs
Les idéaux qui définissent le pourquoi afin de pouvoir aborder le comment en
toute sérénité

46. ET À QUI CELA PROFITE ?
* Aux utilisateurs
* Aux équipes de production
* Aux marques

47. MERCI
POUR VOTRE ATTENTION
@CaptainFloax - loic@studiofloax.fr