Download
cs 4963 ui design n.
Skip this Video
Loading SlideShow in 5 Seconds..
CS 4963: UI Design PowerPoint Presentation
Download Presentation
CS 4963: UI Design

CS 4963: UI Design

136 Vues Download Presentation
Télécharger la présentation

CS 4963: UI Design

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. CS 4963: UI Design Interaction Design, Part 2

  2. Today: • What is Interaction Design, anyways? • How do we do interaction design? • Fundamentals and Building Blocks • Heuristics and Patterns • Wrap up Agile UX • Deliverables and practices • Documentation

  3. BUT FIRST

  4. …so not a lot of images today.

  5. agile ux

  6. design 1 to 2 iterations ahead

  7. hardening iteration

  8. (From Budwig, Jeong, Kelkar.)

  9. (not yet right.)

  10. story team is important

  11. (everyone is figuring it out)

  12. most important is having overall vision

  13. sketching and prototyping

  14. sketching is brainstorming

  15. prototypes are interactive

  16. “I can always animate that interaction faster than you can code it.” —Chris Bernard, Microsoft UX Evangelist

  17. sketching

  18. thinking visually

  19. low-fi vs. high-fi

  20. sketching notations

  21. doesn’t have to be on paper

  22. video sketches

  23. participatory design

  24. design jams

  25. prototyping

  26. paper prototypes

  27. (choose your own adventure)

  28. code prototypes

  29. ideally want to carry over things

  30. styles and resources

  31. animation (!!!)

  32. tools

  33. THERE ARE A LOT OF THEM

  34. shootout of prototyping tools http://www.slideshare.net/suzeingram/spoilt-for-choice-which-prototyping-tool-is-right-for-you

  35. shootout of prototyping tools shootout of prototyping tools http://www.slideshare.net/suzeingram/spoilt-for-choice-which-prototyping-tool-is-right-for-you

  36. pick what’s appropriate to your project

  37. I <3SketchFlow

  38. processing.org& variants

  39. if you’re making a web page, prototype in markup

  40. jQuery, et al.ixedit

  41. documentation

  42. documentation is communication

  43. think about the why

  44. do what makes sense

  45. old school: giant spec docs

  46. each screen

  47. detailed lists of assets on each screen

  48. actions for every interactive element