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
280
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
400
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
260
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
220
Design Thinking: Ideas to Implementation
bermonpainter
0
550
Product Development with Vue.js and a Headless CMS
bermonpainter
0
350
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
290
Crafting Successful UX Strategies
bermonpainter
0
1k
The Fallacy of Digital Transformation
bermonpainter
0
360
Design Thinking: Ideas to Implementation
bermonpainter
3
1.3k
Other Decks in Design
See All in Design
Slip N Slime - Character Design Ideation
thebogheart
0
310
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
Arborea Art Book
thebogheart
1
290
Dreamia
elsh
0
170
Карта реализации историй — убийца USM
ashapiro
0
200
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
400
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.2k
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.1k
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
260
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
350
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
460
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
510
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Adopting Sorbet at Scale
ufuk
73
9.1k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Agile that works and the tools we love
rasmusluckow
327
21k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Into the Great Unknown - MozCon
thekraken
32
1.5k
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.