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
210
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
260
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
180
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
170
Design Thinking: Ideas to Implementation
bermonpainter
0
460
Product Development with Vue.js and a Headless CMS
bermonpainter
0
280
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
240
Crafting Successful UX Strategies
bermonpainter
0
890
The Fallacy of Digital Transformation
bermonpainter
0
280
Design Thinking: Ideas to Implementation
bermonpainter
3
1.2k
Other Decks in Design
See All in Design
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
250
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
5k
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
240
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
560
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
370
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
160
文化に寄りそうデザイン
recruitengineers
PRO
4
920
UIをもたらすコンテクストの考察
securecat
9
2.6k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
4 Signs Your Business is Dying
shpigford
176
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
21
6.4k
Product Roadmaps are Hard
iamctodd
45
9.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Code Review Best Practice
trishagee
56
15k
Infographics Made Easy
chrislema
238
18k
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.