takeaways from the course visual design for user experience

35
Visual Design for User Experience Omar Sosa-Tzec School of Informatics & Computing Indiana University Bloomington info i400 Visual Design for User Experience Summer 2016 Takeaways

Upload: omar-sosa-tzec

Post on 14-Apr-2017

485 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Takeaways from the course Visual Design for User Experience

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

6 weeks ago, we started this adventure

Page 3: Takeaways from the course Visual Design for User Experience
Page 4: Takeaways from the course Visual Design for User Experience
Page 5: Takeaways from the course Visual Design for User Experience

Task Completion

Page 6: Takeaways from the course Visual Design for User Experience

Decision Making

Task Completion

Page 7: Takeaways from the course Visual Design for User Experience

Decision Making

Task Completion

Branding & Identity

Page 8: Takeaways from the course Visual Design for User Experience
Page 9: Takeaways from the course Visual Design for User Experience

Visual design principles

Page 10: Takeaways from the course Visual Design for User Experience

Visual design principles

Contrast

Page 11: Takeaways from the course Visual Design for User Experience

Visual design principles

ContrastTypography

Page 12: Takeaways from the course Visual Design for User Experience

Visual design principles

ContrastTypography

Rhythm

Page 13: Takeaways from the course Visual Design for User Experience
Page 14: Takeaways from the course Visual Design for User Experience

Theoretical Frameworks

Page 15: Takeaways from the course Visual Design for User Experience

Gestalt

Theoretical Frameworks

Page 16: Takeaways from the course Visual Design for User Experience

GestaltSemiotics

Theoretical Frameworks

Page 17: Takeaways from the course Visual Design for User Experience

GestaltSemioticsRhetoric

Theoretical Frameworks

Page 18: Takeaways from the course Visual Design for User Experience
Page 19: Takeaways from the course Visual Design for User Experience

Meaning and Experience

Page 20: Takeaways from the course Visual Design for User Experience

Meaning and Experience

Visual transformations

Page 21: Takeaways from the course Visual Design for User Experience

Meaning and Experience

Visual transformations

Page 22: Takeaways from the course Visual Design for User Experience

Meaning and Experience

Visual transformationsIcon, Index, and Symbol

Page 23: Takeaways from the course Visual Design for User Experience

Meaning and Experience

Visual transformationsIcon, Index, and Symbol

Metaphor and Metonymy

Page 24: Takeaways from the course Visual Design for User Experience
Page 25: Takeaways from the course Visual Design for User Experience
Page 26: Takeaways from the course Visual Design for User Experience

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

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

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

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

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

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

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

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

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

Thanks!

@omitzec