visual design for interface and experience design
TRANSCRIPT
Visual Design for UI/UX
Omar Sosa-Tzec School of Informatics & Computing Indiana University Bloomington
info i300 Human-Computer Interaction Fall 2015
A brief intro
Hello! ¡Hola!
2000 20042002 2006 2008 2010 2012 2014
My history with design 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
What is this lecture about?
What is this lecture about?
Introduction to visual design principles and their application in UI/UX design
These are the 3 key ideas that I want you to remember from this lecture:
Contrast
Visual Hierarchy
Connotation vs. Denotation
One: Contrast
Chromatic Contrast
Changes of form/shape
Changes in the UI
(create semantic divisions of the UI/UX)
MoreBehavioral
MoreVisceral
Second:Visual Hierarchy
Define different visual weights
Be aware of the use of grids
The Use of Grids in Website Design
http://www.designer-daily.com/the-use-of-grids-in-website-design-6639
http://www.thegridsystem.org/
Typographic constrast and hierarchies are
the basic thing!
Three: Denotation vs. Connotation
What does it mean for the members in
the team?
Swipe to the right for Like
Swipe to the left for Nope
Remember, when you design, keep in mind,
Contrast
Visual Hierarchy
Connotation vs. Denotation
Thanks!
@omitzec
Note: Images taken from the Web just for pedagogical purposes. Copyright may apply.