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
440
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
290
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
250
Design Thinking: Ideas to Implementation
bermonpainter
0
590
Product Development with Vue.js and a Headless CMS
bermonpainter
0
380
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
330
Crafting Successful UX Strategies
bermonpainter
0
1.1k
The Fallacy of Digital Transformation
bermonpainter
0
400
Design Thinking: Ideas to Implementation
bermonpainter
3
1.4k
Other Decks in Design
See All in Design
横断組織デザイナーの働き方
mixi_design
PRO
0
410
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
410
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
300
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
230
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
250
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
440
マンガで分かるサービスデザインガイドライン
senryakuka
1
710
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
560
Goodpatch Tour💙 / We are hiring!
goodpatch
31
810k
Tableau曲線表現講座(2024.11.21)
cielo1985
0
310
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
210
Building foundations 堅牢なデザイントークンの設計
hilokifigma
1
2.6k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Git: the NoSQL Database
bkeepers
PRO
429
65k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Designing Experiences People Love
moore
140
23k
How STYLIGHT went responsive
nonsquared
99
5.4k
Automating Front-end Workflow
addyosmani
1369
200k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Making Projects Easy
brettharned
116
6.1k
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.