Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Case Study: Experimenting with Design Systems
Bermon Painter
April 04, 2018
Design
1
140
Case Study: Experimenting with Design Systems
Bermon Painter
April 04, 2018
Tweet
Share
More Decks by Bermon Painter
See All by Bermon Painter
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
94
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
86
Design Thinking: Ideas to Implementation
bermonpainter
0
320
Product Development with Vue.js and a Headless CMS
bermonpainter
0
190
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
160
Crafting Successful UX Strategies
bermonpainter
0
640
The Fallacy of Digital Transformation
bermonpainter
0
180
Design Thinking: Ideas to Implementation
bermonpainter
3
970
Successfully Hire, Mentor, Retain, and Lead Design Teams
bermonpainter
0
270
Other Decks in Design
See All in Design
A Walk in the Suburbs
sabina415
0
170
Installing and Running decksh/pdfdeck
ajstarks
0
210
WAI-ARIAウェイウェイ会
shikakun
0
330
Vivliostyle.jsの先行実装から考えるCSS text-spacingプロパティ
terkel
0
630
Reunion
solmetts
0
300
BuriKaigi2023 みんなのヨガ部 開発エピソード
yd_niku
1
240
ヘッドショットの気持ち良さを考える 〜フィードバックとUX〜
migi1982
1
240
モンストの組織とUIデザイナー業務の紹介
mixil
0
490
toB SaaS開発におけるUXライティング|あつまるデザナレ2022
aguringo
4
990
We’re Not doing Design Systems Properly and That’s Okay
morganepeng
2
440
The Consolations of Complexity
tsmorgan
1
260
組織でデザインが推進できる人の思考術
yhassy
6
5k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
159
12k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
Writing Fast Ruby
sferik
613
58k
Atom: Resistance is Futile
akmur
256
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
GitHub's CSS Performance
jonrohan
1020
430k
Bash Introduction
62gerente
601
210k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
Product Roadmaps are Hard
iamctodd
38
7.7k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
Transcript
Case Study: Experimenting with Design Systems @bermonpainter | #cltdesign
Tonight’s Agenda Contrast style guide vs. pattern library vs. design
system Building your own Case study: Internal applications at Cardinal 1 2 3
Style Guides Defines abstract styles in the form static documentation
that describes how the design itself should be applied to a product or service.
Style Guides Color Palettes Iconography Imagery Typography Typographic Scale Grid
Definitions
None
None
None
None
None
None
None
Pattern Libraries A set of reusable components that are used
across single or multiple products or services.
Pattern Libraries Component Names Visual Representation Variations Use Cases Considerations
Code Samples Templates
None
None
None
Design System Forms the foundation of a shared design language
and allows the team to communicate shared rules and connections around how to build a product or service.
Design Systems Style Guide Pattern Library Tools & Utilities Principles
Rules
None
None
None
Design System Rules and Connections Style Guide Abstract Styles Pattern
Library Reusable Components
A style guide is an artifact of a design process.
A design system is a living, funded project with a roadmap & backlog, serving an ecosystem. “ “ – Nathan Curtis
PATTERN LIBRARY APP DESIGN SYSTEM
PATTERN LIBRARY APP DESIGN SYSTEM APP
PROSPECT METRE EVOKE DESIGN SYSTEM FULCRUM ENLIST
None
Fin.