The idea behind this exercise is to explore how animation can be used to engage users on a web site or in an application. It should be a splash screen that welcomes users to your client's site.
You will develop an animation using Google Web Designer. You should extend the look and feel of the graphics you have already developed.
Here are some resources you may find useful:
https://www.google.com/webdesigner/ (download GWD)
https://www.youtube.com/user/googlewebdesigner (GWD documentation)
https://cssanimation.rocks/principles/ (animation principles applied to the web)
https://medium.com/inspiration-supply/icons-animations-8e0539f8857e (examples of animated icons)
https://blog.tubikstudio.com/web-animation/ (examples of animated web sites)
Your splash screen should be 3 - 5 seconds of animation. The animation can loop, of course, possibly with a link to load a web site, as shown in class.
When using GWD, remember to publish the animation locally, and then move the resulting directory to Google drive, and link to the directory from your documentation (which should be shared with uidev@cs.stonybrook.edu). Include a screen shot of the animation in your documentation. Email the link to uidev@cs.stonybrook.edu with the URL of your animation page. Type "Animation" in the subject line.
Rubric
1. Followed the instructions:
• An animation was uploaded as specified above, and a link to the animation or URL was emailed to uidev@cs.stonybrook.edu.
2. Met the design criteria:
• Animation extends the look and feel of the graphics already developed.
• Some element of the 12 principles of animation was employed (squash and stretch, ease-in ease-out, overlapping action, etc)
• The frame rate is appropriate (animation runs smoothly)
• Good technical execution (crisp edges, clean shapes)
That’s 5 criteria, or approximately 2 points each.