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

Design Patterns & Systems

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

Other Decks in Design

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