SlideShare a Scribd company logo

MobiliTeaTime #14 : L'Atomic Design

De plus en plus, les interfaces tendent à sortir de l'ordinaire écran pour aller vers des formats aussi dynamiques qu'inattendus. Face à ce monde où tout objet peut devenir "écran", il est nécessaire de repenser les méthodologies de design pour favoriser cohérence, rapidité et créativité ! Découvrez notre guide pratique sur l'Atomic Design, une méthode métaphorique bien que concrète au service des designers !

1 of 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

Recommended

MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design USERADGENTS
 
MobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVMobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVUSERADGENTS
 
Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systè...
Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systè...Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systè...
Flupa UX Days 2017 : "ATOMIC DESIGN: Fini le design par écran, vive les systè...Flupa
 
Mobiliteatime #2 - WatchKit, le framework de développement pour l’Apple Watch
Mobiliteatime #2 - WatchKit, le framework de développement pour l’Apple WatchMobiliteatime #2 - WatchKit, le framework de développement pour l’Apple Watch
Mobiliteatime #2 - WatchKit, le framework de développement pour l’Apple WatchUSERADGENTS
 
Les bases du responsive design
Les bases du responsive designLes bases du responsive design
Les bases du responsive designVoyelle Voyelle
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Vincent Pereira
 
Introduction au Responsive web design
Introduction au Responsive web designIntroduction au Responsive web design
Introduction au Responsive web designDagobert
 

More Related Content

What's hot

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
 

What's hot (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
 

Similar to 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
 

Similar to 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
 

More from 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
 
Résumé de la keynote Apple du 9 septembre by userADgents
Résumé de la keynote Apple du 9 septembre by userADgentsRésumé de la keynote Apple du 9 septembre by userADgents
Résumé de la keynote Apple du 9 septembre by userADgentsUSERADGENTS
 

More from USERADGENTS (20)

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...
 
Résumé de la keynote Apple du 9 septembre by userADgents
Résumé de la keynote Apple du 9 septembre by userADgentsRésumé de la keynote Apple du 9 septembre by userADgents
Résumé de la keynote Apple du 9 septembre by userADgents
 

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 !