Zeus.host Blog

Web Design Blog for discusions of web design practices.

Animation in Web Design

Animation in Web Design

20 September 2018

It’s important to demonstrate your website’s value quickly. Your website will be judged in about 10 seconds, so it’s important to engage your users early. Motion on your website can draw attention, educate and provide enjoyment. From full-screen moving images to subtle hover effects, animation is popping up everywhere.

Animation in web design has grown quite popular. But when considering animations, you should ask yourself: Will they add to the user experience or take away from it? A good animation can improve the user’s experience. Subtle animation can guide the user without changing the page’s aesthetic.

Animation should be smooth and seamless, not erratic or mechanical. They need to serve a purpose and not get in the way of the content.

The key to effective animation is moderation. View these examples of animation that works without being overbearing:

Animations can have many benefits, such as:

  • They can keep information organized and clear by hiding information or functions such as menus at the side or bottom of a site, which can be called upon when needed.
  • They can help guide visitors through the website experience without changing the aesthetics.
  • Simplistic, flat, modern design has reduced many visual cues on webpages.
  • Tell you how to do things, draw attention to webpage elements or guide visitors through a process.
  • They can aesthetically tell a story, keeping visitors engaged for longer.
  • They can draw attention to a specific area or action to encourage a user to engage with your site further.
  • They are useful for high consideration zones of your site, with a call-to-action or highlighting specific information you wish to communicate.

Animations can be used for:

  1. Hover effects and tool tips

    Simple CSS animations provide subtle interactions on hover action, including image or button hovers. Hover actions and tooltips help with navigation or offer additional information. However, animations won’t work on mobile or touchscreen devices, so valuable information must be displayed in other ways.

  2. SVG animations

    SVGs allow you to animate and scale anything, from a simple vector icon to an advanced illustration. SVG’s have good browser support and creates more ways to create new animations.

  3. Parallax

    Parallax animations create better visual storytelling and engages the user more. They can create depth, add layers to the design and provide a more interactive & dynamic web experience. Page and navigation transitions give the effect of a new page loading rather than typical static page loading.

  4. Interactive forms

    Interactive forms increase the odds that users will want to fill out forms and further engage with and continue your relationship with the brand.

The advancement of CSS3, HTML5, SVG elements, and lightweight JavaScript, have provided smoother and more sophisticated animations, which are more mobile-friendly than ever.

  • Bounce.js - a free library so you create and embed animations into CSS.
  • Animatron - a trial version of software mainly used to create videos and graphics. It’s fast and easy-to-use.
  • Animate.css - great for making very basic animations.
  • CodePen - offers easy HTML, CSS and JS editors.

If your interested in hiring a web designer to build you an online store please look no further Zeus.host and get hosting and web design services in one. Get an Online Store Build easily and professionally by Zeus.Host. Contact us for a quote.