Advertisement
The Web in Motion: animation's impact on UI and web design
May. 23, 2016•0 likes•2,139 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Design
My keynote from Front Trends 2016 in Warsaw was all about where web animation has come from, where it's going, and why it's so important to the future of UI and web design.
Rachel NaborsFollow
Animation AmbassadorAdvertisement
The Web in Motion: animation's impact on UI and web design
- @RachelNabors .com
- AirBnBApp
- airbnb.com
- AmazonCartApp
- amazon.com
- DuolingoApp
- duolingo.com
- the web in motion with @RachelNabors
- The Past, Present, and Future of Web Anima6on • How anima5on helps our users • Where has web anima5on been • And how this impacts how we build the web
- The High Road through the Brain’s GPU
- !me loca!on Animation is a visual representation of a rate of change over time.
- We can use anima6on to indicate an element’s… Direction Solidity Momentum
- Relationships Structure Cause & Effect These combine to reinforce…
- RachelNabors.com
- Jump Cut From film, when the camera cuts directly to a different perspec7ve.
- InnerSanctum,1948
- DropdowncourtesyofCodrops.
- In-betweening From anima7on, extrapola7ng between two key frames.
- What just happened?
- ScottE.HudsonandJohnT.Stasko (1993) “By offloading interpreta6on of changes to the perceptual system, anima6on allows the user to con6nue thinking about the task domain, with no need to shiC contexts to the interface domain. By elimina6ng sudden visual changes, anima6on lessens the chance that the user is surprised.”
- WindowsCEMobilePhoneUI
- TouchPhone…with…stylus…
- Animacy How “alive” something appears to be.
- It’sAlive!AnimateMotionCaptures Attention(2010) “(T)hese speeded responses appeared to be due to the perceived animacy of the objects… We conclude that animate mo6on does indeed capture visual aKen6on.”
- If you want someone to notice something, make it bright and jiggly.
- cracked.com/article_15239_the-5-most- annoying-banner-ads-internet_p5.html
- Animacy and our Cone of Vision
- When everything vies for our attention, nothing commands our attention.
- A Brief History of Web Animation
- Birth of SMIL, 1999 SMIL
- Birth of CSS Animations and Transitions, 2009 CSS Transi6ons CSS Anima6ons
- CSS Transi6ons CSS Anima6ons SMIL Seriously? Internet Explorer’s Reaction
- One API to Rule Them All CSS Transi6ons CSS Anima6ons SMIL ?
- Some years later…
- ? Web Anima6ons API CSS Transi6ons CSS Anima6ons SMIL
- CSS Transi6ons CSS Anima6ons SMIL ? Web Anima6ons API la mort de SMIL, 2015
- cdpn.io/MwYMJe
- cdpn.io/GZpREz
- cdpn.io/PNYGZQ
- rachelnabors.com/waapi
- Support for the Web Animations API Let’s do this. Well, if you’re serious.
- github.com/web-animations/web-animations-js
- The Impact of Motion on the Web
- Firefox’stoolsat DevToolsChallenger.com
- Chrome’sanimaRontooling
- Sites using CSS anima6ons and transi6ons • animation 37.2037% • webkit-animation 39.8729% • transition 51.0801% • webkit-transition 45.6491% • justify-content 40.0321% • text-transform 51.9612% chromestatus.com/metrics/css/popularity
- mojs.io
- snapsvg.io
- d3js.org
- threejs.org
- greensock.com
- ibm.com/design
- LightningDesignSystem.com
- Storyboards
- StoryboardforFerdinandtheBulltakenatthe DisneyFamilyHomeMuseum
- Internal use storyboard for DevToolsChallenger.com
- Mystoryboardtemplate goo.gl/PyBXI7
- Animatics
- “An animation is worth a thousand meetings.”
- SpaceUnicornanimaRcusedwithpermission ofBrianneDrouhardaka@potatofarmgirl
- loadingspinnerideafromlunch
- Animatics are NOT deliverables.
- Prototypes
- invisionapp.com
- principleformac.com
- framerjs.com
- Moving Forward
- alovelikepi.com
- google.com/design/spec/motion
- DuolingoApp
- duolingo.com
- Animation belongs to all of us now. Let us set the web in motion together. WebAnimationWeekly.com slack.AnimationAtWork.com @RachelNabors .com
Advertisement