Can web animation save flat design?

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:

Lastly, one final problem I want to touch on is informing the user when a change takes place. Today, many modern web apps are using powerful tools like AngularJs and Node.js to build “pageless, live-updating” apps. Think of Gmail: in order to get a new email you never have to refresh the page; it simply pops in when someone sends you a new email.

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.

Transitions: CSS Transitions give you the ability to perform a simple transition between two different states. Say you have a simple button that you want to change colors and push down slightly on hover, a transition would be perfect for this use-case.

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:

One thing SVG animation can really be useful for is creating animated graphs and charts that can scale to any size. Checkout this simple example on JSFiddle:

The possibilities for SVGs are almost endless!

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.

Think of Kickstarter – a great video explaining your campaign can be the difference between being wildly successful, and barely getting noticed. The best campaigns use powerful videos with a well-crafted story to generate excitement and build momentum for their product or campaign. Animation can do the same for your website or app. It can mean the difference between people being engaged and raving about your app, and another product landing in the app graveyard.

Caleb Mellas

Caleb Mellas is an entrepreneur and the founder of Webinsation – a web consulting and design firm that works with a large range of clients who want to improve/grow their business. When building websites he approaches projects from a business perspective to see what a clients true needs are. Growing revenue, increasing engagement, and building better brands are his passion. HTML5, Sass, Js, Git, Wordpress, SublimeText, Sketch and a 27" iMac are some of his favorite tools.