Lessons from the Web Animation Workshop at Form Function & Class 8

by Ben Viernes

is how Gab Madrid, one of our speakers, defined what animation is. The speakers, Gab and Lindsey Grande Madrid, are a husband and wife team who co-founded their design studio, Color Cure. Their workshop on Web Animation at this year’s Form Function & Class conference focused on the animation process and maximizing the use of CSS to fully animate a website.

Image for post
Image for post

At the beginning of the workshop, we were shown a sample website which the speakers had created. The website was about their parody of the video game “ARMS” that they aptly named “KAMAO”. The speaker breezed through the webpage, showing the different sections of the site: the character portraits, the description of the different game modes, and even a very believable order link.

The animation process

However, before they began to actually talk about animating the website, they first talked about the animation process. The first step in the animation process is to create a plan. are some questions that you should ask yourself in order to plan out what to do for your animation.

Image for post
Image for post

Storyboarding

After creating your plan, what you do next is to create your storyboard. Storyboarding is important because it helps you visualize your animation; it allows you to draft what you want your animation to look like before actually doing it.

Storyboarding is also a good way to further improve on your plan by finding weak points or points of improvement before doing the animating.

Storyboarding and planning doesn’t necessarily have to be done digitally, as the speakers explained; you should use the medium you’re comfortable with, be it on paper or on your computer.

Animate!

After planning and storyboarding, you’re ready to animate. In the case of the workshop, what we were trying to animate was the KAMAO website that was shown at the beginning of the workshop. The speakers demonstrated how different keyframes and transitions in CSS worked to animate the assets and images used in the website.

After showing how these keyframes and transitions worked, the speakers allowed the attendees to play around with them and animate the website as they wanted.

Image for post
Image for post

Next, they talked about other tools and software, such as Animatable and Sketch, that are useful for both illustrators and animators. They also shared one of their inspirations for the sample website, which was the website of Nintendo’s Splatoon 2.

Gab also walked around the room and checked on how the audience were doing; audience members were encouraged to ask for help if they needed it.

Workshop Presentations

Near the end of the session, attendees were invited to present their work in front and show how they made use of CSS to animate.

The workshop ended with the speakers giving further tips on how to animate which included subtlety and clarity in design; they also encouraged the audience members to be confident in their works and to always let their creativity flow.



Philippine Web Designers Organization

Nurturing the local design & development community

Philippine Web Designers Organization

Written by

Volunteer nonprofit that organizes #webdesign & #frontend conferences, meetups, workshops, & other initiatives for the community 💙💛❤️ pwdo.org

Philippine Web Designers Organization

Nurturing the local design & development community

Philippine Web Designers Organization

Written by

Volunteer nonprofit that organizes #webdesign & #frontend conferences, meetups, workshops, & other initiatives for the community 💙💛❤️ pwdo.org

Philippine Web Designers Organization

Nurturing the local design & development community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store