atomic design & styleguide
TRANSCRIPT
Atomic Design& Styleguide
Une pratique Atomic Minded
Crédit: Relais & Châteaux
Une méthode, une bonne pratique
Atomic design
Atomic design
molecule
organism template
page
Illustrations issues de http://patternlab.ioCrédit : Brad Frost
atom
Atomic design
atom
Atomic design
atom
Atomic design
molecule
Atomic design
organism
Atomic design
template
Atomic design
page
Atomic design
atom
Atomic design
molecule
Atomic design
organism
Atomic design
template
Atomic design
page
Atomic design
Liste des features
Créationdes composants
Codagedes composants
Assemblagedes composants
Illustration : Adriana De La Cuadra - http://blog.bitovi.com/style-guide-driven-development/
Un outil en mode projet
Styleguide
Styleguide Et ce n’est pas…
Styleguide Définition
• un styleguide documente le langage visuel
• un styleguide est un document évolutif
• un styleguide est un endroit unique pour toute l’équipe
Susan Robertson – Avril 2014http://alistapart.com/article/creating-style-guides
Styleguide … in other words
INTERFACE STYLE GUIDE
MODULAR DESIGN SYSTEM
STYLEGUIDE DRIVEN DEVELOPMENT
LIVING STYLE GUIDE
PRODUCT DESIGN UNIFICATION
UI STYLE GUIDEVISUAL STYLE GUIDE
PATTERN LIBRARY
PATTERN PRIMER
WEB-BASED STYLE GUIDE
DéveloppementIntégration
Styleguide Un outil en commun
UX design& maquettes
Spécifications fonctionnelles
Styleguide D’un existant graphique…
Styleguide … à un bundle Symfony
Quand le mettre en place ?
Styleguide
Design & Développemen
tMise en
production Styleguide
Styleguide "The Sidelines"
Concepts issus de https://css-tricks.com/where-style-guides-fit-into-processCrédit : Chris Coyier
Design & Développemen
tMise en
production Styleguide
Styleguide "The Exhaust"
Concepts issus de https://css-tricks.com/where-style-guides-fit-into-processCrédit : Chris Coyier
Design & Développemen
tStyleguide Mise en
production
Styleguide "The Dictator"
Concepts issus de https://css-tricks.com/where-style-guides-fit-into-processCrédit : Chris Coyier
Conception UX& design
graphique
Intégration& styleguide
Développement
Styleguide Atomic Minded ?
Quelques exemplessupplémentaires de styleguides en ligne *
Styleguide
* "Nous ne sommes pas seuls…"
Styleguide Code For America
http://codeforamerica.clearleft.com/
Styleguide EdX
http://ux.edx.org/
Styleguide CMS.gov
http://assets.cms.gov/
Styleguide homify
https://www.homify.de/assets/styleguide.html
Styleguide Salesforce
https://www.lightningdesignsystem.com/
Styleguide MailChimp
http://ux.mailchimp.com
Styleguide Lonely Planet
http://rizzo.lonelyplanet.com/styleguide
Ça donne quoien pratique chez C2iS ?
Styleguide
Identité
Styleguide
Interface UI Documentation
Styleguide
Styleguide
Styleguide
Identité
Styleguide
Interface UI Documentation
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Identité
Styleguide
Interface UI Documentation
Styleguide
Styleguide
Styleguide
Pour quels résultatschez C2iS ?
Atomic Design & Styleguide
Atomic Design & Styleguide Résultats
Une cohérence design/UX/UI pérenne
Atomic Design & Styleguide Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Atomic Design & Styleguide Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur workflow entre les équipes
Atomic Design & Styleguide Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur workflow entre les équipes
Une meilleure communication et un vocabulaire commun
Atomic Design & Styleguide Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur workflow entre les équipes
Une meilleure communication et un vocabulaire commun
Une facilité de test tout au long du projet
Atomic Design & Styleguide Résultats
Une cohérence design/UX/UI pérenne
Une amélioration de la production
Un meilleur workflow entre les équipes
Une meilleure communication et un vocabulaire commun
Une facilité de test tout au long du projet
Un guide de référence, une pierre angulaire