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
340
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
480
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
310
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
280
Design Thinking: Ideas to Implementation
bermonpainter
0
620
Product Development with Vue.js and a Headless CMS
bermonpainter
0
400
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
350
Crafting Successful UX Strategies
bermonpainter
0
1.2k
The Fallacy of Digital Transformation
bermonpainter
0
430
Design Thinking: Ideas to Implementation
bermonpainter
3
1.5k
Other Decks in Design
See All in Design
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
110
mento Design Team Portfolio
mento0fficial
0
550
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
250
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
340
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
130
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
820
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
250
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
UXデザインはなぜ定着しないのか?
designstudiopartners
0
890
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
120
AIで加速するアクセシビリティのこれから
magi1125
3
640
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
200
Featured
See All Featured
Docker and Python
trallard
45
3.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Designing for Performance
lara
610
69k
We Have a Design System, Now What?
morganepeng
53
7.7k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Fireside Chat
paigeccino
39
3.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Visualization
eitanlees
146
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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.