designing motion

Post on 05-Jul-2015

788 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

(As seen at Web Design Day 2011) "With great power comes great responsibility" is something you hear often about making things move on the modern web. Well, if that's the case, then we had better really mean it!We'll look at how to get the most out of your CSS transitions and transforms by going beyond just start and end points and applying our design eye to those ever important in-between parts. That's where the real power of animation lies. We want elegant and meaningful animation, not obtrusive or meaningless fluff! What can we borrow from traditional animation? And what do we need to make our own rules for? We'll find some answers and (I hope) you'll never think of a simple transition the same again.

TRANSCRIPT

Designing Motion

EVENTS!MAKING THINGS!DESIGN!

Designing Motion

DetailsDetails

Details

with great

POWERcomes

GREATresponsibility

{...}

Animation for UI

OPEN, CLOSE!BUTTONS, LINKS!BASED ON USER INPUT

FADES

Animation for Experience

BREAK IT DOWN

{...}

So So Many Options!How do we decide?

What are you imitating?

Metaphor

Light as a feather

Stiff as a board

Weight & Physics

The idea that various aspects of the character’s attributes come together to just feel “right”.

Appeal

“... it’s easy to forget that when you’re building a game you’re not just building a set of rules or a pile of content. You’re crafting and experience...

Animation happens to be my weapon of choice to achieve this”  

[Mika Mobile blog post]

The internet is not a cartoon.

(usually)

Yeah,I changed my mind…

We kinda care about our code…

Hi, I’m a link!

Hi, I’m a link!

Hi, I’m a link!

YAY! New Things!

BOO! New Things!

Transference

Time Signatures

and with that…

THANKS!Files & Slides:

valhead.com/WDD2011

Let’s Chat:

val@valhead.com • @vlh

top related