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

Design Patterns & Systems

Todd Zaki Warfel
May 17, 2013
Design
3
380

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
160
Prototyping for Mobile
zakiwarfel
4
350
Paper Prototyping
zakiwarfel
1
220
GA Know Your Audience
zakiwarfel
0
140
GA UX Research Workshop
zakiwarfel
3
160
GA Hi-fi Design for Mobile Web
zakiwarfel
3
180
UXWeek Prototyping with HTML5
zakiwarfel
4
880
Designing with HTML5, CSS3, and jQuery
zakiwarfel
8
650
Designing with Data
zakiwarfel
93
4.5k

Other Decks in Design

See All in Design
Spindle UIのつくりかた / Spindle UI: From Concept to Creation
spindle
3
1.2k
デザイナーとして動き方の変化
naoenomoto
2
990
デザイナー向けLoglass会社紹介
loglass2019
2
180
DESIGN PERSPECTIVES　制作会社から大企業のデザイナーに転職して気づいたこと
koel
0
200
デザイントークンの適用率計測とその活用
myoshiro
0
570
企業のための言葉えらび 〜Ameba リブランディングプロジェクト〜
cyberagentdevelopers
PRO
1
410
インターネット広告の変遷とAIを活用した最近の取り組み
cyberagentdevelopers
PRO
0
270
みんなで使うFigmaの環境づくり＠名古屋Figma勉強会
kiyoshifuwa
2
370
ヘルシーなウェブ制作を支える必修時短ツール
wattlaa
0
150
decksh object reference
ajstarks
2
610
Укрощая сложность цифрового продукта
ashapiro
0
180
UXA2023 Amelia Purvis - Your new cheat sheet for note taking and synthesis
uxevents
PRO
0
110

Featured

See All Featured
Making the Leap to Tech Lead
cromwellryan
119
8.1k
BBQ
matthewcrist
76
8.4k
How to name files
jennybc
56
84k
Mobile First: as difficult as doing things right
swwweet
214
8.2k
Into the Great Unknown - MozCon
thekraken
7
600
Fantastic passwords and where to find them - at NoRuKo
philnash
34
2.1k
Building a Scalable Design System with Sketch
lauravandoore
453
31k
The Invisible Customer
myddelton
113
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
10
1.2k
Making Projects Easy
brettharned
104
5.1k
Embracing the Ebb and Flow
colly
77
3.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
50k

Transcript

  1. PATTERNS & DESIGN SYSTEMS
    METHODS FOR MAKING SCALABLE DESIGN

    View Slide

  2. THEY’RE EVERYWHERE WE LOOK

    View Slide

  3. View Slide

  4. View Slide

  5. 0 1 1 2 3 5 8 13 21 34 55 89 144

    View Slide

  6. View Slide

  7. PREDICTABLE OUTCOMES
    IMPROVED USABILITY
    BETTER USER EXPERIENCE
    SCALABLE SYSTEMS

    View Slide

  8. DEFINING A DESIGN SYSTEM

    View Slide

  9. PATTERN COLLECTIONS
    DESIGN SYSTEMS

    View Slide

  10. PATTERN COLLECTIONS

    View Slide

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

    View Slide

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

    View Slide

  13. http://inspired-ui.com

    View Slide

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

    View Slide

  15. http://box.mepholio.com

    View Slide

  16. http://dribbble.com/404

    View Slide

  17. http://patterntap.com

    View Slide

  18. http://patterntap.com

    View Slide

  19. DESIGN SYSTEMS

    View Slide

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

    View Slide

  21. View Slide

  22. View Slide

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

    View Slide

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

    View Slide

  25. http://ui-patterns.com

    View Slide

  26. http://ui-patterns.com

    View Slide

  27. http://patternry.com

    View Slide

  28. http://patternry.com

    View Slide

  29. http://patternry.com

    View Slide