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
310
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
420
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
280
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
240
Design Thinking: Ideas to Implementation
bermonpainter
0
570
Product Development with Vue.js and a Headless CMS
bermonpainter
0
370
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
310
Crafting Successful UX Strategies
bermonpainter
0
1.1k
The Fallacy of Digital Transformation
bermonpainter
0
380
Design Thinking: Ideas to Implementation
bermonpainter
3
1.4k
Other Decks in Design
See All in Design
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
770
最速[要出典]アクセシビリティチェック
magi1125
2
190
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
350
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
170
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
560
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.3k
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
860
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
850
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
650
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
Adopting Sorbet at Scale
ufuk
74
9.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Building Applications with DynamoDB
mza
93
6.2k
Building an army of robots
kneath
302
45k
Building Your Own Lightsaber
phodgson
104
6.2k
A designer walks into a library…
pauljervisheath
205
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
290
Statistics for Hackers
jakevdp
797
220k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
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.