Three key concepts that apply to UI/UX design: contrast, visual hierarchy, and connotation and denotation. Presentation slides of a talk as guest lecturer for the Fall 2015 course INFO-I 300 Human-Computer Interaction/Interaction Design at Indiana University Bloomington, School of Informatics and Computing. Instructor of record: Gopinaath Kannabiran.

1. VisualDesignforUI/UX
OmarSosa-Tzec
School of Informatics & Computing
Indiana University Bloomington
info i300 Human-Computer Interaction
Fall 2015
A brief intro

2. Hello!
¡Hola!

3. 2000 20042002 2006 2008 2010 2012 2014
Myhistorywithdesign
Seduced by the creation,use and power of the visual
2015
Web design-Usability-Gestalt-Corporate identity
Stochastic Particles Nonlinear Image Processing
First formal encounter with rhetoric,semiotics,
design research,and information design
Rhetorical model of interaction design
Encounter with Semiotic Engineering
Design lecturer & freelancer
Return to rhetoric
Rhetorical criticism & HCI
Rhetorical handbook for UI/UX
Software as visual argument

4. Whatis
thislectureabout?

5. Whatis
thislectureabout?
Introduction to visual design
principles and their application
in UI/UX design

6. Thesearethe3keyideasthatIwantyouto
rememberfromthislecture:
Contrast
Visual Hierarchy
Connotation vs.Denotation

7. One:
Contrast

8. Chromatic
Contrast

12. And talking about chromatic contrast…
https://youtu.be/VXJiBkFgprQ

13. And talking about chromatic contrast…
https://youtu.be/VXJiBkFgprQ

17. Changes
ofform/shape

20. Changes
intheUI (create semantic divisions of the UI/UX)

22. More
Behavioral
More
Visceral

25. Second:
VisualHierarchy

26. Definedifferent
visualweights

33. Beawareof
theuseofgrids

34. 960 grid system
http://960.gs/

35. The Use of Grids in Website Design
http://www.designer-daily.com/the-use-of-grids-in-website-design-6639
http://www.thegridsystem.org/

36. Typographicconstrast
andhierarchiesare
thebasicthing!

40. Exemplar: Histography
http://histography.io/

41. Three:
Denotationvs.
Connotation

43. What does it mean
for the members in
the team?

45. Swipe to
the right
for Like
Swipe to
the left
for Nope

46. Tinder Plus
https://youtu.be/zdef2anpd04

47. Left Swipe Dat :60
https://youtu.be/TtYMA97kJlM

48. Remember,whenyoudesign,
keepinmind,
Contrast
Visual Hierarchy
Connotation vs.Denotation

49. Thanks!
@omitzec
Note: Images taken from the Web just for pedagogical purposes.
Copyright may apply.