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

Design Patterns & Systems

Avatar for Todd Zaki Warfel Todd Zaki Warfel
May 17, 2013
Design
3
520

Design Patterns & Systems

What makes a design pattern collection or design system?
Avatar for Todd Zaki Warfel

Todd Zaki Warfel

May 17, 2013
Tweet

More Decks by Todd Zaki Warfel

See All by Todd Zaki Warfel
Make Mentor Learn
Avatar for Todd Zaki Warfel zakiwarfel
1
290
Prototyping for Mobile
Avatar for Todd Zaki Warfel zakiwarfel
4
490
Paper Prototyping
Avatar for Todd Zaki Warfel zakiwarfel
1
410
GA Know Your Audience
Avatar for Todd Zaki Warfel zakiwarfel
0
260
GA UX Research Workshop
Avatar for Todd Zaki Warfel zakiwarfel
3
280
GA Hi-fi Design for Mobile Web
Avatar for Todd Zaki Warfel zakiwarfel
3
300
UXWeek Prototyping with HTML5
Avatar for Todd Zaki Warfel zakiwarfel
4
1.1k
Designing with HTML5, CSS3, and jQuery
Avatar for Todd Zaki Warfel zakiwarfel
8
770
Designing with Data
Avatar for Todd Zaki Warfel zakiwarfel
98
5.2k

Other Decks in Design

See All in Design
ビジネスアナリシスはビジネス”分析”じゃないよ！～システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス～
Avatar for BPStudy bpstudy
0
560
エンジニアでも捗る デザイナー的思考入門
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
1
1.1k
今日から意識できるアクセシビリティ
Avatar for fumiko fumiko
0
270
商業デザインのアクセシビリティにおける倫理フレームワークの考察
Avatar for Yu Morita securecat
1
620
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
290
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.8k
AIで加速するアクセシビリティのこれから
Avatar for Rikiya Ihara / magi magi1125
3
580
サービスデザインにおける、 映像活用の可能性（Spectrum Tokyo Meetup #18）
Avatar for Akihide Kanai ka71
0
140
Marpで推しCSSスライドを作ろう！ / marp-with-favorite-css
Avatar for ふじえもん fujiemon
0
350
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.6k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
210
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
Avatar for Aki spring_aki
4
310

Featured

See All Featured
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
520
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
830
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.6k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k

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