<aside> 💡 *Students should gain a more in-depth understanding of using prototyping and animation tools, include smart animate, overlays, overflow behaviors and transitions.

Written by Myles Domingo*

</aside>

📝 Lecture Agenda

Advanced Prototyping

• Recap (10 min)
• Advanced Prototyping (20 min)
• Smart Animate (25 min)
• Demos (15 min)
• Wrap-up/action items (10 min)

📕 Readings

• Proper Use of Animation in UX
  • Why is proper animation important?
  • What is the purpose of easing in animation?
• Designing Smart Animate
  • Did you learn anything new not covered in lecture?
  • What are "patterns" and why are they important?
• https://blog.prototypr.io/6-animation-guidelines-for-ux-design-74c90eb5e47a

🌱 Homework

Open-Ended Prototyping Assignment

• Goals: become experienced with advanced prototyping and animation techniques.

• UX: recreate (or create your own) part of an application flow

• Creative:

  • creating a looping animation of your favorite character
  • create a dynamic landing page illustration

• Requirements —

  • Gather and collect an inspiration board. (3-4 images) ? (to give example)
    • Sources — dribbble, behance, figma community
  • Have at least 5-6 non-redundant states / animation frames.
  • Implement 2-3 non-click transitions.
  • Use non-linear timings effectively.
  • Have a transition state to restart the animation / prototype.

  Homework Instructions

🛠 Lab

Advanced Smart Home Prototyping