Visual Design Principles Omar Sosa-Tzec School of Informatics & Computing Indiana University Bloomington info i400 Visual Design for User Experience Summer 2016 Deconstructing visual artifacts
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Visual Design Principles
Omar Sosa-Tzec School of Informatics & Computing Indiana University Bloomington
info i400 Visual Design for User Experience Summer 2016
Deconstructing visual artifacts
Yesterday…
Decision Making
Task Completion
Identity
Source: http://www.coetail.com/expatstef/files/2015/03/Ikea-Instructions.jpg
For example…
Occlude/reveal to make contrast!
Tip/Approach
Tip/Approach
Decision Making
Task Completion
Identity
Use this to build a design rationale
Decision Making
Task Completion
Identity
Decision Making
Task Completion
Identity
Decision Making
Task Completion
Identity
Interfaces work similarly, however…
Yahoo Weather App
Source: http://img.gawkerassets.com/img/18l0kjccthmtjjpg/original.jpg
Data -> Information -> Visual Information
Yahoo Weather App
Source: http://img.gawkerassets.com/img/18l0kjccthmtjjpg/original.jpg
Data -> Information -> Visual Information
Quantitative & Qualitative Info
Yahoo Weather App
Source: http://img.gawkerassets.com/img/18l0kjccthmtjjpg/original.jpg
Data -> Information -> Visual Information
Quantitative & Qualitative Info
Input/Output + Feedback
For the design of user interfaces
The relation between • Data • Quant & Qual Info • Visual Information • Feedback
The relation between • Data • Quant & Qual Info • Visual Information • Feedback
Going back to our example…
Note the margins
Note the “empty” space left at the bottom of the page
“Supporting” the weight from above
Note the
weights
Note the
contrast
Note the
contrast
•Margins
•Margins •Bottom of composition
•Margins •Bottom of composition •Visual Weight
•Margins •Bottom of composition •Visual Weight •Contrast
Also, notice this…
•“Mass” (proportions) •Visual Anchor •Reading gravity
What about the Cinema App?
• Margins
• Margins • Bottom of screen
• Margins • Bottom of screen • Visual Weight
• Margins • Bottom of screen • Visual Weight • Contrast
• “Mass” (proportions)
• “Mass” (proportions) • Visual Anchor
• “Mass” (proportions) • Visual Anchor • Reading gravity
Adjust your design based on these aspects
Visual Break
Do you have a smartphone?
We'll take pictures tomorrow (assignment)
In-Class Activity
Mondrian Project** Attribution: Gary Dickson
Thanks!
@omitzec
Related Documents
