Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Visual Design for User Experience

1,537 views

Published on

Lecture slides (teaser) for the summer 2016 class INFO-I 400: Special Topics in Informatics (Visual Design for UX) at Indiana University Bloomington, School of Informatics and Computing.

Published in: Design
  • Be the first to comment

Introduction to Visual Design for User Experience

  1. 1. VisualDesignPrinciples OmarSosa-Tzec School of Informatics & Computing Indiana University Bloomington info i400 Visual Design for User Experience Summer 2016 Deconstructing visual artifacts
  2. 2. Yesterday…
  3. 3. Decision Making Task Completion Identity
  4. 4. Source: http://www.coetail.com/expatstef/files/2015/03/Ikea-Instructions.jpg
  5. 5. Forexample…
  6. 6. Occlude/revealto makecontrast!
  7. 7. Tip/Approach
  8. 8. Tip/Approach Decision Making Task Completion Identity Usethistobuilda designrationale
  9. 9. Decision Making Task Completion Identity
  10. 10. Decision Making Task Completion Identity
  11. 11. Decision Making Task Completion Identity
  12. 12. Interfaces work similarly, however…
  13. 13. Yahoo Weather App Source: http://img.gawkerassets.com/img/18l0kjccthmtjjpg/original.jpg Data-> Information-> Visual Information
  14. 14. Yahoo Weather App Source: http://img.gawkerassets.com/img/18l0kjccthmtjjpg/original.jpg Data-> Information-> Visual Information Quantitative & Qualitative Info
  15. 15. Yahoo Weather App Source: http://img.gawkerassets.com/img/18l0kjccthmtjjpg/original.jpg Data-> Information-> Visual Information Quantitative & Qualitative Info Input/Output + Feedback
  16. 16. For the design of user interfaces
  17. 17. The relation between • Data • Quant & Qual Info • Visual Information • Feedback
  18. 18. The relation between • Data • Quant & Qual Info • Visual Information • Feedback
  19. 19. Going back to 
 our example…
  20. 20. Notethemargins
  21. 21. Notethe“empty”spaceleft atthebottomofthepage
  22. 22. “Supporting”theweight fromabove
  23. 23. Notethe weights
  24. 24. Notethe contrast
  25. 25. Notethe contrast
  26. 26. •Margins
  27. 27. •Margins •Bottom of composition
  28. 28. •Margins •Bottom of composition •Visual Weight
  29. 29. •Margins •Bottom of composition •Visual Weight •Contrast
  30. 30. Also, notice this…
  31. 31. •“Mass” (proportions) •Visual Anchor •Reading gravity
  32. 32. Whatabout theCinemaApp?
  33. 33. • Margins
  34. 34. • Margins • Bottom of screen
  35. 35. • Margins • Bottom of screen • Visual Weight
  36. 36. • Margins • Bottom of screen • Visual Weight • Contrast
  37. 37. • “Mass” (proportions)
  38. 38. • “Mass” (proportions) • Visual Anchor
  39. 39. • “Mass” (proportions) • Visual Anchor • Reading gravity
  40. 40. Adjust your design based on these aspects
  41. 41. VisualBreak
  42. 42. Doyouhavea smartphone? We'lltakepictures tomorrow(assignment)
  43. 43. In-ClassActivity
  44. 44. Mondrian Project* *Attribution:GaryDickson
  45. 45. Thanks! @omitzec

×