atomic design & styleguide

58
Atomic Design & Styleguide Une pratique Atomic Minded Crédit: Relais & Châteaux

Upload: laurent-guitton

Post on 21-Apr-2017

539 views

Category:

Presentations & Public Speaking


2 download

TRANSCRIPT

Page 1: Atomic Design & Styleguide

Atomic Design& Styleguide

Une pratique Atomic Minded

Crédit: Relais & Châteaux

Page 2: Atomic Design & Styleguide

Une méthode, une bonne pratique

Atomic design

Page 3: Atomic Design & Styleguide

Atomic design

molecule

organism template

page

Illustrations issues de http://patternlab.ioCrédit : Brad Frost

atom

Page 4: Atomic Design & Styleguide

Atomic design

atom

Page 5: Atomic Design & Styleguide

Atomic design

atom

Page 6: Atomic Design & Styleguide

Atomic design

molecule

Page 7: Atomic Design & Styleguide

Atomic design

organism

Page 8: Atomic Design & Styleguide

Atomic design

template

Page 9: Atomic Design & Styleguide

Atomic design

page

Page 10: Atomic Design & Styleguide

Atomic design

atom

Page 11: Atomic Design & Styleguide

Atomic design

molecule

Page 12: Atomic Design & Styleguide

Atomic design

organism

Page 13: Atomic Design & Styleguide

Atomic design

template

Page 14: Atomic Design & Styleguide

Atomic design

page

Page 15: Atomic Design & Styleguide

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/

Page 16: Atomic Design & Styleguide

Un outil en mode projet

Styleguide

Page 17: Atomic Design & Styleguide

Styleguide Et ce n’est pas…

Page 18: Atomic Design & Styleguide

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

Page 19: Atomic Design & Styleguide

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

Page 20: Atomic Design & Styleguide

DéveloppementIntégration

Styleguide Un outil en commun

UX design& maquettes

Spécifications fonctionnelles

Page 21: Atomic Design & Styleguide

Styleguide D’un existant graphique…

Page 22: Atomic Design & Styleguide

Styleguide … à un bundle Symfony

Page 23: Atomic Design & Styleguide

Quand le mettre en place ?

Styleguide

Page 24: Atomic Design & 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

Page 25: Atomic Design & Styleguide

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

Page 26: Atomic Design & Styleguide

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

Page 27: Atomic Design & Styleguide

Conception UX& design

graphique

Intégration& styleguide

Développement

Styleguide Atomic Minded ?

Page 28: Atomic Design & Styleguide

Quelques exemplessupplémentaires de styleguides en ligne *

Styleguide

* "Nous ne sommes pas seuls…"

Page 29: Atomic Design & Styleguide

Styleguide Code For America

http://codeforamerica.clearleft.com/

Page 30: Atomic Design & Styleguide

Styleguide EdX

http://ux.edx.org/

Page 31: Atomic Design & Styleguide

Styleguide CMS.gov

http://assets.cms.gov/

Page 32: Atomic Design & Styleguide

Styleguide homify

https://www.homify.de/assets/styleguide.html

Page 33: Atomic Design & Styleguide

Styleguide Salesforce

https://www.lightningdesignsystem.com/

Page 34: Atomic Design & Styleguide

Styleguide MailChimp

http://ux.mailchimp.com

Page 35: Atomic Design & Styleguide

Styleguide Lonely Planet

http://rizzo.lonelyplanet.com/styleguide

Page 36: Atomic Design & Styleguide

Ça donne quoien pratique chez C2iS ?

Styleguide

Page 37: Atomic Design & Styleguide

Identité

Styleguide

Interface UI Documentation

Page 38: Atomic Design & Styleguide

Styleguide

Page 39: Atomic Design & Styleguide

Styleguide

Page 40: Atomic Design & Styleguide

Styleguide

Page 41: Atomic Design & Styleguide

Identité

Styleguide

Interface UI Documentation

Page 42: Atomic Design & Styleguide

Styleguide

Page 43: Atomic Design & Styleguide

Styleguide

Page 44: Atomic Design & Styleguide

Styleguide

Page 45: Atomic Design & Styleguide

Styleguide

Page 46: Atomic Design & Styleguide

Styleguide

Page 47: Atomic Design & Styleguide

Styleguide

Page 48: Atomic Design & Styleguide

Identité

Styleguide

Interface UI Documentation

Page 49: Atomic Design & Styleguide

Styleguide

Page 50: Atomic Design & Styleguide

Styleguide

Page 51: Atomic Design & Styleguide

Styleguide

Page 52: Atomic Design & Styleguide

Pour quels résultatschez C2iS ?

Atomic Design & Styleguide

Page 53: Atomic Design & Styleguide

Atomic Design & Styleguide Résultats

Une cohérence design/UX/UI pérenne

Page 54: Atomic Design & Styleguide

Atomic Design & Styleguide Résultats

Une cohérence design/UX/UI pérenne

Une amélioration de la production

Page 55: Atomic Design & Styleguide

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

Page 56: Atomic Design & Styleguide

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

Page 57: Atomic Design & Styleguide

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

Page 58: Atomic Design & Styleguide

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