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
Design System, the full story
Search
UXAustralia
PRO
May 16, 2019
Design
0
280
Design System, the full story
UXAustralia
PRO
May 16, 2019
Tweet
Share
More Decks by UXAustralia
See All by UXAustralia
UXA2023 Eva Plaisted, Klaus Paiva and Maria Christley - oing smaller, to go bigger: A design system evolution
uxevents
PRO
1
210
UXA2023 Yasamin Asadi - Designing for a post-lockdown metaverse
uxevents
PRO
0
110
UXA2023 Penny Goodwin - Information Architecture and product development
uxevents
PRO
0
270
UXA2023 Andy Budd - Design’s Mid-Life Crisis
uxevents
PRO
0
730
Graphic Recording - Andy Budd
uxevents
PRO
0
600
UXA2023 Erin Casali - Driving organizational change with co-design
uxevents
PRO
0
460
UXA2023 Alina Butolina - The Value of Global Inclusive Design Practices
uxevents
PRO
1
210
UXA2023 Emily Underwood and Eilish Out-O'Reilly - Designing for the overlooked user we will all become
uxevents
PRO
0
200
UXA2023 Julia Suh - Driving a multi-sector collaboration for countering online child sexual exploitation
uxevents
PRO
0
80
Other Decks in Design
See All in Design
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
590
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.4k
Web 組版の課題とその解法
yamatoiizuka
0
110
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
120
The Fight
euralisw
0
120
社内管理画面のデザインもプロダクトデザイン
takanorip
4
750
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
650
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
320
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
460
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.1k
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
Information Architects: The Missing Link in Design Systems
soysaucechin
0
120
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
63k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6k
Facilitating Awesome Meetings
lara
43
5.6k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Raft: Consensus for Rubyists
vanstee
133
6.3k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Thoughts on Productivity
jonyablonski
60
3.9k
It's Worth the Effort
3n
180
27k
Code Reviewing Like a Champion
maltzj
515
39k
Teambox: Starting and Learning
jrom
128
8.4k
Atom: Resistance is Futile
akmur
260
25k
Transcript
DESIGN SYSTEMS The Full Story
HELLO I’M TIM SCHOCH 2004 – 2012 Webdesigner / Developer
Since 2013 UX Designer Since 2016 Freelancer
None
None
[email protected]
schochtim @UXAustralia#DL19 @tim_schoch
style guides, UX patterns and functional components. Design systems combine
stand-alone products that need to be maintained. Design systems are
There is no warrant for a design system in itself.
FIVE PILLARS
None
1st SELL IT
None
PREPARE – Quick Research – Value Proposition – Scope and
Resources
FUNDING – Dedicated Budget – Product Team Rotation – Licencing
Consistency Improved Quality Speed Benefits of a Design System
Design systems offer advantages, while restricting other parts of the
current process. It’s a trade off
Design systems allow others to focus on generating value. Elevator
Pitch
2nd RESEARCH
Design systems need to know the reason they exist. What
problem are we solving?
WHO ARE OUR USERS? – Users – Product Teams
COMPONENT INVENTORY
THE GOAL – Create a shared vision – Define realistic
scope – Decide on UX Principles – Name it
3rd DESIGN
None
None
None
None
WE TRADE PERFECTION FOR SPEED AND CONSISTENCY
NAMING helps with adoption
4th BUILD
DRY
WET
BUTTON Variations – Primary – Secondary – Outline – Ghost
Properties – Label – Sub-Label – Icon – Animated States – Default – Hover – Active – Disabled
64 4 × 4 × 4
80 4 × 4 × 5
CARD Variations – Default – Hero – Small – Product
– Testimonial Properties – Title – Sub-Title – Category – Images – Video – Description – Author – More Link – Product – Price – Discount – Ribbon States – Default • Hover • Selected – Highlighted • Hover • Selected
360 5 × 6 × 12
None
DRY + WET
DOCUMENTATION – Vision – UX Principles + Patterns – Components
– Tokens – Change log – Contact page
eg. Storybook eg. zeroheight
5th MAINTAIN
None
EVERYTHING is a public API
1.4.2 Major.Minor.Bugfix Semantic Versioning
SCALING how to build rigid and stay flexible
None
WRAP UP
None
None
LINKS + ARTICLES tsc.li/followup KEEP IN CONTACT @tim_schoch in/schochtim ICONS
icofont.com simpleicons.org PICTURES Me