Web Design Inspiration: Small Animations Can Have Big Effects
2014.06.25 by Sebastian Maier
The use of animations and other motion effects including elaborate parallax effects and large videos has grown steadily. Websites with large animations such as videos are impressive and memorable. However, there are customers who don’t like these large animations and projects in which they are unsuitable.
The silent stars are the small animations that accompany the visitor through the site without being obtrusive.
These low-key animations are sometimes an integral part of site management, sometimes playful decorative elements that are not absolutely necessary but are used to make the site easier to navigate or focus the visitor’s attention on specific items. There are many different kinds of animations, the three most common at the moment being the slide effect in navigation, scroll-activated animations and hover animations. Browse the sites for inspiration for your next project.
Slide effect in navigation
The slide effect in navigation has been used mostly in mobile sites so far. You can find out more about it in my article about mobile navigation.
Nixon’s navigation looks exactly the same as that in many responsive sites. When the navigation is open, there is a function that allows you to close it directly, which is recommended for mobile websites too.
CFYE Magazine’s navigation responds to both clicks and mouseovers. When the navigation opens up, the rest of the site shifts to one side. The individual points have a lot of space around them and are therefore easy to navigate on mobile touch devices.
Bethel uses a slide effect for the search function in the navigation. The navigation in this instance opens up from the right side, fitting in with the position of the search link.
Although the website for the third installment of the Hunger Games series uses many large animations such as video backgrounds, one of the low-key animations happens when you mouse over the navigation: the navigation opens up over the left-hand side of the site without shifting the site to one side.
These animations are activated by scrolling and guide the visitor through the page at their own pace. Their linear process lends itself well to telling a story.
Freshmail’s website uses an animation in flat design to help explain their service piece by piece.
The animations on the website of Lixpen showcase the structure and functions of their pen and make it come alive.
The South African online shop app uses animations in order to present individual features of their service. The comic-like style here is common in such animations.
Relio’s animations are very restrained. They connect the individual sections of the website seamlessly.
The hover effect in navigation is not a new invention. The following sites employ it extensively, often in a grid design.
The website of Sleeping Duck sets the tone through the mouseover effects of different areas.
Edinburgh Zoo uses various small animations with the graphics and photos on the site, so that some links are more prominent than others.
Thanks to the hover effects on the website of Swansea University, visitors learn more about individual links and can easily tell interviews from articles.
The animations on Names for Change introduce some variety into the strict grid design and give the individual items more zip.
These sites show that animations do not need to be large to be effective. We use a number of small animations on our own website too to make it more friendly. Can you find them all?
This animated arrow on our home page indicates to the visitor that there is more information under the header image.
On the same page, you will find under the heading "design totally free" an animated view of the CMS.
If you use the sub-navigation and click the sub-point “DESIGNER”, you will see a small animation.
What small animations have you used in your projects? Let me know the websites with animations that you particularly like.