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.

1. VisualDesignPrinciples
OmarSosa-Tzec
School of Informatics & Computing
Indiana University Bloomington
info i400 Visual Design for User Experience
Summer 2016
Deconstructing visual artifacts

2. Yesterday…

3. Decision
Making
Task
Completion
Identity

4. Source: http://www.coetail.com/expatstef/files/2015/03/Ikea-Instructions.jpg

5. Forexample…

9. Occlude/revealto
makecontrast!

10. Tip/Approach

11. Tip/Approach
Decision
Making
Task
Completion
Identity
Usethistobuilda
designrationale

13. Decision
Making
Task
Completion
Identity

14. Decision
Making
Task
Completion
Identity

15. Decision
Making
Task
Completion
Identity

16. Interfaces work
similarly, however…

17. Yahoo Weather App
Source: http://img.gawkerassets.com/img/18l0kjccthmtjjpg/original.jpg
Data-> Information-> Visual Information

18. Yahoo Weather App
Source: http://img.gawkerassets.com/img/18l0kjccthmtjjpg/original.jpg
Data-> Information-> Visual Information
Quantitative & Qualitative Info

19. Yahoo Weather App
Source: http://img.gawkerassets.com/img/18l0kjccthmtjjpg/original.jpg
Data-> Information-> Visual Information
Quantitative & Qualitative Info
Input/Output + Feedback

20. For the design of
user interfaces

21. The relation between
• Data
• Quant & Qual Info
• Visual Information
• Feedback

22. The relation between
• Data
• Quant & Qual Info
• Visual Information
• Feedback

23. Going back to
our example…

26. Notethemargins

27. Notethe“empty”spaceleft
atthebottomofthepage

28. “Supporting”theweight
fromabove

29. Notethe
weights

30. Notethe
contrast

31. Notethe
contrast

32. •Margins

33. •Margins
•Bottom of composition

34. •Margins
•Bottom of composition
•Visual Weight

35. •Margins
•Bottom of composition
•Visual Weight
•Contrast

36. Also, notice this…

47. •“Mass” (proportions)
•Visual Anchor
•Reading gravity

48. Whatabout
theCinemaApp?

50. • Margins

51. • Margins
• Bottom of screen

52. • Margins
• Bottom of screen
• Visual Weight

53. • Margins
• Bottom of screen
• Visual Weight
• Contrast

55. • “Mass” (proportions)

56. • “Mass” (proportions)
• Visual Anchor

57. • “Mass” (proportions)
• Visual Anchor
• Reading gravity

58. Adjust your design
based on these aspects

59. VisualBreak

60. Doyouhavea
smartphone?
We'lltakepictures
tomorrow(assignment)

61. In-ClassActivity

62. Mondrian Project*
*Attribution:GaryDickson

64. Thanks!
@omitzec