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
360
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
500
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
320
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
280
Design Thinking: Ideas to Implementation
bermonpainter
0
640
Product Development with Vue.js and a Headless CMS
bermonpainter
0
410
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
360
Crafting Successful UX Strategies
bermonpainter
0
1.2k
The Fallacy of Digital Transformation
bermonpainter
0
460
Design Thinking: Ideas to Implementation
bermonpainter
3
1.5k
Other Decks in Design
See All in Design
Yumika Yamada Portfolio
yumii
0
2.1k
portfolio.pdf
onof003
0
210
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.3k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
780
Memory Man v3 (WIP)
storybychad
PRO
0
2.8k
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
0
100
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
1
270
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
670
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
460
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
290
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
bitkey
PRO
0
120
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
630
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Building an army of robots
kneath
306
46k
Agile that works and the tools we love
rasmusluckow
331
21k
Mobile First: as difficult as doing things right
swwweet
225
10k
The Invisible Side of Design
smashingmag
302
51k
Rails Girls Zürich Keynote
gr2m
95
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Side Projects
sachag
455
43k
Scaling GitHub
holman
463
140k
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.