Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design system
Search
Maxime Frere
November 08, 2018
Design
2
870
Design system
Maxime Frere
November 08, 2018
Tweet
Share
Other Decks in Design
See All in Design
アクセシビリティに取り組むメリット
magi1125
2
240
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
280
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
170
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
7 Core Values of Round-L
wired888
0
1.5k
Saudade typeface
tiagoporto
0
340
デザイナー向けフライル説明資料
toshiblues
0
110
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
930
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
780
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
650
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
440
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Typedesign – Prime Four
hannesfritz
42
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
4 Signs Your Business is Dying
shpigford
184
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Why Our Code Smells
bkeepers
PRO
339
57k
For a Future-Friendly Web
brad_frost
179
9.9k
How to Ace a Technical Interview
jacobian
279
23k
How GitHub (no longer) Works
holman
315
140k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Transcript
Design System Maxime Frere - 25 novembre 2018
Qui suis-je ? Product & UX Designer Creative Studio -
Capgemini Vice Président Flupa Partie de l’équipe de conception d’Horizon - le Design System de Airbus En charge de la partie mobile d’Horizon Premier Design System en 2014 - Startup Mais aussi utilisateur du Design System @maxime_frere
C’est quoi un design system ?
Un ensemble d’outils (contraintes, règles et principes) permettant aux designers
et developers de construire et maintenir des expériences cohérentes au travers de produits et services Définition C’est quoi un design system ?
C’est quoi un design system ? UI components Visual style
Composition
C’est quoi un design system ? Editorial Illustration Accessibilité Composition
C’est quoi un design system ? Patterns Data Visualisation Motion
Composition
C’est quoi un design system ? Javascript React, Vue, Angular,
etc. Tokens Code HTML + CSS Design asset Fichier sketch, Figma, etc. Cross-Platform IOS, Android, etc. Released
C’est quoi un design system ? Living documentation Documenté
Qui utilise un Design System ?
Qui utilise un Design System ?
Les avantages d’un Design System
Les avantages d’un Design System COHÉRENCE & CLARTÉ
Les avantages d’un Design System
Les avantages d’un Design System Shopify Mobile, Web, et Point-of-Sale
avant le design system
Les avantages d’un Design System Shopify Mobile, Web, et Point-of-Sale
avec le design system
Les avantages d’un Design System COHÉRENCE & CLARTÉ SCALABILITÉ &
EFFICIENCE
Les avantages d’un Design System
Les avantages d’un Design System COHÉRENCE & CLARTÉ SCALABILITÉ &
EFFICIENCE COMMUNICATION DESIGNER / DEV
Les avantages d’un Design System PRIMARY BUTTON PRINCIPAL BUTTON MAIN
BUTTON
Les avantages d’un Design System Activity view Action sheet Bottom
sheet Modal Bottom sheet
Les avantages d’un Design System COHÉRENCE & CLARTÉ SCALABILITÉ &
EFFICIENCE COMMUNICATION DESIGNER / DEV QUALITÉ DE L’EXPÉRIENCE PERFORMANCE
Les avantages d’un Design System COHÉRENCE & CLARTÉ SCALABILITÉ &
EFFICIENCE COMMUNICATION DESIGNER / DEV QUALITÉ DE L’EXPÉRIENCE PERFORMANCE SE CONCENTRER SUR LA VALEUR AJOUTÉE
Condition de succès d’un Design System
Les conditions de succès d’un Design System VIVANT
Les conditions de succès d’un Design System “A design system
isn’t a project. It’s a product serving products.”
Les conditions de succès d’un Design System Solitaire Centralisé Communautaire
Les conditions de succès d’un Design System VIVANT ATOMIQUE &
FLEXIBLE
Les conditions de succès d’un Design System
Les conditions de succès d’un Design System AGNOSTIQUE VIVANT ATOMIQUE
& FLEXIBLE
Les conditions de succès d’un Design System CONSTRUIT Grâce à
un inventaire
Les conditions de succès d’un Design System
Les conditions de succès d’un Design System CONSTRUIT Grace un
inventaire ADOPTÉ Par les projets
Les conditions de succès d’un Design System BIG BANG INCREMENTAL
Les conditions de succès d’un Design System
Les conditions de succès d’un Design System KEEP IT SMALL
& ORGANIC Essayer de ne pas limiter les champs du possible IMPLIQUER AU MAXIMUM Et favoriser les échanges
Les limites du Design System
FAILLIR DANS LA DÉFINITION D’UN PÉRIMÈTRE COHÉRENCE VS UNIFORMISATION ÉVOLUTION
VS ANTICIPATION Les limites d’un Design System TOMBER AMOUREUX DE SON PRODUIT
FAILLIR DANS LA DÉFINITION D’UN PÉRIMÈTRE COHÉRENCE VS UNIFORMISATION ÉVOLUTION
VS ANTICIPATION Les limites d’un Design System
Les limites d’un Design System +15% de conversions BUTTON AB
TEST BUTTON
EN CONCLUSION « …build something that enables your designers to
create better things faster and doesn’t just police the great designers you already have. » Kyle Peatt, Directeur de l’UX chez Shopify
MERCI