Wink & Nudge: Cognitive Insights for Awesome CSS3 Transitions |
|
| Event | Interactive 2011 |
| Format | Dual |
| Organizer | Marcin Wichary – Google |
| Description | As CSS3 gains more and more foothold across the Web, it's giving us animation superpowers in the browser. Will you use CSS3 transitions for good or for awesome? At their worst, animations and transitions can be gratuitous, distracting, and downright annoying. But they can also add meaning and delight – a nicely designed and timed movement can catch attention, give a sense of continuity, mimic something familiar from real life, or show users how slippery things in the ether relate to each other. In the real world, events are connected by transitions and animations, and our cognitive system has evolved to pick up meanings from them. Ever since the first zoetrope was invented 2,000 years ago, cartoonists have been studying this to make their actions convincing and their characters come to life. Can their findings and experiences be applied to your new HTML tags and CSS parameters? In this talk, you’ll go beyond the nuts and bolts of CSS3 parameters and learn how to use CSS3 for awesome. We’ll show: · How perception, cognition, and classical animation can help your transitions · Some of the best and worst transitions on the Web, and what makes them tick · A toolkit of demos and code snippets specs to help you convey the meanings you intend Should your sidebars behave like the Road Runner, a 15-ton anvil, or a freight train headed West? What about icons, drop-down menus, contact lists? Tune in to find out! |
| Questions Answered |
|
| Level | Intermediate |
| Category | HTML5 |
| Tags | animations, CSS3, transitions |