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
300
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
270
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
780
Designing with Data
Avatar for Todd Zaki Warfel zakiwarfel
98
5.2k

Other Decks in Design

See All in Design
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
150
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
6
890
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
270
Liquid GlassとApp Intents
Avatar for touyou touyou
0
450
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
Avatar for 弁護士ドットコム bengo4com
1
1.3k
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
8
2.6k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
PRO
0
170
Marpで推しCSSスライドを作ろう！ / marp-with-favorite-css
Avatar for ふじえもん fujiemon
0
690
数理的アプローチで挑むスマホUIのデザイン改善：タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
880
新しいデザインの難しさ（公開版） / Difficulties in the New Design (public ver.)
Avatar for usagimaru usagimaru
1
940
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
6
3k
kintone Style Book
Avatar for kintone kintone
4
3.6k

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
190
55k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.9k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.7k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k

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