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
390
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
520
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
340
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
300
Design Thinking: Ideas to Implementation
bermonpainter
0
660
Product Development with Vue.js and a Headless CMS
bermonpainter
0
420
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
380
Crafting Successful UX Strategies
bermonpainter
0
1.3k
The Fallacy of Digital Transformation
bermonpainter
0
480
Design Thinking: Ideas to Implementation
bermonpainter
3
1.5k
Other Decks in Design
See All in Design
チームをデザイン対象にする / Design for your team
kaminashi
1
530
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
1
370
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
3.1k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
7k
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
200
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
490
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.1k
2026年、デザイナーはなにに賭ける?
0b1tk
0
480
hicard_credential_202601
hicard
0
150
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
850
mount_company_profile
mount_inc
0
4.9k
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
2.7k
Featured
See All Featured
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
580
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
3.6k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
68
WENDY [Excerpt]
tessaabrams
9
36k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
Why Our Code Smells
bkeepers
PRO
340
58k
Darren the Foodie - Storyboard
khoart
PRO
2
2.4k
Paper Plane
katiecoart
PRO
0
46k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
240
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
92
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
66
37k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
52k
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.