Week 12: Going lo-fi to hi-fi, visual design to interactive prototype

Learning Objective

By the end of this week, students will:

• Learn how to shift from wireframe to high fidelity designs.
• Learn to implement UI and graphic design skills.
• Have a high-level understanding of interaction design and animation.

Class 1

• Explore visual design options, trends, and best practices
• Work on visual design mockups

Class 2

• Apply best practices of interaction design and transition and animation for UI design to the interactive prototype.

Week 12 - Required preparation for class 1

Read

• The Building Blocks of Visual Design (opens new window)
• Review MAD9020 Week 3 lecture slides #12-46 (opens new window) & MAD9020 Week 11 slides #36-42 (opens new window)

References

• Color in Design: Influence on Users' Actions (opens new window)
• Designing for accessibility is not that hard (opens new window)
• Guide for designing better mobile apps typography (opens new window)

Lesson Slides

• Week 12-1 Lecture: Visual Design (opens new window)
• Week 12-1b In-class: Visual design (opens new window)

Week 12 - Required preparation for class 2

Read

• Micro-interactions in User Experience (opens new window)
• Creating usability with motion (opens new window)

References

• iOS Motion Guidelines (opens new window)
• Material Design Motion Guidelines (opens new window) - Motion helps make a UI expressive and easy to use.
  • Transitions Guidelines (opens new window)

Watch

• Visual Design Principles: 5 things you should know to create persuasive content (opens new window)

Lesson Slides

• Week 12-2 Lecture: Animation, transitions and interactivity (opens new window)

Reference

• Chips design guidelines for Android, iOS, Web, Flutter: Chips are compact elements that represent an input, attribute, or action. (opens new window)
• Search bars & Scope bars in iOS (opens new window)
• Designing with accessible colors (opens new window)
• Adobe color tool (opens new window)
• Do you keep both the < (back arrow) and bottom nav on the UI screen? It depends!
• M3 Typography – Applying Type (opens new window)

TODO

TODO before next week

• Read all the notes for Week 13 and watch the videos. This will help you to answer quiz questions and prepare you for the lectures and the Hybrid exercises.

Assignments

For class 1:

• 9. Visual design

For class 2:

• Complete 9. Visual design – Due by midnight
• Begin interactive visual mockups (prototype) which will be used for user testing, final presentation, and final project submission.