Takeaways from the course Visual Design for User Experience
-
Upload
omar-sosa-tzec -
Category
Design
-
view
485 -
download
0
Transcript of Takeaways from the course Visual Design for User Experience
![Page 1: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/1.jpg)
Visual Design forUser Experience
Omar Sosa-Tzec School of Informatics & Computing Indiana University Bloomington
info i400 Visual Design for User Experience Summer 2016
Takeaways
![Page 2: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/2.jpg)
6 weeks ago, we started this adventure
![Page 3: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/3.jpg)
![Page 4: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/4.jpg)
![Page 5: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/5.jpg)
Task Completion
![Page 6: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/6.jpg)
Decision Making
Task Completion
![Page 7: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/7.jpg)
Decision Making
Task Completion
Branding & Identity
![Page 8: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/8.jpg)
![Page 9: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/9.jpg)
Visual design principles
![Page 10: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/10.jpg)
Visual design principles
Contrast
![Page 11: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/11.jpg)
Visual design principles
ContrastTypography
![Page 12: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/12.jpg)
Visual design principles
ContrastTypography
Rhythm
![Page 13: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/13.jpg)
![Page 14: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/14.jpg)
Theoretical Frameworks
![Page 15: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/15.jpg)
Gestalt
Theoretical Frameworks
![Page 16: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/16.jpg)
GestaltSemiotics
Theoretical Frameworks
![Page 17: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/17.jpg)
GestaltSemioticsRhetoric
Theoretical Frameworks
![Page 18: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/18.jpg)
![Page 19: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/19.jpg)
Meaning and Experience
![Page 20: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/20.jpg)
Meaning and Experience
Visual transformations
![Page 21: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/21.jpg)
Meaning and Experience
Visual transformations
![Page 22: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/22.jpg)
Meaning and Experience
Visual transformationsIcon, Index, and Symbol
![Page 23: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/23.jpg)
Meaning and Experience
Visual transformationsIcon, Index, and Symbol
Metaphor and Metonymy
![Page 24: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/24.jpg)
![Page 25: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/25.jpg)
![Page 26: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/26.jpg)
User Experience DesignResearch
Observation
Interviews Survey
Focus group
Evaluation
Usability testing
Heuristic Evaluation
Design
Interaction flows Paper prototypes
Wireframes High-fi prototypes
Concept(s) behind your design
![Page 27: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/27.jpg)
User Experience DesignResearch
Observation
Interviews Survey
Focus group
Evaluation
Usability testing
Heuristic Evaluation
Design
Interaction flows Paper prototypes
Wireframes High-fi prototypes
Concept(s) behind your design
![Page 28: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/28.jpg)
User Experience DesignResearch
Observation
Interviews Survey
Focus group
Evaluation
Usability testing
Heuristic Evaluation
Design
Interaction flows Paper prototypes
Wireframes High-fi prototypes
Concept(s) behind your design
Visual design principles
Theoretical Frameworks
Meaning and Experience
![Page 29: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/29.jpg)
User Experience DesignResearch
Observation
Interviews Survey
Focus group
Evaluation
Usability testing
Heuristic Evaluation
Design
Interaction flows Paper prototypes
Wireframes High-fi prototypes
Concept(s) behind your design
Visual design principles
Theoretical Frameworks
Meaning and Experience
![Page 30: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/30.jpg)
User Experience DesignResearch
Observation
Interviews Survey
Focus group
Evaluation
Usability testing
Heuristic Evaluation
Design
Interaction flows Paper prototypes
Wireframes High-fi prototypes
Concept(s) behind your design
Visual design principles
Theoretical Frameworks
Meaning and Experience
Analyze and deconstruct,
copy
![Page 31: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/31.jpg)
User Experience DesignResearch
Observation
Interviews Survey
Focus group
Evaluation
Usability testing
Heuristic Evaluation
Design
Interaction flows Paper prototypes
Wireframes High-fi prototypes
Concept(s) behind your design
Visual design principles
Theoretical Frameworks
Meaning and Experience
Analyze and deconstruct,
copy
Inform your design process
![Page 32: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/32.jpg)
User Experience DesignResearch
Observation
Interviews Survey
Focus group
Evaluation
Usability testing
Heuristic Evaluation
Design
Interaction flows Paper prototypes
Wireframes High-fi prototypes
Concept(s) behind your design
Visual design principles
Theoretical Frameworks
Meaning and Experience
Analyze and deconstruct,
copy
Inform your design process
Reflect-on-action
![Page 33: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/33.jpg)
User Experience DesignResearch
Observation
Interviews Survey
Focus group
Evaluation
Usability testing
Heuristic Evaluation
Design
Interaction flows Paper prototypes
Wireframes High-fi prototypes
Concept(s) behind your design
Visual design principles
Theoretical Frameworks
Meaning and Experience
Analyze and deconstruct,
copy
Inform your design process
Reflect-on-action
Design, design, design!
![Page 34: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/34.jpg)
User Experience DesignResearch
Observation
Interviews Survey
Focus group
Evaluation
Usability testing
Heuristic Evaluation
Design
Interaction flows Paper prototypes
Wireframes High-fi prototypes
Concept(s) behind your design
Visual design principles
Theoretical Frameworks
Meaning and Experience
Analyze and deconstruct,
copy
Inform your design process
Reflect-on-action
Design, design, design!
Have fun!
![Page 35: Takeaways from the course Visual Design for User Experience](https://reader031.fdocuments.in/reader031/viewer/2022030314/5886f15d1a28abba528b6cf7/html5/thumbnails/35.jpg)
Thanks!
@omitzec