As web designers, we need to make sure we keep
our skills fresh and up-to-date. We don’t need to follow every trend
that comes along (like long shadows) but we do need to keep learning and
improving our skills as the web grows and matures.
One exciting new development that is beginning to gather steam in the
web design industry is animation. More and more companies are looking
to animation for their apps or websites as a way to delight their users,
standout from competitors and improve the usability of their products.Another reason animation is in high demand is because of the Web’s recent focus on flat design. Flat design, while overall a very positive thing, has a few problems that are driving people to look for ways to improve upon it.
Flat design has a few problems
Today, more and more companies are adopting the minimal “flat design” aesthetic. Websites are beginning to look very similar with not much to differentiate between brands. This opens up the opportunity for designers to explore other means of making their website engaging and exciting to their users.This is where animation comes in. Animation is like salt on your fries; without it, they are a little bland and lacking flavor. By animating different elements of your design you can add a bit of excitement and delight your users with creative and helpful animations.
Another problem with flat design is that users can lose context of what will happen when they interact with a website/app. When buttons stop looking like buttons or other things like badges begin to look similar, people are confused about what will happen when they click on them.
We can solve this problem by designing different animations that occur when elements are hovered or clicked on, Colin Garven’s submit button for example:
This can be a bit of a problem if users are not given some notification or clear sign that the page has changed or loaded new content. If the page is saved we need to see something that will let us know the app is working and has saved our work in the background.
Animation is a great way to inform users when different events occur.
Let’s say you have a list of registered people for your next meetup or conference. When new people register, you add them to the list in real-time with node.js so they never have to refresh the page. Great, that will be really useful for our users. But now how are people supposed to know when a new person registers?
What we need is a little animation to let people viewing know that a person has registered. What about dropping-in a little alert to the top of the page with a message letting you know they just registered? Or how about fading-in the new person to the list and giving them a little blue highlight so we can tell they are new?
All these things are subtle effects that can really make the difference between an okay product and something that really delights your users.
The Web is maturing
Remember the days of IE6 and Netscape? The days when we had to worry if everyone had JavaScript turned on and we built our sites with HTML tables?We have come a long way since then with great HTML5 support, CSS3, and responsive design, and they’ve all combined to give us amazing options when it comes to animating the Web.
CSS3 animation
Today, every major browser supports most or all of the standard CSS3 features recommended by the W3C. This gives us, as designers, huge potential to create simple yet compelling animations that breath life into otherwise static websites.
Keyframe Animations: keyframes are a powerful CSS3 feature that allow you to create custom animation sequences. They allow you to control the timing and easing, the duration, any delay needed, how many times the duration repeats, which direction it animates and more. You can even declare multiple animations on an html element.
SVG graphics
One of the awesome new features of the “mature web” is SVG support. We can finally start using images that scale well for different size and resolution screens. Not only that, but SVG’s are way more powerful than png images because you can interact with them in CSS and JS. This gives us the ability to create impressive animations that were previously only able with animated gif’s or Flash.Take a look at this animated gif that has been recreated in CSS and SVG:
HTML5 canvas
Another exciting technology that has had full browser support for a while is HTML5 Canvas. The canvas element is used to draw graphics on the web.It is similar to SVG but differs in several ways. First off, it is a raster format rather than vector. This means it performs better for more complex drawings and animations, but doesn’t scale well for high resolution screens.
One big downside of canvas is that it doesn’t have manipulatable DOM elements. This means every time you want to change the drawing or animate it, you need to redraw the image.
In spite of these downsides, canvas is still a great tool that can be used for more complex animations and drawings.
Javascript animation libraries
Even though CSS3 animations are becoming more and more powerful, there are still some cases for using Javascript animations.More and more libraries appear all the time that give us amazing animation at a fraction of the resource cost we used to pay for Javascript animation.
Snap.svg: snap.svg is designed to make working with your SVG assets as easy as jQuery makes working with the DOM. It features a super rich animation library with easy event handling that helps you bring your SVG’s to life.
Greensock GSAP: gsap.js is a suite of professional tools for scripted, high-performance HTML5 animations that work in all major browsers. It is 20x faster than jQuery and even faster than CSS3 animations in some cases. Super-buttery 60fps here we come!
Transit: transit.js is a jQuery library that replaces the jQuery animation module with super-smooth CSS transitions & transforms. The great part is that is uses the same syntax as jQuery’s $(‘…’).animate.
Velocity: velocity.js is similar to Transit in that it uses the same syntax as jQuery so all you have to do is include the library and replace jQuery’s animate with .velocity().
scrollReveal: scrollReveal is an open-source js library that helps you create and maintain how page elements fade-in, triggered by when they enter the viewport.
Bounce.js: bounce.js is a new tool for generating exciting CSS3 powered keyframe animations.
Improved hardware in mobile devices
One final reason animation is really taking off is that today’s devices are getting more and more powerful with every new release.The iPhone 5s, for example, has a super powered a7 chip in it.
According to Extreme Tech:, “The CPU is not just a gradual evolution of its Swift predecessor — it’s an entirely different beast that’s actually more akin to a “big core” Intel or AMD CPU than a conventional “small core” CPU.”
Also, with iOS8, Apple will release Metal, which is a very powerful 3d rending engine that will give you the ability to create desktop-like games that run on mobile devices.
Some Android phone companies like LG have even built devices with as much as 3gb of ram, the LG G3 being just one. I have a laptop from a few years back that barely has that much.
All this to say that not only can we create animations that run great on desktop computers, but the same animations will work great on phones, tablets and other mobile devices.
Animations are helpful to users
Animations can really help make your product, app or website more usable and accepted by your users. This is because:- they give context to what is happening;
- they keep people engaged;
- they help your company standout;
- people enjoy them.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon