SlideShare une entreprise Scribd logo
1  sur  42
userADgents
L’ATOMIC DESIGN
Méthodologie de design d’interfaces
à l’heure du « tout-écran »
MOBILI


tea time
#14



userADgents
GUIDE PRATIQUE
Ces dernières années, de nombreux nouveaux usages et nouveaux devices
ont vu le jour… Avec autant de nouveaux formats d’écran !
‣ des smartphones de toutes tailles
‣ des tablettes mini ou maxi
‣ des écrans d’ordinateur toujours plus grands… ou plus petits !
‣ des smartwatches à écran rond, carré, rectangulaire, pour des
poignets larges, ou des fins ;)
‣ des télévisions connectées avec une possibilité infinie de
résolutions…
Et ce n’est pas près de s’arrêter là !
Les interfaces tendent à sortir de l’ordinaire écran pour aller vers 

des formats aussi dynamiques qu’inattendus. 

N’importe quel support peut maintenant devenir une interface.
1
2
« Getyourcontent 

ready to go anywhere,

because it is going 

to go everywhere. »
- Brad Frost -
QU’EST-CE QUE CELA IMPLIQUE 

POUR LES MARQUES 

ET LEUR CONTENU ?
Mais alors…
Le développement des technologies et les
nouveaux usages impliquent de réinventer
les méthodologies de conception
d’interfaces.
Nous ne devons plus penser l’interface
utilisateur par « Écrans » ou « Pages »…
Mais tels des systèmes de composants,
constitués d’éléments modulaires.
3
d’Atomic
Design
C’est 

le principe
d’Atomic
Design
C’est 

le principe
I

LE CONCEPT
Le «  père  » du concept, Brad Frost, propose de voir le design non plus comme un bloc
unitaire mais comme un système modulaire où le résultat final (c’est à dire les écrans) est le
résultat d’un assemblage d’éléments de plus petites tailles, eux-même constitués
d’éléments de plus petites tailles.
Ainsi, pour reprendre la taxinomie développée par Brad Frost, nous avons à la base des
atomes qui, assemblés donnent des molécules, qui assemblés deviennent des organismes,
qui seront les briques à assembler pour créer de futurs écrans et interfaces !
5
Atome Molécule Organisme Templates Pages
L’Atomic Design est une méthodologie de conception d’interfacesselon laquelle les
éléments des écrans sont découpés en atomes, permettant ainsi de les (ré)utiliser à l’infini
et sur n’importe quelle interface… Afin de gagner en temps et en cohérence !
La

philosophie
de

l’Atomic

Design
C’est la brique de base de l’identité d’une marque. L’atome sort
directement de la charte graphique et peut correspondre à des
éléments de couleur ou de typographie. Il vit difficilement seul et a
vocation à être assemblé et être une partie d’un élément plus grand.
En pratique : il peut s’agir d’un logo, d’une couleur, d’une typographie,
d’une image, un bouton…
6
Atome
Molécule
Organisme
La

philosophie
de

l’Atomic

Design
La molécule est le groupe d’atomes qui va constituer la colonne
vertébrale de notre design. Elles peuvent être fixes ou fluides et
doivent être pensées en différents formats responsive.
En pratique : Il peut s’agir par exemple d’un champ de recherche, qui
sera composé de plusieurs atomes : un label, un champ de texte et un
bouton.
Un organisme est un groupe de molécules. Ils vont former les
différentes sections de nos écrans.
Enpratique: Le champ de recherche associé à un visuel et à une barre
de navigation donne un organisme « Header » .
En parallèle de la hiérarchie « chimique » de composants, nous avons
les templates. C’est le premier type d’élément concret dans lequel on
va pouvoir se projeter et permettant de vérifier l’organisation.
De la même manière que les composants peuvent être utilisés pour
servir différents buts, les templates peuvent servir plusieurs écrans,
avec du contenu différent. 
7
La

philosophie
de

l’Atomic

Design
Les pages sont des instances des templates. Ici, on remplace les
placeholders par du « vrai » contenu textuel et visuel pour retranscrire
ce que verra l’utilisateur final.
Templates
Pages
8
L’ATOMIC DESIGN EN UNE MÉTAPHORE :
Et si… L’écrivain et son roman était comme le designer et ses interfaces ?
9
L’Atomic Design ne se réduit pas à concevoir des atomes qui seront assemblés et feront des pages. Il est important de
noter que tout comme le rôle de l’écrivain n’est pas seulement de choisir et d’assembler des lettres, le rôle du designer
n’est pas seulement de réaliser et d’assembler des composants atomiques. L’écrivain va ajouter sa vision, ses figures de
style et sa « patte » à l’histoire, ce qui fera du livre une oeuvre unique. Il en va de même pour le designer et ses interfaces !
Les atomes sont comme les
lettres à l’intérieur d’un
roman.
Assemblés, cela constitue
des mots.
L’assemblage de ces mots
forme des phrases.
Les phrases vont faire
l’histoire du livre. À l’histoire
s’ajoute le style de l’écrivain.
IL PARCOURAIT
PAISIBLEMENT SON LIVRE
ALORS QUE LE TRAIN
FILAIT À TOUTE ALLURE
DANS LA FORÊT NOIRE.
IL 

FORET 

TRAIN

TOUTE
A B C D E F G H I
J K L M N O P Q R
S T U V W X Y Z
L’écrivainetsonroman
Ledesigneretsesinterfaces
10
L’ATOMIC DESIGN EN UN EXEMPLE :
Regardons de plus près… Les interfaces d’Airbnb.
Le prix
Le titre
La description
La note
Le nombre de commentaires
Le visuel
L’assemblage du visuel, du prix, du
titre, de la description, de la note et du
nombre de commentaires donne la
molécule « Aperçu de logement ».
L’assemblage de plusieurs molécules
d’aperçu donne la liste de logements.
Avec une molécule de spécifications
de recherche, elles composent
l’organisme « Résultats de recherche »
du site.
Les
atomes
La

molécule
L’

organisme
12
13
Les

templates
Ces templates ont été imaginés à partir de
la page « Logements » d’Airbnb dans une
démarche Atomic Design.
Header
Moteur de recherche Compte
Menu
Filtres de recherche
Aperçu de logement
Aperçu de logement
Aperçu de logement
Aperçu de logement
Recherche par carte
Tab bar
Moteur de recherche
Menu
Aperçu 

de logement
Aperçu 

de logement
Aperçu 

de logement
Aperçu 

de logement
Filtres / Carte
Moteur de recherche
Menu
Tab bar
Aperçu 

de logement
Filtres / Carte
Next: les écrans découlants
de ces templates
VERSION WEB DESKTOP APP IPAD APP IPHONE
Les organismes s’insèrent directement dans les templates et créent
ainsi des écrans adaptés à chaque device !
14
Les

écrans
VERSION WEB DESKTOP APP IPAD APP IPHONE
II

LES AVANTAGES DE L’ATOMIC DESIGN
Aujourd’hui,
sans Atomic Design,
on arrive quand même
à produire des designs

de qualité.
Alors…

POURQUOI METTRE EN PLACE 

UN NOUVEAU SYSTÈME,
QUI VA RIGIDIFIER 

NOTRE WORKFLOW ?
16
17
Les

avantages

de

l’Atomic

Design
Une vraie
COHÉRENCE
Une facilité
DE MISE À JOUR
Une librairie
CENTRALISÉE
Partager le même
VOCABULAIRE
Une meilleure
COMPRÉHENSION
L’atomic design permet de mettre en place les bases d’une seule
librairie contenant tous les designs utilisés au sein du site. Plus de
perte de temps à rechercher un élément parmi des dizaines de
supports différents !
Ce système modulable permet de faire converger l’ensemble des
objets graphiques existants. On part des atomes pour créer de
nouvelles molécules qui seront communs à l’ensemble des pages.
En retournant à l’échelle d’un atome ou d’une molécule, on peut
simultanément mettre à jour l’ensemble des écrans et ainsi gagner en
temps et en productivité. (+A/B Testing)
Finis les problèmes d’incompréhension lors de la mise à jour des
éléments graphiques. On utilise le même vocabulaire pour désigner
les mêmes éléments à tout moment et au sein de toutes les équipes.
Un système qui permet aux équipes de mieux collaborer et de faciliter
la jonction entre design (UX + UI) et développement.
L’ATOMIC DESIGN
PERMET UN GAIN 

DE TEMPS ET 

UNE MEILLEURE
COHÉRENCE
En bref…
18
III

MÉTHODOLOGIE
Débuter
en
Atomic
Design
20
Comment mettre en place les
bases d’un système atomique

en partant de rien ?

Comment penser les objets
graphiques seuls, qui devront
avoir une cohérence une fois
assemblés ?
Il est nécessaire de commencer par définir les atomes de base qui correspondent
aux éléments essentiels et forts de l’identité de marque et de la charte
graphique.
Débuter
en
Atomic
Design
21
1ère étape : Définir les atomes de base
Helvetica
HELVETICA 

CAPS BOLD 10%
TypographieCouleur
#42C29F
#084F6A
Débuter
en
Atomic
Design
22
La première chose à faire est d’établir un cadre afin de ne pas concevoir des
éléments graphiques sans but et qui ne sont rattachés à rien.
Pour cela, il faut identifier les besoins et actions de l’utilisateur afin de lister et
hiérarchiser par ordre d’importance les fonctionnalités et les différents parcours que
devra avoir le site web ou l’application.
2ème étape : Lister les fonctionnalités et parcours clés
Fonctionnalités 

clés
Fonctionnalités 

d’importance modérée
Fonctionnalités annexes
Par exemple, si notre site web
est un site e-commerce
d’une marque de prêt-à-
porter, il faudra concevoir des
éléments constituants un
panier d’achat, une fiche
produit, un moteur de
recherche… etc.
Coeur du site, 

ce pour quoi il existe
Le designer va ensuite concevoir les premiers composants répondant aux besoins
définis dans l’étape préalable. Il commence par le coeur du site (ou de l’app) et va
faire des allers-retours entre les composants déjà créés et les fonctionnalités qui
suivent, au fur et à mesure que la conception du site (ou de l’app) avance.
Cela va permettre de créer de nouveaux éléments mais également de faire évoluer
ceux qui existent déjà.
Débuter
en
Atomic
Design
23
Et ensuite…
On commence à concevoir les composants
répondant au coeur du site internet.
Pour réaliser les composants des fonctionnalités clés, on se sert de
ceux conçus pour le coeur du site qui pourront également être
améliorés.
Etc.
Jusqu’aux fonctionnalités annexes…
Passer
en
Atomic
Design
24
Comment, à partir d’un site
existant, mettre en place les bases
d’un système atomique ? 

Comment éviter les redondances
graphiques et regagner en
cohérence ?
- Éléments globaux (headers, footer, …)
- Navigation (navigation primaire, fil d’Ariane, …)
- Images (Logos, avatars, vignettes …)
- Icônes
- Formulaires (radio buttons, checkboxes,
sliders, …)
- Boutons, blocs
- Listes (ordonnées, non-ordonnées, …)
- Médias (players vidéo / audio…)
- Third-party components (widgets, iframes, …)
- Publicités
- Couleurs
- Animations
Passer
en
Atomic
Design
25
Référencer l’ensemble des objets graphiques
qui cohabitent au sein du site (ou de l’app)
existant :
1ère étape : Réaliser l’inventaire du site
<
Passer
en
Atomic
Design
26
Il s’agit de réunir les équipes concernées (UX, Design, Développement) et de se
poser les bonnes questions pour mettre en place la base de travail :
À quoi sert chaque objet et dans quel
contexte est-il utilisé ?
Quels objets doit-on garder, lesquels
pouvons-nous supprimer ?
Lesquels peuvent être fusionnés ?
Comment nommer chaque élément ?
L’idée n’est cependant pas de figer les
noms et groupes choisis à ce moment
là, car ils pourront être retravaillés par la
suite.
Comment catégoriser les objets ?
Comment traduire cela dans une librairie centralisée ?
Quel type de librairie utiliser ?
Et donc…
2ème étape : Définir le scope de la future librairie
Lesoutils
du Designer
27
Après avoir initié la mise en place
du système, quels outils utiliser
pour concevoir les composants ?
Le plugin Craft ajouté au logiciel de
création Sketch permet de donner
l’accès à une librairie centralisée online.
Un designer peut ainsi sur plusieurs
fichiers différents récupérer des éléments
et les mettre à jour instantanément sur
les différents écrans les contenant.
Il peut donc inclure des éléments au sein
d’autres éléments et ainsi reprendre les
concepts d’atomes, de molécules et
d’organismes, et les partager avec
d’autres fichiers et d’autres designers.
Cependant, la librairie centralisée doit
être réalisée au préalable.
Sketch
+
Craft
28
*L’utilisationdeslogicielsSketchet
Craftestunesolutionparmiplusieurs.
Ils’agitdecelleutiliséeparnotre
agence,maislibreàchacundechoisir
sonorganisation.
Designer
A
D
CB
Sketch
Éléments
graphiquesproduits
parledesigner
grâceàsketchsont
insérésdansCraft
A CB D
Craft
A
C
B
D
E
F
G
A
C
B
D
E
F
G
Craftdonne
accèsentemps
réelaux
élémentsàtous
lesautres
designers
A
D
CB
A
G
E EE
C
D
E
D
IV

LA LIBRAIRIE CENTRALISÉE
‘
’ 30
Cette méthode est née suite aux mutations
engendrées par le web (démultiplication des
écrans et typologies de contenu) et utilise le
web pour nous permettre de mieux travailler à
distance, de manière synchronisée (cloud), en
équipes fragmentées.
Solange DERREY
Directrice du pôle Trendwatchers
USERADGENTS
La librairie se présente sous la forme
d’un site internet ou intranet, un
document, une plateforme… qui soit
centralisé(e), facilement accessible par
l’ensemble des acteurs de l’entreprise
(développeurs, designers, marketing, …)
et facile à mettre à jour !
Une librairie de design n’est pas un
artefact statique, mais un organisme
vivant qui va être modifié et évoluer
avec le temps.
La
forme
dela
librairie
31
A
C
B
D
E
F
G
Exempledelibrairie:

PatternLab
Etant donné le statut évolutif, partagé et collaboratif de la librairie, il est important de
définir les rôles de chacune des parties prenantes.
Nous pouvons observer deux types de rôle :
L’orga-
nisation
de la
librairie
32
Ils font et maintiennent à jour la librairie.
Les designers « Makers » réalisent et mettent à jour les éléments graphiques. 

Les développeurs « Makers » conçoivent et mettent à jour le code associé à chaque
élément.
Ils utilisent les éléments de la librairie.
Les designers « Users » réalisent les pages complètes du site ou de l’app. 

Les développeurs « Users » réalisent la totalité du code du site ou de l’app.
Les Makers
Les Users
33
L’orga-
nisation
de la
librairie
Existe déjà
L’élément remplit-il
tous mes critères ?
Est-ce qu’il peut être
amélioré pour répondre
aux nouveaux critères
et toujours satisfaire
les anciens ?
OuiNon
Un élément similaire
existe-t-il ?
Prototype l’élément.
Peut-il être réutilisé
dans un autre composant ?
Peux-tu le rendre
plus générique ?
Oui
N’existe pas
Fais une proposition
et ajoute le !
Non
Oui
Oui
Etc..
Non
Non
Non
Oui
Ajoute l’élément
à la librairie !
ÉLÉMENT LAMBDA
Les gestionnaires de la librairie, les
« Makers », doivent mette en place
des process de gestion.
Par exemple, le schéma à droite
montre quel est le processus
lorsqu’un user / maker a besoin
d’un élément.
Mais… Toutes les entreprises sont
structurées différemment.
Chaque entreprise doit donc
développer son propre modèle
d’organisation pour au mieux
gérer l’évolution de la librairie.
‘
’34
Adopter le design atomique, c’est s’attacher à la
définition même du design : ce sont les petits
détails qui font les grandes idées. Il en est
de même pour l’équipe. Nous, atomes, sommes
tous acteurs de la cohérence, la pérennité d’un
projet à plus grande échelle.
Plus qu’une méthode, le design a trouvé un
langage, accessible et utilisable par tous. 

Et quand on parle la même langue, il en devient
plus facile de s’organiser, échanger, partager et
donc, être créatif.
Alexandre PASCUAL
Directeur du Design
USERADGENTS
Il n’y a pas de recette
magique car toutes les
entreprises sont structurées
différemment.
L’Atomic Design peut
s’adapter à chaque
entreprise et à chaque
projet.
Dans le but de toujours
gagner en temps et en
cohérence…
Pour conclure…
35
VOUS SOUHAITEZ LANCER UN PROJET EN
ATOMIC DESIGN ?
Rencontrons-nous !
userADgents est spécialisée dans la conception, le développement et la promotion de
sites et d’applications pour smartphones, tablettes et objets connectés.
userADgents
Raphaël Drion
UX Designer
r.drion@useradgents.com
Lucile Moreno
Chargée de communication
l.moreno@useradgents.com
É T U D E R É A L I S É E P A R
T R E N D W A T C H E R S
Le pôle études digitales
et formations de userADgents
JE M’INSCRIS À LA NEWS
JE FOLLOW SUR TWITTER
Et pour ne rien manquer
des prochaines études !
www.useradgents.com
USERADGENTS & JOSHFIRE
AGENCE DIGITALE
MOBILE FIRST USER CENTRIC
AGENCE CONSEIL
EN INNOVATION
userADgents est spécialisée dans la conception,
le développement et la promotion de sites et
d’applications pour smartphones, tablettes et
objets connectés.
Joshfire, une équipe de designers et
d’ingénieurs qui conçoivent de A à Z des
objets connectés et des expériences
interactives sur mesure.
userADgents
FABRIQUE 

DE DISPOSITIFS 

DIGITAUXINNOVANTS
COMPLÉMENTAIRES
DEUXAGENCES
Hier l’enjeu était de s’adapter au web mobile,
aujourd’hui & demain il sera d’embrasser ce
nouveau monde ultra connecté où terminaux
mobiles & objets communiquent. 
Notre complémentarité nous permet
d’imaginer des expériences transversales à
ces dispositifs et de répondre aux nouvelles
problématiques des marques.
1
ÈRE
1
FORMANTÀELLESDEUXLA:
USERADGENTS & JOSHFIRE
…DU CONSEIL À LA COMMERCIALISATION…
Analyse
comportementale
Ateliers d’idéation
Recherche de
concepts innovants
User journey
Ergonomie
Tests utilisateurs
Ateliers de co-création
Design des
interfaces
Design industriel
Objets connectés
Applications natives
(iOS/Android/Windows)
Responsive & Adaptive
Design
Back-end & APIs
Arduino / Raspberry Pi
Réalité virtuelle
Chat bots
Publicité mobile
Couponing
SMS/Push Notif
App Store
Optimization
Mobile-to-store
Interactions in-store
Beacons
Vidéo
Etudes fonctionnelles
Prototypages
Spécifications
Suivi d’industrialisation
& de production
Etude de tendances
Audit de marque
Benchmarks
Accompagnement
stratégique
Recherche &
Innovation
DESIGN
PROMOTION
CRM
UX / IDÉATION DÉVELOPPEMENT
PROTOTYPAGE &
INDUSTRIALISATION
CONSEIL
userADgents
SOYEZ UTILES

& COHÉRENTS
CULTIVEZ VOTRE
DIFFÉRENCE
Le digital et vos clients sont en
constante mouvance ! Nous aimons
faire bouger les choses et secouer les
esprits pour sortir des idées reçues et
se challenger constamment.
SENS
EFFERVESCENCE
ESSENCE
Dans un environnement de plus en plus
concurrentiel et un contexte de
surexposition des consommateurs,
chaque marque doit cultiver sa
différence et revendiquer son ADN et
ses valeurs.
Nous pensons que le digital ne doit pas
être gadget ! Nous voulons créer des
dispositifs qui ont du sens pour vos
clients.
OUVREZ GRAND 

LES YEUX
…ANIMÉES PAR UNE VISION COMMUNE !
MobiliTeaTime #14 : L'Atomic Design

Contenu connexe

Tendances

Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologieekino
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?WebSchool Orléans
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web MobileRaphaël Goetter
 
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents USERADGENTS
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
 
Responsive design, site mobile, Applications : comment faire le bon choix
Responsive design, site mobile, Applications : comment faire le bon choix Responsive design, site mobile, Applications : comment faire le bon choix
Responsive design, site mobile, Applications : comment faire le bon choix Pierre Priot
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-designOlivier Soros
 
Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014Teester
 
Concevoir la navigation sur mobile
Concevoir la navigation sur mobileConcevoir la navigation sur mobile
Concevoir la navigation sur mobileAmelie Boucher
 
UX Republic UX-Radar - juin 2018
UX Republic UX-Radar - juin 2018 UX Republic UX-Radar - juin 2018
UX Republic UX-Radar - juin 2018 romain landsberg
 
Revolution Mobile @Web2day
Revolution Mobile @Web2dayRevolution Mobile @Web2day
Revolution Mobile @Web2dayAlexandre Jubien
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesBig5media
 
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16Alexandre Jubien
 
Publier une application mobile en un clic
Publier une application mobile en un clicPublier une application mobile en un clic
Publier une application mobile en un clicFabernovel
 
Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Net Design
 
Spécifications de webservices avec un seul outil
Spécifications de webservices avec un seul outilSpécifications de webservices avec un seul outil
Spécifications de webservices avec un seul outilFabernovel
 

Tendances (20)

Le Flat Design
Le Flat DesignLe Flat Design
Le Flat Design
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
 
Mobile toolbox
Mobile toolboxMobile toolbox
Mobile toolbox
 
Flat Design
Flat DesignFlat Design
Flat Design
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
 
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
 
Responsive design, site mobile, Applications : comment faire le bon choix
Responsive design, site mobile, Applications : comment faire le bon choix Responsive design, site mobile, Applications : comment faire le bon choix
Responsive design, site mobile, Applications : comment faire le bon choix
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014
 
Concevoir la navigation sur mobile
Concevoir la navigation sur mobileConcevoir la navigation sur mobile
Concevoir la navigation sur mobile
 
UX Republic UX-Radar - juin 2018
UX Republic UX-Radar - juin 2018 UX Republic UX-Radar - juin 2018
UX Republic UX-Radar - juin 2018
 
Revolution Mobile @Web2day
Revolution Mobile @Web2dayRevolution Mobile @Web2day
Revolution Mobile @Web2day
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
 
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
 
Publier une application mobile en un clic
Publier une application mobile en un clicPublier une application mobile en un clic
Publier une application mobile en un clic
 
Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017
 
Spécifications de webservices avec un seul outil
Spécifications de webservices avec un seul outilSpécifications de webservices avec un seul outil
Spécifications de webservices avec un seul outil
 

Similaire à MobiliTeaTime #14 : L'Atomic Design

Faire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignFaire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignLoïc Vanderschooten
 
Human Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignHuman Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignLoïc Vanderschooten
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Idean France
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...Microsoft
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesConcept Image
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Idean France
 
Fake it ('till you make it)
Fake it ('till you make it)Fake it ('till you make it)
Fake it ('till you make it)Rémi Delhaye
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
 
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)i-breed et associés
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftMicrosoft Décideurs IT
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Inaativ
 
Bien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelinesBien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelinesMicrosoft Technet France
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsIdean France
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...Flupa
 
Office_2019_pour_les_Nuls.pdf
Office_2019_pour_les_Nuls.pdfOffice_2019_pour_les_Nuls.pdf
Office_2019_pour_les_Nuls.pdfOpenWorld
 
Architecture procédurale
Architecture procéduraleArchitecture procédurale
Architecture procéduralemartin255
 
Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536quickredfox
 

Similaire à MobiliTeaTime #14 : L'Atomic Design (20)

Faire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignFaire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic Design
 
Human Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignHuman Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic Design
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
 
Fake it ('till you make it)
Fake it ('till you make it)Fake it ('till you make it)
Fake it ('till you make it)
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014
 
Bien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelinesBien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelines
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outils
 
Siteweb Mini
Siteweb MiniSiteweb Mini
Siteweb Mini
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
 
Office_2019_pour_les_Nuls.pdf
Office_2019_pour_les_Nuls.pdfOffice_2019_pour_les_Nuls.pdf
Office_2019_pour_les_Nuls.pdf
 
Architecture procédurale
Architecture procéduraleArchitecture procédurale
Architecture procédurale
 
Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536
 

Plus de USERADGENTS

Métavers l'infini et au-delà : quelles opportunités pour les marques ?
Métavers l'infini et au-delà : quelles opportunités pour les marques ? Métavers l'infini et au-delà : quelles opportunités pour les marques ?
Métavers l'infini et au-delà : quelles opportunités pour les marques ? USERADGENTS
 
Etude • RetailXperience #4
Etude • RetailXperience #4Etude • RetailXperience #4
Etude • RetailXperience #4USERADGENTS
 
Fridays digest • Janvier - Décembre 2018 [ Friday's Watch ]
Fridays digest • Janvier - Décembre 2018 [ Friday's Watch ]Fridays digest • Janvier - Décembre 2018 [ Friday's Watch ]
Fridays digest • Janvier - Décembre 2018 [ Friday's Watch ]USERADGENTS
 
Friday's Digest • Janvier - Août 2018
Friday's Digest • Janvier - Août 2018Friday's Digest • Janvier - Août 2018
Friday's Digest • Janvier - Août 2018USERADGENTS
 
MoiliteaTime #17 : Best Practices Sites M-commerce | Ameublement & Décoration
MoiliteaTime #17 : Best Practices Sites M-commerce | Ameublement & DécorationMoiliteaTime #17 : Best Practices Sites M-commerce | Ameublement & Décoration
MoiliteaTime #17 : Best Practices Sites M-commerce | Ameublement & DécorationUSERADGENTS
 
MobiliteaTime #16 : Les Voice First Devices
MobiliteaTime #16 : Les Voice First Devices  MobiliteaTime #16 : Les Voice First Devices
MobiliteaTime #16 : Les Voice First Devices USERADGENTS
 
SUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'étéSUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'étéUSERADGENTS
 
MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11USERADGENTS
 
IoTeaTime #4 : Smart City
IoTeaTime #4 : Smart City IoTeaTime #4 : Smart City
IoTeaTime #4 : Smart City USERADGENTS
 
MobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesMobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesUSERADGENTS
 
MobiliTeaTime #12 : RETAILXPERIENCE - Penser son point de vente comme un site...
MobiliTeaTime #12 : RETAILXPERIENCE - Penser son point de vente comme un site...MobiliTeaTime #12 : RETAILXPERIENCE - Penser son point de vente comme un site...
MobiliTeaTime #12 : RETAILXPERIENCE - Penser son point de vente comme un site...USERADGENTS
 
MobiliteaTime #10 : Apple Pay & Apple Wallet
MobiliteaTime #10 : Apple Pay & Apple Wallet MobiliteaTime #10 : Apple Pay & Apple Wallet
MobiliteaTime #10 : Apple Pay & Apple Wallet USERADGENTS
 
IoTeaTime #3 : Smart Home | De la maison connectée à la maison intelligente
IoTeaTime #3 : Smart Home | De la maison connectée à la maison intelligenteIoTeaTime #3 : Smart Home | De la maison connectée à la maison intelligente
IoTeaTime #3 : Smart Home | De la maison connectée à la maison intelligenteUSERADGENTS
 
MobiliteaTime #9 : les Search Ads d'Apple
MobiliteaTime #9 : les Search Ads d'AppleMobiliteaTime #9 : les Search Ads d'Apple
MobiliteaTime #9 : les Search Ads d'AppleUSERADGENTS
 
IoTeaTime #2 : Welcome to Artificial Reality | Réalités augmentée, virtuelle ...
IoTeaTime #2 : Welcome to Artificial Reality | Réalités augmentée, virtuelle ...IoTeaTime #2 : Welcome to Artificial Reality | Réalités augmentée, virtuelle ...
IoTeaTime #2 : Welcome to Artificial Reality | Réalités augmentée, virtuelle ...USERADGENTS
 
MobiliteaTime #8 : Les Chat Bots
MobiliteaTime #8 : Les Chat BotsMobiliteaTime #8 : Les Chat Bots
MobiliteaTime #8 : Les Chat BotsUSERADGENTS
 
MobiliteaTime #7 : Blockchain
MobiliteaTime #7 : BlockchainMobiliteaTime #7 : Blockchain
MobiliteaTime #7 : BlockchainUSERADGENTS
 
MobiliteaTime #6 - #TravelXperience (ENGLISH VERSION)
MobiliteaTime #6 - #TravelXperience (ENGLISH VERSION)MobiliteaTime #6 - #TravelXperience (ENGLISH VERSION)
MobiliteaTime #6 - #TravelXperience (ENGLISH VERSION)USERADGENTS
 
IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016 IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016 USERADGENTS
 
MobiliteaTime #3 : RetailXperience: the new definition of stores (ENGLISH VER...
MobiliteaTime #3 : RetailXperience: the new definition of stores (ENGLISH VER...MobiliteaTime #3 : RetailXperience: the new definition of stores (ENGLISH VER...
MobiliteaTime #3 : RetailXperience: the new definition of stores (ENGLISH VER...USERADGENTS
 

Plus de USERADGENTS (20)

Métavers l'infini et au-delà : quelles opportunités pour les marques ?
Métavers l'infini et au-delà : quelles opportunités pour les marques ? Métavers l'infini et au-delà : quelles opportunités pour les marques ?
Métavers l'infini et au-delà : quelles opportunités pour les marques ?
 
Etude • RetailXperience #4
Etude • RetailXperience #4Etude • RetailXperience #4
Etude • RetailXperience #4
 
Fridays digest • Janvier - Décembre 2018 [ Friday's Watch ]
Fridays digest • Janvier - Décembre 2018 [ Friday's Watch ]Fridays digest • Janvier - Décembre 2018 [ Friday's Watch ]
Fridays digest • Janvier - Décembre 2018 [ Friday's Watch ]
 
Friday's Digest • Janvier - Août 2018
Friday's Digest • Janvier - Août 2018Friday's Digest • Janvier - Août 2018
Friday's Digest • Janvier - Août 2018
 
MoiliteaTime #17 : Best Practices Sites M-commerce | Ameublement & Décoration
MoiliteaTime #17 : Best Practices Sites M-commerce | Ameublement & DécorationMoiliteaTime #17 : Best Practices Sites M-commerce | Ameublement & Décoration
MoiliteaTime #17 : Best Practices Sites M-commerce | Ameublement & Décoration
 
MobiliteaTime #16 : Les Voice First Devices
MobiliteaTime #16 : Les Voice First Devices  MobiliteaTime #16 : Les Voice First Devices
MobiliteaTime #16 : Les Voice First Devices
 
SUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'étéSUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'été
 
MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11
 
IoTeaTime #4 : Smart City
IoTeaTime #4 : Smart City IoTeaTime #4 : Smart City
IoTeaTime #4 : Smart City
 
MobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesMobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile Pages
 
MobiliTeaTime #12 : RETAILXPERIENCE - Penser son point de vente comme un site...
MobiliTeaTime #12 : RETAILXPERIENCE - Penser son point de vente comme un site...MobiliTeaTime #12 : RETAILXPERIENCE - Penser son point de vente comme un site...
MobiliTeaTime #12 : RETAILXPERIENCE - Penser son point de vente comme un site...
 
MobiliteaTime #10 : Apple Pay & Apple Wallet
MobiliteaTime #10 : Apple Pay & Apple Wallet MobiliteaTime #10 : Apple Pay & Apple Wallet
MobiliteaTime #10 : Apple Pay & Apple Wallet
 
IoTeaTime #3 : Smart Home | De la maison connectée à la maison intelligente
IoTeaTime #3 : Smart Home | De la maison connectée à la maison intelligenteIoTeaTime #3 : Smart Home | De la maison connectée à la maison intelligente
IoTeaTime #3 : Smart Home | De la maison connectée à la maison intelligente
 
MobiliteaTime #9 : les Search Ads d'Apple
MobiliteaTime #9 : les Search Ads d'AppleMobiliteaTime #9 : les Search Ads d'Apple
MobiliteaTime #9 : les Search Ads d'Apple
 
IoTeaTime #2 : Welcome to Artificial Reality | Réalités augmentée, virtuelle ...
IoTeaTime #2 : Welcome to Artificial Reality | Réalités augmentée, virtuelle ...IoTeaTime #2 : Welcome to Artificial Reality | Réalités augmentée, virtuelle ...
IoTeaTime #2 : Welcome to Artificial Reality | Réalités augmentée, virtuelle ...
 
MobiliteaTime #8 : Les Chat Bots
MobiliteaTime #8 : Les Chat BotsMobiliteaTime #8 : Les Chat Bots
MobiliteaTime #8 : Les Chat Bots
 
MobiliteaTime #7 : Blockchain
MobiliteaTime #7 : BlockchainMobiliteaTime #7 : Blockchain
MobiliteaTime #7 : Blockchain
 
MobiliteaTime #6 - #TravelXperience (ENGLISH VERSION)
MobiliteaTime #6 - #TravelXperience (ENGLISH VERSION)MobiliteaTime #6 - #TravelXperience (ENGLISH VERSION)
MobiliteaTime #6 - #TravelXperience (ENGLISH VERSION)
 
IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016 IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016
 
MobiliteaTime #3 : RetailXperience: the new definition of stores (ENGLISH VER...
MobiliteaTime #3 : RetailXperience: the new definition of stores (ENGLISH VER...MobiliteaTime #3 : RetailXperience: the new definition of stores (ENGLISH VER...
MobiliteaTime #3 : RetailXperience: the new definition of stores (ENGLISH VER...
 

MobiliTeaTime #14 : L'Atomic Design

  • 1. userADgents L’ATOMIC DESIGN Méthodologie de design d’interfaces à l’heure du « tout-écran » MOBILI
 
tea time #14
 
 userADgents GUIDE PRATIQUE
  • 2. Ces dernières années, de nombreux nouveaux usages et nouveaux devices ont vu le jour… Avec autant de nouveaux formats d’écran ! ‣ des smartphones de toutes tailles ‣ des tablettes mini ou maxi ‣ des écrans d’ordinateur toujours plus grands… ou plus petits ! ‣ des smartwatches à écran rond, carré, rectangulaire, pour des poignets larges, ou des fins ;) ‣ des télévisions connectées avec une possibilité infinie de résolutions… Et ce n’est pas près de s’arrêter là ! Les interfaces tendent à sortir de l’ordinaire écran pour aller vers 
 des formats aussi dynamiques qu’inattendus. 
 N’importe quel support peut maintenant devenir une interface. 1
  • 3. 2 « Getyourcontent 
 ready to go anywhere,
 because it is going 
 to go everywhere. » - Brad Frost - QU’EST-CE QUE CELA IMPLIQUE 
 POUR LES MARQUES 
 ET LEUR CONTENU ? Mais alors…
  • 4. Le développement des technologies et les nouveaux usages impliquent de réinventer les méthodologies de conception d’interfaces. Nous ne devons plus penser l’interface utilisateur par « Écrans » ou « Pages »… Mais tels des systèmes de composants, constitués d’éléments modulaires. 3 d’Atomic Design C’est 
 le principe d’Atomic Design C’est 
 le principe
  • 6. Le «  père  » du concept, Brad Frost, propose de voir le design non plus comme un bloc unitaire mais comme un système modulaire où le résultat final (c’est à dire les écrans) est le résultat d’un assemblage d’éléments de plus petites tailles, eux-même constitués d’éléments de plus petites tailles. Ainsi, pour reprendre la taxinomie développée par Brad Frost, nous avons à la base des atomes qui, assemblés donnent des molécules, qui assemblés deviennent des organismes, qui seront les briques à assembler pour créer de futurs écrans et interfaces ! 5 Atome Molécule Organisme Templates Pages L’Atomic Design est une méthodologie de conception d’interfacesselon laquelle les éléments des écrans sont découpés en atomes, permettant ainsi de les (ré)utiliser à l’infini et sur n’importe quelle interface… Afin de gagner en temps et en cohérence ! La
 philosophie de
 l’Atomic
 Design
  • 7. C’est la brique de base de l’identité d’une marque. L’atome sort directement de la charte graphique et peut correspondre à des éléments de couleur ou de typographie. Il vit difficilement seul et a vocation à être assemblé et être une partie d’un élément plus grand. En pratique : il peut s’agir d’un logo, d’une couleur, d’une typographie, d’une image, un bouton… 6 Atome Molécule Organisme La
 philosophie de
 l’Atomic
 Design La molécule est le groupe d’atomes qui va constituer la colonne vertébrale de notre design. Elles peuvent être fixes ou fluides et doivent être pensées en différents formats responsive. En pratique : Il peut s’agir par exemple d’un champ de recherche, qui sera composé de plusieurs atomes : un label, un champ de texte et un bouton. Un organisme est un groupe de molécules. Ils vont former les différentes sections de nos écrans. Enpratique: Le champ de recherche associé à un visuel et à une barre de navigation donne un organisme « Header » .
  • 8. En parallèle de la hiérarchie « chimique » de composants, nous avons les templates. C’est le premier type d’élément concret dans lequel on va pouvoir se projeter et permettant de vérifier l’organisation. De la même manière que les composants peuvent être utilisés pour servir différents buts, les templates peuvent servir plusieurs écrans, avec du contenu différent.  7 La
 philosophie de
 l’Atomic
 Design Les pages sont des instances des templates. Ici, on remplace les placeholders par du « vrai » contenu textuel et visuel pour retranscrire ce que verra l’utilisateur final. Templates Pages
  • 9. 8 L’ATOMIC DESIGN EN UNE MÉTAPHORE : Et si… L’écrivain et son roman était comme le designer et ses interfaces ?
  • 10. 9 L’Atomic Design ne se réduit pas à concevoir des atomes qui seront assemblés et feront des pages. Il est important de noter que tout comme le rôle de l’écrivain n’est pas seulement de choisir et d’assembler des lettres, le rôle du designer n’est pas seulement de réaliser et d’assembler des composants atomiques. L’écrivain va ajouter sa vision, ses figures de style et sa « patte » à l’histoire, ce qui fera du livre une oeuvre unique. Il en va de même pour le designer et ses interfaces ! Les atomes sont comme les lettres à l’intérieur d’un roman. Assemblés, cela constitue des mots. L’assemblage de ces mots forme des phrases. Les phrases vont faire l’histoire du livre. À l’histoire s’ajoute le style de l’écrivain. IL PARCOURAIT PAISIBLEMENT SON LIVRE ALORS QUE LE TRAIN FILAIT À TOUTE ALLURE DANS LA FORÊT NOIRE. IL 
 FORET 
 TRAIN
 TOUTE A B C D E F G H I J K L M N O P Q R S T U V W X Y Z L’écrivainetsonroman Ledesigneretsesinterfaces
  • 11. 10 L’ATOMIC DESIGN EN UN EXEMPLE : Regardons de plus près… Les interfaces d’Airbnb.
  • 12. Le prix Le titre La description La note Le nombre de commentaires Le visuel L’assemblage du visuel, du prix, du titre, de la description, de la note et du nombre de commentaires donne la molécule « Aperçu de logement ». L’assemblage de plusieurs molécules d’aperçu donne la liste de logements. Avec une molécule de spécifications de recherche, elles composent l’organisme « Résultats de recherche » du site. Les atomes La
 molécule L’
 organisme 12
  • 13. 13 Les
 templates Ces templates ont été imaginés à partir de la page « Logements » d’Airbnb dans une démarche Atomic Design. Header Moteur de recherche Compte Menu Filtres de recherche Aperçu de logement Aperçu de logement Aperçu de logement Aperçu de logement Recherche par carte Tab bar Moteur de recherche Menu Aperçu 
 de logement Aperçu 
 de logement Aperçu 
 de logement Aperçu 
 de logement Filtres / Carte Moteur de recherche Menu Tab bar Aperçu 
 de logement Filtres / Carte Next: les écrans découlants de ces templates VERSION WEB DESKTOP APP IPAD APP IPHONE
  • 14. Les organismes s’insèrent directement dans les templates et créent ainsi des écrans adaptés à chaque device ! 14 Les
 écrans VERSION WEB DESKTOP APP IPAD APP IPHONE
  • 15. II
 LES AVANTAGES DE L’ATOMIC DESIGN
  • 16. Aujourd’hui, sans Atomic Design, on arrive quand même à produire des designs
 de qualité. Alors…
 POURQUOI METTRE EN PLACE 
 UN NOUVEAU SYSTÈME, QUI VA RIGIDIFIER 
 NOTRE WORKFLOW ? 16
  • 17. 17 Les
 avantages
 de
 l’Atomic
 Design Une vraie COHÉRENCE Une facilité DE MISE À JOUR Une librairie CENTRALISÉE Partager le même VOCABULAIRE Une meilleure COMPRÉHENSION L’atomic design permet de mettre en place les bases d’une seule librairie contenant tous les designs utilisés au sein du site. Plus de perte de temps à rechercher un élément parmi des dizaines de supports différents ! Ce système modulable permet de faire converger l’ensemble des objets graphiques existants. On part des atomes pour créer de nouvelles molécules qui seront communs à l’ensemble des pages. En retournant à l’échelle d’un atome ou d’une molécule, on peut simultanément mettre à jour l’ensemble des écrans et ainsi gagner en temps et en productivité. (+A/B Testing) Finis les problèmes d’incompréhension lors de la mise à jour des éléments graphiques. On utilise le même vocabulaire pour désigner les mêmes éléments à tout moment et au sein de toutes les équipes. Un système qui permet aux équipes de mieux collaborer et de faciliter la jonction entre design (UX + UI) et développement.
  • 18. L’ATOMIC DESIGN PERMET UN GAIN 
 DE TEMPS ET 
 UNE MEILLEURE COHÉRENCE En bref… 18
  • 20. Débuter en Atomic Design 20 Comment mettre en place les bases d’un système atomique
 en partant de rien ?
 Comment penser les objets graphiques seuls, qui devront avoir une cohérence une fois assemblés ?
  • 21. Il est nécessaire de commencer par définir les atomes de base qui correspondent aux éléments essentiels et forts de l’identité de marque et de la charte graphique. Débuter en Atomic Design 21 1ère étape : Définir les atomes de base Helvetica HELVETICA 
 CAPS BOLD 10% TypographieCouleur #42C29F #084F6A
  • 22. Débuter en Atomic Design 22 La première chose à faire est d’établir un cadre afin de ne pas concevoir des éléments graphiques sans but et qui ne sont rattachés à rien. Pour cela, il faut identifier les besoins et actions de l’utilisateur afin de lister et hiérarchiser par ordre d’importance les fonctionnalités et les différents parcours que devra avoir le site web ou l’application. 2ème étape : Lister les fonctionnalités et parcours clés Fonctionnalités 
 clés Fonctionnalités 
 d’importance modérée Fonctionnalités annexes Par exemple, si notre site web est un site e-commerce d’une marque de prêt-à- porter, il faudra concevoir des éléments constituants un panier d’achat, une fiche produit, un moteur de recherche… etc. Coeur du site, 
 ce pour quoi il existe
  • 23. Le designer va ensuite concevoir les premiers composants répondant aux besoins définis dans l’étape préalable. Il commence par le coeur du site (ou de l’app) et va faire des allers-retours entre les composants déjà créés et les fonctionnalités qui suivent, au fur et à mesure que la conception du site (ou de l’app) avance. Cela va permettre de créer de nouveaux éléments mais également de faire évoluer ceux qui existent déjà. Débuter en Atomic Design 23 Et ensuite… On commence à concevoir les composants répondant au coeur du site internet. Pour réaliser les composants des fonctionnalités clés, on se sert de ceux conçus pour le coeur du site qui pourront également être améliorés. Etc. Jusqu’aux fonctionnalités annexes…
  • 24. Passer en Atomic Design 24 Comment, à partir d’un site existant, mettre en place les bases d’un système atomique ? 
 Comment éviter les redondances graphiques et regagner en cohérence ?
  • 25. - Éléments globaux (headers, footer, …) - Navigation (navigation primaire, fil d’Ariane, …) - Images (Logos, avatars, vignettes …) - Icônes - Formulaires (radio buttons, checkboxes, sliders, …) - Boutons, blocs - Listes (ordonnées, non-ordonnées, …) - Médias (players vidéo / audio…) - Third-party components (widgets, iframes, …) - Publicités - Couleurs - Animations Passer en Atomic Design 25 Référencer l’ensemble des objets graphiques qui cohabitent au sein du site (ou de l’app) existant : 1ère étape : Réaliser l’inventaire du site
  • 26. < Passer en Atomic Design 26 Il s’agit de réunir les équipes concernées (UX, Design, Développement) et de se poser les bonnes questions pour mettre en place la base de travail : À quoi sert chaque objet et dans quel contexte est-il utilisé ? Quels objets doit-on garder, lesquels pouvons-nous supprimer ? Lesquels peuvent être fusionnés ? Comment nommer chaque élément ? L’idée n’est cependant pas de figer les noms et groupes choisis à ce moment là, car ils pourront être retravaillés par la suite. Comment catégoriser les objets ? Comment traduire cela dans une librairie centralisée ? Quel type de librairie utiliser ? Et donc… 2ème étape : Définir le scope de la future librairie
  • 27. Lesoutils du Designer 27 Après avoir initié la mise en place du système, quels outils utiliser pour concevoir les composants ?
  • 28. Le plugin Craft ajouté au logiciel de création Sketch permet de donner l’accès à une librairie centralisée online. Un designer peut ainsi sur plusieurs fichiers différents récupérer des éléments et les mettre à jour instantanément sur les différents écrans les contenant. Il peut donc inclure des éléments au sein d’autres éléments et ainsi reprendre les concepts d’atomes, de molécules et d’organismes, et les partager avec d’autres fichiers et d’autres designers. Cependant, la librairie centralisée doit être réalisée au préalable. Sketch + Craft 28 *L’utilisationdeslogicielsSketchet Craftestunesolutionparmiplusieurs. Ils’agitdecelleutiliséeparnotre agence,maislibreàchacundechoisir sonorganisation. Designer A D CB Sketch Éléments graphiquesproduits parledesigner grâceàsketchsont insérésdansCraft A CB D Craft A C B D E F G A C B D E F G Craftdonne accèsentemps réelaux élémentsàtous lesautres designers A D CB A G E EE C D E D
  • 30. ‘ ’ 30 Cette méthode est née suite aux mutations engendrées par le web (démultiplication des écrans et typologies de contenu) et utilise le web pour nous permettre de mieux travailler à distance, de manière synchronisée (cloud), en équipes fragmentées. Solange DERREY Directrice du pôle Trendwatchers USERADGENTS
  • 31. La librairie se présente sous la forme d’un site internet ou intranet, un document, une plateforme… qui soit centralisé(e), facilement accessible par l’ensemble des acteurs de l’entreprise (développeurs, designers, marketing, …) et facile à mettre à jour ! Une librairie de design n’est pas un artefact statique, mais un organisme vivant qui va être modifié et évoluer avec le temps. La forme dela librairie 31 A C B D E F G Exempledelibrairie:
 PatternLab
  • 32. Etant donné le statut évolutif, partagé et collaboratif de la librairie, il est important de définir les rôles de chacune des parties prenantes. Nous pouvons observer deux types de rôle : L’orga- nisation de la librairie 32 Ils font et maintiennent à jour la librairie. Les designers « Makers » réalisent et mettent à jour les éléments graphiques. 
 Les développeurs « Makers » conçoivent et mettent à jour le code associé à chaque élément. Ils utilisent les éléments de la librairie. Les designers « Users » réalisent les pages complètes du site ou de l’app. 
 Les développeurs « Users » réalisent la totalité du code du site ou de l’app. Les Makers Les Users
  • 33. 33 L’orga- nisation de la librairie Existe déjà L’élément remplit-il tous mes critères ? Est-ce qu’il peut être amélioré pour répondre aux nouveaux critères et toujours satisfaire les anciens ? OuiNon Un élément similaire existe-t-il ? Prototype l’élément. Peut-il être réutilisé dans un autre composant ? Peux-tu le rendre plus générique ? Oui N’existe pas Fais une proposition et ajoute le ! Non Oui Oui Etc.. Non Non Non Oui Ajoute l’élément à la librairie ! ÉLÉMENT LAMBDA Les gestionnaires de la librairie, les « Makers », doivent mette en place des process de gestion. Par exemple, le schéma à droite montre quel est le processus lorsqu’un user / maker a besoin d’un élément. Mais… Toutes les entreprises sont structurées différemment. Chaque entreprise doit donc développer son propre modèle d’organisation pour au mieux gérer l’évolution de la librairie.
  • 34. ‘ ’34 Adopter le design atomique, c’est s’attacher à la définition même du design : ce sont les petits détails qui font les grandes idées. Il en est de même pour l’équipe. Nous, atomes, sommes tous acteurs de la cohérence, la pérennité d’un projet à plus grande échelle. Plus qu’une méthode, le design a trouvé un langage, accessible et utilisable par tous. 
 Et quand on parle la même langue, il en devient plus facile de s’organiser, échanger, partager et donc, être créatif. Alexandre PASCUAL Directeur du Design USERADGENTS
  • 35. Il n’y a pas de recette magique car toutes les entreprises sont structurées différemment. L’Atomic Design peut s’adapter à chaque entreprise et à chaque projet. Dans le but de toujours gagner en temps et en cohérence… Pour conclure… 35
  • 36. VOUS SOUHAITEZ LANCER UN PROJET EN ATOMIC DESIGN ? Rencontrons-nous ! userADgents est spécialisée dans la conception, le développement et la promotion de sites et d’applications pour smartphones, tablettes et objets connectés.
  • 37. userADgents Raphaël Drion UX Designer r.drion@useradgents.com Lucile Moreno Chargée de communication l.moreno@useradgents.com É T U D E R É A L I S É E P A R T R E N D W A T C H E R S Le pôle études digitales et formations de userADgents JE M’INSCRIS À LA NEWS JE FOLLOW SUR TWITTER Et pour ne rien manquer des prochaines études ! www.useradgents.com
  • 38. USERADGENTS & JOSHFIRE AGENCE DIGITALE MOBILE FIRST USER CENTRIC AGENCE CONSEIL EN INNOVATION userADgents est spécialisée dans la conception, le développement et la promotion de sites et d’applications pour smartphones, tablettes et objets connectés. Joshfire, une équipe de designers et d’ingénieurs qui conçoivent de A à Z des objets connectés et des expériences interactives sur mesure.
  • 39. userADgents FABRIQUE 
 DE DISPOSITIFS 
 DIGITAUXINNOVANTS COMPLÉMENTAIRES DEUXAGENCES Hier l’enjeu était de s’adapter au web mobile, aujourd’hui & demain il sera d’embrasser ce nouveau monde ultra connecté où terminaux mobiles & objets communiquent.  Notre complémentarité nous permet d’imaginer des expériences transversales à ces dispositifs et de répondre aux nouvelles problématiques des marques. 1 ÈRE 1 FORMANTÀELLESDEUXLA: USERADGENTS & JOSHFIRE
  • 40. …DU CONSEIL À LA COMMERCIALISATION… Analyse comportementale Ateliers d’idéation Recherche de concepts innovants User journey Ergonomie Tests utilisateurs Ateliers de co-création Design des interfaces Design industriel Objets connectés Applications natives (iOS/Android/Windows) Responsive & Adaptive Design Back-end & APIs Arduino / Raspberry Pi Réalité virtuelle Chat bots Publicité mobile Couponing SMS/Push Notif App Store Optimization Mobile-to-store Interactions in-store Beacons Vidéo Etudes fonctionnelles Prototypages Spécifications Suivi d’industrialisation & de production Etude de tendances Audit de marque Benchmarks Accompagnement stratégique Recherche & Innovation DESIGN PROMOTION CRM UX / IDÉATION DÉVELOPPEMENT PROTOTYPAGE & INDUSTRIALISATION CONSEIL
  • 41. userADgents SOYEZ UTILES
 & COHÉRENTS CULTIVEZ VOTRE DIFFÉRENCE Le digital et vos clients sont en constante mouvance ! Nous aimons faire bouger les choses et secouer les esprits pour sortir des idées reçues et se challenger constamment. SENS EFFERVESCENCE ESSENCE Dans un environnement de plus en plus concurrentiel et un contexte de surexposition des consommateurs, chaque marque doit cultiver sa différence et revendiquer son ADN et ses valeurs. Nous pensons que le digital ne doit pas être gadget ! Nous voulons créer des dispositifs qui ont du sens pour vos clients. OUVREZ GRAND 
 LES YEUX …ANIMÉES PAR UNE VISION COMMUNE !