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
Case Study: Experimenting with Design Systems
Search
Bermon Painter
April 04, 2018
Design
1
210
Case Study: Experimenting with Design Systems
Bermon Painter
April 04, 2018
Tweet
Share
More Decks by Bermon Painter
See All by Bermon Painter
Behavioural Science + Product Innovation = ❤️
bermonpainter
0
250
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
180
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
160
Design Thinking: Ideas to Implementation
bermonpainter
0
450
Product Development with Vue.js and a Headless CMS
bermonpainter
0
280
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
240
Crafting Successful UX Strategies
bermonpainter
0
880
The Fallacy of Digital Transformation
bermonpainter
0
270
Design Thinking: Ideas to Implementation
bermonpainter
3
1.2k
Other Decks in Design
See All in Design
decksh object reference
ajstarks
2
910
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
社内管理画面のデザインもプロダクトデザイン
takanorip
4
730
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
350
Sociotechnical design for software and human systems
xinyao
2
480
Designing UIs without a UI designer
strongeron
0
110
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
710
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
620
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
272
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
In The Pink: A Labor of Love
frogandcode
138
21k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
The Invisible Customer
myddelton
114
12k
How STYLIGHT went responsive
nonsquared
92
4.8k
It's Worth the Effort
3n
180
27k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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.