Week 5 of my web design class brings me to the conclusion of my banner project! The last element that was added was animation. First and foremost, we read a few tidbits of information including this link;
http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/
This link goes over the 12 basic principles of animation, which are as following;
- Squash and stretch
- Anticipation
- Staging
- Straight ahead and pose-to-pose
- Follow through and overlapping action
- Slow in and out
- Arcs
- Secondary action
- Timing
- Exaggeration
- Solid Drawing
- Appeal
Now I won’t bore you with explaining every single one, that is what I put the link above for so you can read away. What I chose to use is the ‘follow through and overlapping action’ principle. This is the idea of different objects moving at different rates. Instead of one action following another in, they work in tandem with each other. My banner is right below! You may have to do a quick refresh in the event you can’t see the animation, it is set to not repeat.
My final banner!
There are a lot more changes to the banner, including:
- The inclusion of a sun on the left, to help set a focal point
- The green of the grass made dark to help with contrast
- The black stems made thinner to match the strokes of the type
This took longer than expected, the sun was what fixed my biggest problem; setting up a focal point, as I struggle with it for atleast a hour before it clicked. I think it works really well. The alternative was having a sort of wind sway for the flowers, but that is time consuming with my current skill-set in Fireworks, so perhaps another time.
Michael's Great College Adventure 