SlideShare une entreprise Scribd logo
@DavidEndico
Love, modular
thinking and
Storybook
C O N F É R E N C E
1
G R A P H I C D E S I G N E R ᆞ U I / U X D E S I G N E R ᆞ F R O N T D E V E L O P E R
David Endico
@DavidEndico 2
Les graines de la discorde
C O N T E X T E
@DavidEndico 3
L E S G R A I N E S D E L A D I S C O R D E
@DavidEndico 4
Beaucoup
de projets
��
Beaucoup de
méconnaissance
��
Beaucoup
de Personnes
��
Beaucoup de Projets
● Beaucoup de composants et de logiques malgré des
librairies et frameworks
● Don’t make me code twice - Pas mal de composants
recréés ou pouvant être mutualisés
@DavidEndico 5
L E S G R A I N E S D E L A D I S C O R D E
��
Beaucoup de personnes
● Manque de visibilité sur les composants disponibles
(composants existants, recréés ou à développer)
● Manque de communication sur l’utilité,
le fonctionnement et la portée des composants
@DavidEndico 6
L E S G R A I N E S D E L A D I S C O R D E
��
Beaucoup de méconnaissance
● Mauvaise connaissance et usages des outils
disponibles (langages, librairies…)
● Manque de recul sur les composants créés
(incomplets, limités ou non-testés)
@DavidEndico 7
L E S G R A I N E S D E L A D I S C O R D E
��
@DavidEndico 8
🤔
@DavidEndico 9
Modular Thinking
R É F L E X I O N S
@DavidEndico 10
C’est découper des trucs
compliqués pour en faire de
petits trucs simples
E N G R O S
@DavidEndico 11
@DavidEndico 12
Atomic Design
@DavidEndico 13
Atomic Design
From dust to development
P R O C E S S
@DavidEndico 14
COMMUNICATION
@DavidEndico 15
● Travail de co-conception
(Développeurs, designers,
clients, qu’importe !)
● Partager les informations
clés : besoins, cibles et
contextes
● Tout le monde est
UX Designer
MAQUETTES
@DavidEndico 16
● Traduire visuellement les
origines du projet
● Ce sont des abstractions !
● Réfléchir aux
composants, leurs
portées, leurs états
● Définir les langages,
frameworks et librairies
STYLEGUIDE
@DavidEndico 17
● Lister les composants et
leurs variantes
● Définir les usages et les
contextes d’utilisations
● Réfléchir à la structure
des composants, à leur
complexité et à leur
intégration
Et pourquoi pas un Design System ?
P R O C E S S
@DavidEndico 18
DESIGN SYSTEM
@DavidEndico 19
● Bibliothèque de
composants centralisant
l’information
● Référentiel UI, UX
et technique
● Effet bac à sable
M O D U L A R T H I N K I N G
@DavidEndico 20
La recette d’un bon composant
SIMPLE
�� ♻
RÉUTILISABLE EXPLICITE
��
Raise your weapon
S O L U T I O N
@DavidEndico 21
R A I S E Y O U R W E A P O N
STORYBOOK
@DavidEndico 22
R A I S E Y O U R W E A P O N
STORYBOOK
● Complémentaire de l’application
● Disponible pour Angular, React, Vue,
ReactNative, Polymer...
● Archi-simple et rapide
● Adaptable à tous vos besoins et process
● Simplifie le workflow de développement
● Addons et communauté
@DavidEndico 23
@DavidEndico 24
@DavidEndico 25
Live coding
@DavidEndico 26
@DavidEndico 27
@DavidEndico 28
@DavidEndico 29
@DavidEndico 30
● Apporte consistance et homogénéité au
travers de toute l’application
● Simplifie et accélère le workflow de
conception et de mise en place
● Plébiscite une conception plus
collaborative entre les membres du projet
● Établit un vocabulaire commun entre tous
les développeurs, anciens comme
nouveaux
● Apporte un support de documentation et d’
éducation au reste de l’équipe
● Permet des tests plus simples (browsers,
devices, performances, accessibilité…)
CONCLUSION
@DavidEndico 31
Thank you
A N Y Q U E S T I O N S ?
@DavidEndico 32

Contenu connexe

Similaire à Love, Modular Thinking and Storybook

Serge Agostinelli
Serge AgostinelliSerge Agostinelli
Serge Agostinelliomsrp
 
OpenSource & InnerSource pour accélérer les développements
OpenSource & InnerSource pour accélérer les développementsOpenSource & InnerSource pour accélérer les développements
OpenSource & InnerSource pour accélérer les développements
François
 
Livre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-sourceLivre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-source
Rubedo, a WebTales solution
 
2022-11-22 - November Rain
2022-11-22 - November Rain2022-11-22 - November Rain
2022-11-22 - November Rain
Frederic Leger
 
Des jeux et des devops
Des jeux et des devopsDes jeux et des devops
Des jeux et des devops
Frederic Leger
 
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
Loïc Vanderschooten
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
Marc Wabnitz
 
Pourquoi devenir développeur - by Joane SETANGNI
Pourquoi devenir développeur - by Joane SETANGNIPourquoi devenir développeur - by Joane SETANGNI
Pourquoi devenir développeur - by Joane SETANGNI
Joane SETANGNI
 
Des conférences à voir et à revoir
Des conférences à voir et à revoirDes conférences à voir et à revoir
Des conférences à voir et à revoir
Anthony Maison
 
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD - Actency ...
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD -   Actency ...Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD -   Actency ...
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD - Actency ...
Actency
 
Le gameday...un concept devopsludique
Le gameday...un concept devopsludiqueLe gameday...un concept devopsludique
Le gameday...un concept devopsludique
EspritAgile
 
Catopsys - Une startup agile et lean
Catopsys - Une startup agile et lean Catopsys - Une startup agile et lean
Catopsys - Une startup agile et lean
Daniel Duhautbout
 
Scikit Learn: Développement communautaire
Scikit Learn: Développement communautaireScikit Learn: Développement communautaire
Scikit Learn: Développement communautaire
Gael Varoquaux
 
Drupagora 2012 - Améliorations ergonomiques pour les contributeurs dans Drupal
Drupagora 2012 - Améliorations ergonomiques pour les contributeurs dans DrupalDrupagora 2012 - Améliorations ergonomiques pour les contributeurs dans Drupal
Drupagora 2012 - Améliorations ergonomiques pour les contributeurs dans Drupal
Olivier Friesse
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et web
NovUp
 
Faire la conception en équipe sans architecte, non mais allô quoi ?
Faire la conception en équipe sans architecte, non mais allô quoi ?Faire la conception en équipe sans architecte, non mais allô quoi ?
Faire la conception en équipe sans architecte, non mais allô quoi ?
Ly-Jia Goldstein
 
XebiCon'16 : Europ Assistance - Un grand groupe peut-il construire une market...
XebiCon'16 : Europ Assistance - Un grand groupe peut-il construire une market...XebiCon'16 : Europ Assistance - Un grand groupe peut-il construire une market...
XebiCon'16 : Europ Assistance - Un grand groupe peut-il construire une market...
Publicis Sapient Engineering
 
Design & gouvernance API
Design & gouvernance API Design & gouvernance API
Design & gouvernance API
romain73
 
Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !
pprem
 
Guide d’activités technocréatives pour les enfants du 21e siècle (Romero & Va...
Guide d’activités technocréatives pour les enfants du 21e siècle (Romero & Va...Guide d’activités technocréatives pour les enfants du 21e siècle (Romero & Va...
Guide d’activités technocréatives pour les enfants du 21e siècle (Romero & Va...
Margarida Romero
 

Similaire à Love, Modular Thinking and Storybook (20)

Serge Agostinelli
Serge AgostinelliSerge Agostinelli
Serge Agostinelli
 
OpenSource & InnerSource pour accélérer les développements
OpenSource & InnerSource pour accélérer les développementsOpenSource & InnerSource pour accélérer les développements
OpenSource & InnerSource pour accélérer les développements
 
Livre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-sourceLivre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-source
 
2022-11-22 - November Rain
2022-11-22 - November Rain2022-11-22 - November Rain
2022-11-22 - November Rain
 
Des jeux et des devops
Des jeux et des devopsDes jeux et des devops
Des jeux et des devops
 
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
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
 
Pourquoi devenir développeur - by Joane SETANGNI
Pourquoi devenir développeur - by Joane SETANGNIPourquoi devenir développeur - by Joane SETANGNI
Pourquoi devenir développeur - by Joane SETANGNI
 
Des conférences à voir et à revoir
Des conférences à voir et à revoirDes conférences à voir et à revoir
Des conférences à voir et à revoir
 
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD - Actency ...
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD -   Actency ...Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD -   Actency ...
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD - Actency ...
 
Le gameday...un concept devopsludique
Le gameday...un concept devopsludiqueLe gameday...un concept devopsludique
Le gameday...un concept devopsludique
 
Catopsys - Une startup agile et lean
Catopsys - Une startup agile et lean Catopsys - Une startup agile et lean
Catopsys - Une startup agile et lean
 
Scikit Learn: Développement communautaire
Scikit Learn: Développement communautaireScikit Learn: Développement communautaire
Scikit Learn: Développement communautaire
 
Drupagora 2012 - Améliorations ergonomiques pour les contributeurs dans Drupal
Drupagora 2012 - Améliorations ergonomiques pour les contributeurs dans DrupalDrupagora 2012 - Améliorations ergonomiques pour les contributeurs dans Drupal
Drupagora 2012 - Améliorations ergonomiques pour les contributeurs dans Drupal
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et web
 
Faire la conception en équipe sans architecte, non mais allô quoi ?
Faire la conception en équipe sans architecte, non mais allô quoi ?Faire la conception en équipe sans architecte, non mais allô quoi ?
Faire la conception en équipe sans architecte, non mais allô quoi ?
 
XebiCon'16 : Europ Assistance - Un grand groupe peut-il construire une market...
XebiCon'16 : Europ Assistance - Un grand groupe peut-il construire une market...XebiCon'16 : Europ Assistance - Un grand groupe peut-il construire une market...
XebiCon'16 : Europ Assistance - Un grand groupe peut-il construire une market...
 
Design & gouvernance API
Design & gouvernance API Design & gouvernance API
Design & gouvernance API
 
Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !
 
Guide d’activités technocréatives pour les enfants du 21e siècle (Romero & Va...
Guide d’activités technocréatives pour les enfants du 21e siècle (Romero & Va...Guide d’activités technocréatives pour les enfants du 21e siècle (Romero & Va...
Guide d’activités technocréatives pour les enfants du 21e siècle (Romero & Va...
 

Love, Modular Thinking and Storybook

  • 2. G R A P H I C D E S I G N E R ᆞ U I / U X D E S I G N E R ᆞ F R O N T D E V E L O P E R David Endico @DavidEndico 2
  • 3. Les graines de la discorde C O N T E X T E @DavidEndico 3
  • 4. L E S G R A I N E S D E L A D I S C O R D E @DavidEndico 4 Beaucoup de projets �� Beaucoup de méconnaissance �� Beaucoup de Personnes ��
  • 5. Beaucoup de Projets ● Beaucoup de composants et de logiques malgré des librairies et frameworks ● Don’t make me code twice - Pas mal de composants recréés ou pouvant être mutualisés @DavidEndico 5 L E S G R A I N E S D E L A D I S C O R D E ��
  • 6. Beaucoup de personnes ● Manque de visibilité sur les composants disponibles (composants existants, recréés ou à développer) ● Manque de communication sur l’utilité, le fonctionnement et la portée des composants @DavidEndico 6 L E S G R A I N E S D E L A D I S C O R D E ��
  • 7. Beaucoup de méconnaissance ● Mauvaise connaissance et usages des outils disponibles (langages, librairies…) ● Manque de recul sur les composants créés (incomplets, limités ou non-testés) @DavidEndico 7 L E S G R A I N E S D E L A D I S C O R D E ��
  • 10. Modular Thinking R É F L E X I O N S @DavidEndico 10
  • 11. C’est découper des trucs compliqués pour en faire de petits trucs simples E N G R O S @DavidEndico 11
  • 14. From dust to development P R O C E S S @DavidEndico 14
  • 15. COMMUNICATION @DavidEndico 15 ● Travail de co-conception (Développeurs, designers, clients, qu’importe !) ● Partager les informations clés : besoins, cibles et contextes ● Tout le monde est UX Designer
  • 16. MAQUETTES @DavidEndico 16 ● Traduire visuellement les origines du projet ● Ce sont des abstractions ! ● Réfléchir aux composants, leurs portées, leurs états ● Définir les langages, frameworks et librairies
  • 17. STYLEGUIDE @DavidEndico 17 ● Lister les composants et leurs variantes ● Définir les usages et les contextes d’utilisations ● Réfléchir à la structure des composants, à leur complexité et à leur intégration
  • 18. Et pourquoi pas un Design System ? P R O C E S S @DavidEndico 18
  • 19. DESIGN SYSTEM @DavidEndico 19 ● Bibliothèque de composants centralisant l’information ● Référentiel UI, UX et technique ● Effet bac à sable
  • 20. M O D U L A R T H I N K I N G @DavidEndico 20 La recette d’un bon composant SIMPLE �� ♻ RÉUTILISABLE EXPLICITE ��
  • 21. Raise your weapon S O L U T I O N @DavidEndico 21
  • 22. R A I S E Y O U R W E A P O N STORYBOOK @DavidEndico 22
  • 23. R A I S E Y O U R W E A P O N STORYBOOK ● Complémentaire de l’application ● Disponible pour Angular, React, Vue, ReactNative, Polymer... ● Archi-simple et rapide ● Adaptable à tous vos besoins et process ● Simplifie le workflow de développement ● Addons et communauté @DavidEndico 23
  • 31. ● Apporte consistance et homogénéité au travers de toute l’application ● Simplifie et accélère le workflow de conception et de mise en place ● Plébiscite une conception plus collaborative entre les membres du projet ● Établit un vocabulaire commun entre tous les développeurs, anciens comme nouveaux ● Apporte un support de documentation et d’ éducation au reste de l’équipe ● Permet des tests plus simples (browsers, devices, performances, accessibilité…) CONCLUSION @DavidEndico 31
  • 32. Thank you A N Y Q U E S T I O N S ? @DavidEndico 32