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:

animated-submit-button

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.

chefs

 

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.

css-creatures

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.

css-3d-clouds

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:

jumping-dolphin-svg-animation

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:

svg-graph

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.

animated-transitions

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.

svg-animation_xbox-one

 

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.

css-pagefold
0 shares
  • Phil Jackson

    Good old fashioned ‘texture’ is what will save flat design. Imagine a world without depth, shadow, contrast, evocative imagery. That’s the highly self-imposed, over-constrained world of flat design.

    Animating flat elements is like recreating those old fashioned flat, jerky cartoons of the 1970s. Would you like to go back to those or enjoy the immesively immersive and involving animated tv shows and movies of today?

    I’d like to think flat design has had it’s day. It was proposed for (mainly) technical reason (better bandwidth utilisation, easier to code without imagery). Our job as designers and creators is to think outside the box and bring back that immersive world we live in and enjoy.

    Animation is a start but I woul like to see scalable vectors brought to pixel level so that imagery can again be used creatively. Here are a couple of examples of how: http://www.gizmag.com/vector-video-codec/25481/ and http://www.extremetech.com/extreme/143130-vector-vengeance-british-researchers-claim-they-can-kill-the-pixel-within-five-years

    • Caleb

      Thanks for sharing your thoughts Phil!

      Yes, I too would like to see a world with no pixels where graphics would look crystal clear no matter what device you were on.

      But in order to create a truly immersive world like 3d movies etc. we really need to see more designers using creative animations on the web. Animations that help provide the user with feedback, rather than getting in the way like the scrolling marques of the 90’s.

    • http://www.casitadelcuco.es/ Geert De Decker

      I am with you Phil, scalable vectors will replace all pixel buttons in a few years. But the vector video you shared is what I never could imagine.

    • colinwiseman

      I don’t think it has had its day yet. But I do think it is overused. Hopefully with the animation that is appearing we can reign back in uniqueness.

      I do prefer old cartoons to the modern day 3D extravaganzas you get. Tom n Jerry ftw.

  • http://www.gettingfrontpage.com/ GettingFront PageCom

    “Angular” technology is definitely creating impact on web development projects. But I must agree with you that with animation files we can make a website exciting and unique. But we have to keep in mind one thing. Websites should not take long time to open due to animated files added in them.

    • Caleb

      Totally agree with you! We should not be using animation purely for animation sake, but because it will improve the overall experience of using a product/website. The days of massively over animated flash websites are something we need to remember and never go back to in the future.

      • http://evoked.us Evan Jacobs

        And the infamous flash loading screens :)

  • Rodrigo

    I wonder what is the best animation approach after flash? Is it javascript or css3? What are sites like these using? http://designbywhatmatters.com/

    Does responsive design matters more than a good animated site? Due to the growing mobile market? Should animation be used in smartphones? Any good experiences of new sites?

    • Caleb

      Hey Rodrigo, the site you mentioned is using a combination of Javascript and CSS3. It uses css to animate the items and Javascript to target when to apply the animation, like ‘on-click’, or ‘on-scroll’.

      Thanks or sharing the link to the site. It is a great example of how Animation can really help the user-experience. Imagine trying to use it without any of those helpful/creative animations – everything would be super jerky and disruptive.

      Yes, I would say Responsive Design matters more for most sites that created an “animated site”.

      As far as animations on your phone, think of many of your favorite apps you use regularly. Most apps have animations sprinkled throughout them that really add to the experience and help you perform different tasks easier. It should be the same with our websites. No matter what device you are on, the experience should be very user-friendly.

      Animations are just one way to improve the experience of a website.

      • http://animatron.com Catherine Arizan

        Completely agree about animation and phone apps – simple and subtle animated effects are a great way to provide visual feedback to users (which is especially important for apps, which have to communicate quite a lot of info within a 4 inch screen). Rachel Nabors wrote a great piece about web animation a while ago, where she talks about various ways animation can help convey information: http://alistapart.com/article/web-animation-at-work.

        Shameless plug: I work for a startup called Animatron, we’re developing a visual editor for HTML5 (i.e., mobile-friendly) animation – http://www.animatron.com.

      • Caleb

        Catherine, thanks for sharing the link to that article by Rachel Nabors. It is a great supplement to some of the things I mentioned here.

        One of the things that’s great about WebDesignerDepot is that they use subtle animations effects all over the site to add interest and improve usability. For an example, hover over the post images on the homepage.

  • http://evoked.us Evan Jacobs

    Can’t say enough good things about GSAP. I’ve used TweenMin/Max on a few different projects and has consistently performed better than equivalent CSS animations. Even in IE!

    • Caleb

      That’s great Evan. I know for a while I was a proponent of only using CSS animations in my designs, because it was somehow “more pure”. But now I see that JS combined with CSS when available is better, and sometimes just pure JS is the best depending on the animation needed.

      Do you have any examples of sites/projects you’ve used GSAP on?

      • http://evoked.us Evan Jacobs

        Nothing public at the moment :-) Mostly prototyping work for my former employer for pitch purposes.

  • Mathias S.

    Exactly what i think :) that’s why i used some gifs, css3 animations (and the awesome animation.css from justin aguilar) to give life to my personnal website: http://www.liondoc.fr :)

    I think subtle animations are the soul of a modern webdesign, clearly.

    • Caleb

      So true Mathias – animations really breathe life into an otherwise static website.

      By the way, nice job on the animations you’ve included on your website.
      The only thing I would recommend to improve them is to animate them a little faster. Some of your animations take 3s to finish which makes the site feel a little slow/unresponsive. I would shorten that to 1s to make things feel a bit more snappy and flow better with your design.

      Keep up the good work. Just make sure your animation actually do something to improve the user experience, rather than just animating to build something fun/eye-popping.

  • http://www.casitadelcuco.es/ Geert De Decker

    Not only animations, SVG as well

  • Chrispynutt

    I guess it depends.

    If you are using animation as a crutch because you are so insistent against using light and shadow or texture, then just nooo.

    This reminds me of Apple’s insistence that one button is more than enough for a mouse. Their pride wouldn’t allow them to use two buttons, so they made a button that could sense which side you clicked on it. Massive over engineering to solve a problem of pride.

    However animation is becoming cheaper and cheaper in terms of cost of device speed and bandwidth. We are not talking about some ugly flash behemoth chewing through data and CPU cycles.

    So use animation on its own merits, don’t use it as crutch because you are following flat as a trend rather than for usability,

    • Caleb

      Appreciate your thoughts @christophernutt:disqus. Whether or not you create “flat design” website or not, you still should use animation to improve the overall experience for your user. It just becomes a little more necessary with simpler, flatter designs.

      Yes, it is exciting that animation libraries and devices are getting faster!

  • sivheng

    nice

  • Andrew Hersh

    I tried to warn people that flat design wasn’t a good idea. Here we are, a year or so later, and the web is probably 90% websites that look identical to one another except for the logo at the top of the page.

    The future of web design is unfortunately, in a way, out of the hands of web designers. I’ve said it before, and I’ll say it again, photographs and 3d interactivity is the future of web design, and for all the reasons you stated above plus a very, VERY important one that you didn’t mention, but I see a couple other people have.

    As the United States slooooooowly catches up with the rest of the world where bandwidth is concerned, you will see an increasingly greater emphasis on photography, 3d interactivity, and video. Building websites will be less a feat of design and more a feat of coding.

    • Caleb

      Hey Andrew, thanks for sharing your thoughts!

      Yes, it is interesting that the U.S.A is behind the rest of the world in bandwidth speeds. But this could actually be a blessing in disguise depending on your perspective. I find that when I know I have a lot of speed to work with, I am not very careful about optimizing a site for max-speed. Although, don’t get me wrong, I still would love to get faster network speeds across the board here.

      Yes, photography and video are two huge trends in web design. It will be interesting to see how things play out, because many designers know how to create typography-based or graphic creation designs, but they don’t know how to shoot great photos or videos. This may be a great new area for designers to get into as the web moves that way.

      • Andrew Hersh

        Well, seeing as the US is the only developed country with awful bandwidth problems, if we got our act together, optimizing for site speed wouldn’t be so much of a problem.

        It is absolutely a great new area for designers to get into. That fact alone will keep the price on Nikon D3200s strong for another year or so. ;-)

  • Dariel

    You could try AniJS(http://anijs.github.io/) and AniJS Studio(http://anijs.github.io/studio/) Tha are amazing CSS3 animations tools

  • http://scrollrevealjs.org Julian Lloyd

    Thanks for featuring scrollReveal.js! I’ve dropped the hammer, and launched v2.0.1 (at the time of writing this), which has tons of improvements, bug fixes and a new wiki.

    http://scrollrevealjs.org

    Cheers!