atomic design & styleguide

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