Noah Levin

Product Designer / Prototyping Teacher

1139

--

Sample Project: FizzBuzz!

Exercise 1: Buzz Lightyear Click Animation

3222bba5

For this click animation, I decided to get a little fancy and animate Buzz's wings outward when you click him using the scaleX property to make it look more real. I also used a gradient for the background image, and faded it's opacity during each click. Hope you like the result!

Exercise 2: Google Docs Walkthrough

b2ee4781

For the walkthrough, I got a little fancy by animating the images and text when you transition between each page, which I think makes the onboarding flow feel just a bit more interesting.

Exercise 3: Custom Interactive To-Do List

1e452fbc

For the final exercise, I kept things pretty simple. One detail I added was to make the prototype reversable by clicking on the item again once it's in the "done" position. This way you can play with the prototype repeatedly without needing to refresh!

Comments

Please sign in or sign up to comment.