Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
570
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
320
Prototyping for Mobile
Avatar for Todd Zaki Warfel zakiwarfel
4
520
Paper Prototyping
Avatar for Todd Zaki Warfel zakiwarfel
1
460
GA Know Your Audience
Avatar for Todd Zaki Warfel zakiwarfel
0
300
GA UX Research Workshop
Avatar for Todd Zaki Warfel zakiwarfel
3
330
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
820
Designing with Data
Avatar for Todd Zaki Warfel zakiwarfel
98
5.3k

Other Decks in Design

See All in Design
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
550
デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜 / PdEConf2026 Design Harness
Avatar for こぎそ / Shinichi Kogiso kgsi
14
23k
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
Avatar for keita keita_yoshikawa
0
200
プレゼンスライド作成で意識していること
Avatar for きみちゃん kimichan
0
160
エンジニア経験0のデザイナーが アプリを0からリリースまで 作ってみる
Avatar for 都村　美帆 abokadotyann
2
460
日経電子版を支えていく Kasane Design System
Avatar for Taito Tanaka taitotnk
0
580
Webブラウザで動く
VJツールをつくる
Avatar for akirafukuoka akirafukuoka
0
130
noteらしさを織り込むハーネスエンジニアリング
Avatar for uto usui uto
0
2.7k
Typographie et intégration web
Avatar for Raphael Goetter goetter
0
180
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
Avatar for 松村 大貴｜Butterfly Lab株式会社 dmattsun
2
860
デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み
Avatar for Kota SAITO kotasaito_cnt
0
1.4k
いいUIとは？初心者向けに事例をもとにUIデザインを分解
Avatar for 原 佑一｜クリエイティブディレクター yuichi_hara7
13
7.3k

Featured

See All Featured
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
510
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
500
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
320
BBQ
Avatar for Matthew Crist matthewcrist
90
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
820
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
270
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
390
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
440
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.4k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
310

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