Designing Motion at Web Design Day

Yay! This past weekend was another awesome Web Design Day. It was so much fun to spend the day with all our awesome attendees, sponsors and speakers! A huge thanks goes out to everyone who was there and made it such an awesome event!

My talk at Web Design Day was Designing Motion. This was my first time doing this talk and I psyched to get so much positive feedback from it. Especially since it was first thing in the morning!

I showed a ton of little video clips analyzing various examples of animation for UI and animation for experience on the web today. Needless to say, my keynote file was HUGE!

Slides!

Without the videos and me babbling away, they might not be the most useful, but never the less, I’ve posted my slides on speaker deck and slideshare. I do plan on writing a post or two covering some of the content in a way that makes more sense than lonely slides over the next few days. I’ll post those here as they happen too.

Example Files

During my session I used these files to help demonstrate the different default easing options available in CSS. I’ve posted the example pages here, and don’t forget about all your custom easing options! I showed the ceaser tool for CSS in my talk, but there are lots of other implementations of the Penner easing equations as well.

CSS easing options examples (All the examples are linked from the list at the top of the page)

Sites I Talked About

In my talk, I said that I wanted you guys to form your own opinions about the animation on the sites we looked at. Here’s a list of the sites I mentioned, take a look and try them out for yourself. It’s more fun when it’s not just a video clip!

Questions, Comments or just things about cats? Let’s chat! Find me on twitter or email.