animation for the web. what are web animations? web animations are often saved as gif, css, svg,...

Download ANIMATION FOR THE WEB. WHAT ARE WEB ANIMATIONS? Web animations are often saved as GIF, CSS, SVG, WebGL or video Ranges from simple animations (hover effects)

Post on 06-Jan-2018

217 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

WHEN DO YOU USE ANIMATION? All animation needs to serve a purpose/goal for the user and not get in the way of the content Primary reason to use animation is to increase usability (guide tool to help users navigate the website better) Animation can help to show which element is clickable Creates a flow or directs the users to what you want them to see Second reason to use animation is for aesthetic reasons Use to spark visual interest and engage users Create emotional connection between the interface and the user

TRANSCRIPT

ANIMATION FOR THE WEB WHAT ARE WEB ANIMATIONS? Web animations are often saved as GIF, CSS, SVG, WebGL or video Ranges from simple animations (hover effects) To full-screen background animations KEY: Keep it simple. Simple bits of animation can guide the user without changing the aesthetic WHEN DO YOU USE ANIMATION? All animation needs to serve a purpose/goal for the user and not get in the way of the content Primary reason to use animation is to increase usability (guide tool to help users navigate the website better) Animation can help to show which element is clickable Creates a flow or directs the users to what you want them to see Second reason to use animation is for aesthetic reasons Use to spark visual interest and engage users Create emotional connection between the interface and the user HOW DO YOU CREATE ANIMATIONS? 1.SVG (Scalable Vector Graphics) Animation 2.CSS Animation 3.jQuery Animation (JavaScript) 4.Using free open source plugins for scroll-to-animate effects 5.Software such as: Adobe Edge Animate CC, Google Web Designer, Animatron EXAMPLESThe Happy Forecast website uses beautiful interactive animation to display the social wellbeing of each postal code in London. https://y7k.com/projects Digital agencys portfolio showing the use of small simple animationsUI/UX designers website. Showcasing simple background SVG animations that trigger on scroll.Using animation to portray the brand and style of the stage and exhibition designer, Katrzyna Konkowska. Visually appealing and yet easy to navigate. https://getbeagle.co/ Proposal creation tool. Using scroll triggered animation for transitional effects. RESOURCES FOR SELF-LEARNING: A Beginners Introduction to CSS AnimationCreating SVG files: From Illustrator to the WebAnimating SVGjQuery tutorialsFree open source plugins for scroll-to-animate effects: https://github.com/jlmakes/scrollreveal.js