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
320
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
450
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
300
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
260
Design Thinking: Ideas to Implementation
bermonpainter
0
600
Product Development with Vue.js and a Headless CMS
bermonpainter
0
390
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
340
Crafting Successful UX Strategies
bermonpainter
0
1.1k
The Fallacy of Digital Transformation
bermonpainter
0
410
Design Thinking: Ideas to Implementation
bermonpainter
3
1.4k
Other Decks in Design
See All in Design
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
470
私とデザインの10年
iflection
0
100
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
100
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
2
180
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
880
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
140
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.4k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
1.4k
The Golden Whitney
ohtristanart
PRO
0
150
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
230
苦労が多かった多言語対応をFigmaで楽にした話
pioneer_devrel
PRO
0
170
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
550
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
105
19k
Designing for humans not robots
tammielis
253
25k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Done Done
chrislema
184
16k
Visualization
eitanlees
146
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
410
RailsConf 2023
tenderlove
30
1.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.7k
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.