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.

Visual Design for Interface and Experience Design


Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Visual Design for Interface and Experience Design

  1. 1. VisualDesignforUI/UX OmarSosa-Tzec School of Informatics & Computing Indiana University Bloomington info i300 Human-Computer Interaction Fall 2015 A brief intro
  2. 2. Hello! ¡Hola!
  3. 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. 4. Whatis thislectureabout?
  5. 5. Whatis thislectureabout? Introduction to visual design principles and their application in UI/UX design
  6. 6. Thesearethe3keyideasthatIwantyouto rememberfromthislecture: Contrast Visual Hierarchy Connotation vs.Denotation
  7. 7. One: Contrast
  8. 8. Chromatic
  9. 9. And talking about chromatic contrast…
  10. 10. And talking about chromatic contrast…
  11. 11. Changes ofform/shape
  12. 12. Changes intheUI
(create semantic divisions of the UI/UX)
  13. 13. More
 Behavioral More
  14. 14. Second:
  15. 15. Definedifferent visualweights
  16. 16. Beawareof theuseofgrids
  17. 17. 960 grid system
  18. 18. The Use of Grids in Website Design
  19. 19. Typographicconstrast andhierarchiesare thebasicthing!
  20. 20. Exemplar: Histography
  21. 21. Three: Denotationvs. Connotation
  22. 22. What does it mean for the members in the team?
  23. 23. Swipe to 
 the right 
 for Like Swipe to the left 
 for Nope
  24. 24. Tinder Plus
  25. 25. Left Swipe Dat :60
  26. 26. Remember,whenyoudesign, keepinmind, Contrast Visual Hierarchy Connotation vs.Denotation
  27. 27. Thanks! @omitzec Note: Images taken from the Web just for pedagogical purposes. Copyright may apply.