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

1,596 views

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
 Contrast
  9. 9. And talking about chromatic contrast… https://youtu.be/VXJiBkFgprQ
  10. 10. And talking about chromatic contrast… https://youtu.be/VXJiBkFgprQ
  11. 11. Changes ofform/shape
  12. 12. Changes intheUI
(create semantic divisions of the UI/UX)
  13. 13. More
 Behavioral More
 Visceral
  14. 14. Second:
 VisualHierarchy
  15. 15. Definedifferent visualweights
  16. 16. Beawareof theuseofgrids
  17. 17. 960 grid system http://960.gs/
  18. 18. The Use of Grids in Website Design http://www.designer-daily.com/the-use-of-grids-in-website-design-6639 http://www.thegridsystem.org/
  19. 19. Typographicconstrast andhierarchiesare thebasicthing!
  20. 20. Exemplar: Histography http://histography.io/
  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 https://youtu.be/zdef2anpd04
  25. 25. Left Swipe Dat :60 https://youtu.be/TtYMA97kJlM
  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.

×