Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Patterns & Systems

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Todd Zaki Warfel Todd Zaki Warfel
May 17, 2013
Design
540
3

Design Patterns & Systems

What makes a design pattern collection or design system?

Avatar for Todd Zaki Warfel

Todd Zaki Warfel

May 17, 2013

More Decks by Todd Zaki Warfel

See All by Todd Zaki Warfel
Make Mentor Learn
Avatar for Todd Zaki Warfel zakiwarfel
1
300
Prototyping for Mobile
Avatar for Todd Zaki Warfel zakiwarfel
4
500
Paper Prototyping
Avatar for Todd Zaki Warfel zakiwarfel
1
430
GA Know Your Audience
Avatar for Todd Zaki Warfel zakiwarfel
0
280
GA UX Research Workshop
Avatar for Todd Zaki Warfel zakiwarfel
3
310
GA Hi-fi Design for Mobile Web
Avatar for Todd Zaki Warfel zakiwarfel
3
320
UXWeek Prototyping with HTML5
Avatar for Todd Zaki Warfel zakiwarfel
4
1.2k
Designing with HTML5, CSS3, and jQuery
Avatar for Todd Zaki Warfel zakiwarfel
8
800
Designing with Data
Avatar for Todd Zaki Warfel zakiwarfel
98
5.2k

Other Decks in Design

See All in Design
Frontier
Avatar for Renny Wang rwang05
0
120
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
300
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
1
3.4k
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON vivion
7
16k
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.2k
Drawing_for_Anim_Final_PDF.pdf
Avatar for Mandalyn Teo lynteo
2
140
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
560
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
1.1k
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
28k
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
0
910
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1.1M
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
810

Featured

See All Featured
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
690
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.4k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
HDC tutorial
Avatar for Michiel Stock michielstock
2
650
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
240
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
180
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k

Transcript

  1. PATTERNS & DESIGN SYSTEMS METHODS FOR MAKING SCALABLE DESIGN

  2. THEY’RE EVERYWHERE WE LOOK

  3. None
  4. None

  5. 0 1 1 2 3 5 8 13 21 34

    55 89 144
  6. None

  7. PREDICTABLE OUTCOMES IMPROVED USABILITY BETTER USER EXPERIENCE SCALABLE SYSTEMS

  8. DEFINING A DESIGN SYSTEM

  9. PATTERN COLLECTIONS DESIGN SYSTEMS

  10. PATTERN COLLECTIONS

  11. http://www.lukew.com/ff/entry.asp?1514

  12. http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/

  13. http://inspired-ui.com

  14. http://pinterest.com/abhinavsharma/mobile-web-navigation-patterns/

  15. http://box.mepholio.com

  16. http://dribbble.com/404

  17. http://patterntap.com

  18. http://patterntap.com

  19. DESIGN SYSTEMS

  20. VISUAL EXAMPLE DESCRIPTION PROBLEM IT SOLVES WHEN TO USE HOW

    TO USE IT
  21. None
  22. None

  23. http://developer.yahoo.com/ypatterns/

  24. http://developer.yahoo.com/ypatterns/

  25. http://ui-patterns.com

  26. http://ui-patterns.com

  27. http://patternry.com

  28. http://patternry.com

  29. http://patternry.com