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

Design Patterns & Systems

Todd Zaki Warfel
May 17, 2013
Design
3
500

Design Patterns & Systems

What makes a design pattern collection or design system?

Todd Zaki Warfel

May 17, 2013
Tweet

More Decks by Todd Zaki Warfel

See All by Todd Zaki Warfel
Make Mentor Learn
zakiwarfel
1
280
Prototyping for Mobile
zakiwarfel
4
470
Paper Prototyping
zakiwarfel
1
390
GA Know Your Audience
zakiwarfel
0
250
GA UX Research Workshop
zakiwarfel
3
270
GA Hi-fi Design for Mobile Web
zakiwarfel
3
280
UXWeek Prototyping with HTML5
zakiwarfel
4
1.1k
Designing with HTML5, CSS3, and jQuery
zakiwarfel
8
760
Designing with Data
zakiwarfel
98
5.1k

Other Decks in Design

See All in Design
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
650
デザイナーのお仕事（UI/UX GRAPHIC GROUP）
mirrativ
0
140
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.1k
NAHO SHIMONO_Portfolio2025
nahohphp
0
190
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1k
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
LLMによるRAG評価用合成テストデータの生成
licux
6
700
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.8k
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
69k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
600
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
700

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
KATA
mclloyd
29
14k
Building Applications with DynamoDB
mza
93
6.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Building an army of robots
kneath
303
45k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Writing Fast Ruby
sferik
628
61k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
BBQ
matthewcrist
87
9.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A Modern Web Designer's Workflow
chriscoyier
693
190k

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