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
810
Design system
Maxime Frere
November 08, 2018
Tweet
Share
Other Decks in Design
See All in Design
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
1.9k
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.2k
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
470
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.2k
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
390
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
190
ZKK_001.pdf
nicholaspegu
0
1.4k
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
50
32k
Fleet Gas Station
joshtang
0
140
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
ncdc
9
7.9k
Haruki_Konaka_Portforio.pdf
haruki556
0
560
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
270
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
2
54
Typedesign – Prime Four
hannesfritz
39
2.4k
Building Adaptive Systems
keathley
38
2.2k
Agile that works and the tools we love
rasmusluckow
327
21k
Ruby is Unlike a Banana
tanoku
96
11k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Making Projects Easy
brettharned
115
5.9k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
A Philosophy of Restraint
colly
203
16k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.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