Documenting design patterns

  • View
    117

  • Download
    2

Embed Size (px)

Text of Documenting design patterns

  1. 1. dani@tzk-design.com :: @danigrrl Documenting Design Patterns for cross-functional product teams
  2. 2. dani@tzk-design.com :: @danigrrl About Me Senior UX Designer, Harvard Business Review Group UXD Bootcamp, General Assembly Author, Drupal for Designers (OReilly, 2012)
  3. 3. dani@tzk-design.com :: @danigrrl Design Patterns at HBR
  4. 4. dani@tzk-design.com :: @danigrrl The Great Based in site CSS Mobile first Creates repeatable, reusable design patterns Speeds up front-end production
  5. 5. dani@tzk-design.com :: @danigrrl The Not So Great Documentation lacking Disorganized Design team still working in PSD comps
  6. 6. Why dont you just use this helper class?
  7. 7. dani@tzk-design.com :: @danigrrl Legibility/inconsistency issues
  8. 8. dani@tzk-design.com :: @danigrrl Contrast issues
  9. 9. dani@tzk-design.com :: @danigrrl What to do?
  10. 10. dani@tzk-design.com :: @danigrrl Step 1: Inspiration
  11. 11. dani@tzk-design.com :: @danigrrl
  12. 12. dani@tzk-design.com :: @danigrrl
  13. 13. dani@tzk-design.com :: @danigrrl Step 2: Start Organizing
  14. 14. dani@tzk-design.com :: @danigrrl
  15. 15. dani@tzk-design.com :: @danigrrl
  16. 16. dani@tzk-design.com :: @danigrrl Step 3: Document principles & guidelines
  17. 17. dani@tzk-design.com :: @danigrrl Principles & Guidelines Guiding principles Colors Typography Iconography Responsive grid Visibility helper classes
  18. 18. dani@tzk-design.com :: @danigrrl Other considerations System messaging Interface copy Design/user testing protocols and process Interaction standards
  19. 19. dani@tzk-design.com :: @danigrrl WAIT.
  20. 20. Why is User Research in here? Thats not really design.
  21. 21. Weve been trying to make the wiki* a central location for all this stuff. *that nobody ever reads
  22. 22. dani@tzk-design.com :: @danigrrl The process is still evolving http://commons.wikimedia.org/wiki/File:Evolution-des-wissens.jpg
  23. 23. dani@tzk-design.com :: @danigrrl Thank you!