Advanced UI Animations

Kim

Kim

Creative Director

I’m Kim a passionate marketer | Sharing growth insights for success | Proud founder of Squibble, empowering Midlands marketers to thrive by turning clunky websites into marketing joy | Let’s fuel your journey!

Hand drawn Squibble logo

UI Animations make the web experience more interesting, interactive and entertaining and with the use of modern web technologies are being used more and more.  HTML5 has meant that animations can now be easily seen across all devices and can be scaled to any screen. 
HTML5 has largely replaced Flash although Flash is still quite widely used and isn’t going away completely any time soon.

UI Animations are commonly used at the top of a website’s homepage and generally are in the form of a slider showing links and previews of the websites content.

There are many types of UI animations though that can be utilised on a site and it’s important to pick and choose the right kind of animation for the right place that will add to your site’s story, branding or personality.

Animations can fit into one of two groups;

  1. Large scale animation. These have more impact on users and are used for interactivity. They include effects like parallax scrolling and pop-ups.
  2. Small animations. These include elements like loading bars, hover effects and spinners.  They don’t have any user interactivity and are there purely for display or informative purposes.

The most popular animation techniques

Galleries and slideshows

Perhaps the most popular and accessible type on animation in the WordPress era.  Slideshows effectively showcase multiple images, products or subjects without overloading the user.

Loading animations

These are used to keep a user entertained and informed during the loading process of a page or element.

Non-scrolling Navigation Menus

Non-scrolling or mega menus are becoming more popular as they save screen real estate and can be far more interesting than a simple drop down menu.

Hover Animations

Hover animations give feedback and feel more natural to a user when they mouse over elements on a page.

Motion Animation

Our eyes are naturally drawn to motion so animations are great for catching a user’s attention.

Scrolling

Smooth scrolling enables elements to be animated with a user controlled speed.  The animation only proceeds when a user scrolls and at the speed at which they are scrolling.

Background Animations & Videos

Animated backgrounds can look visually stunning on a website but should be used in moderation as they can be very distracting as they cover large areas.

The widespread use of WordPress with its themes and plugins has made web animation far more accessible to designers.  As more tools are available for developing HTML5 animations this trend will surely continue.

What Are Brand Guidelines?

What Are Brand Guidelines? A Comprehensive Guide to Crafting and Implementing Brand Consistency. In today’s fierce business landscape, consistent branding is paramount for success. This definitive guide unravels brand guidelines’ intricacies and...

Crafting a compelling value proposition

Crafting a compelling value proposition Words like ‘innovation’ and ‘differentiation’ are often thrown around. But at the core of these ideas that’s where the concept of the value proposition comes into play....

Navigating the Fields of UX, Graphic Design, and Web Design

Are you eager to dive into a career in UX, graphic design, or web design? Let’s delve into a thorough guide that unravels the career avenues in these dynamic domains, offering insights...