• Follow us on Twitter @smoostercom
  • Folge uns auf Facebook /smoosterde
  • Abonniere den smooster RSS Feed

Web Design Inspiration: Small Animations Can Have Big Effects

2014.06.25 by

Small Animations Can Have Big Effects

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.

Slide-out Navigation bei Nixon

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.

Slide-Out Navigation bei CFYE Magazine

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.

Slide-Out Navigation bei Bethel University

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.

Slide-Out Navigation bei The Hunger Games

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.

Scroll-activated animations

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.

Scrollaktivierte Animationen bei Freshmail

Freshmail’s website uses an animation in flat design to help explain their service piece by piece.

Scrollaktivierte Animationen bei Lixpen

The animations on the website of Lixpen showcase the structure and functions of their pen and make it come alive.

Scrollaktivierte Animationen bei markt

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.

Scrollaktivierte Animationen bei Relio

Relio’s animations are very restrained. They connect the individual sections of the website seamlessly.

Hover animations

The hover effect in navigation is not a new invention. The following sites employ it extensively, often in a grid design.

Hover-Animationen bei Sleeping Duck

The website of Sleeping Duck sets the tone through the mouseover effects of different areas.

Hover-Animationen bei Edinburgh Zoo

Edinburgh Zoo uses various small animations with the graphics and photos on the site, so that some links are more prominent than others.

Hover-Effekte bei Swansea University

Thanks to the hover effects on the website of Swansea University, visitors learn more about individual links and can easily tell interviews from articles.

Hover-Animationen bei Names for Change

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?

Dieser animierte Pfeil auf der Startseite signalisiert, dass unter dem Headerbild noch mehr Informationen sind und leitet so den Besucher weiter.

This animated arrow on our home page indicates to the visitor that there is more information under the header image.

Außerdem findest du auch auf der Startseite unter dem Punkt “Designe völlig frei” einen animierten Einblick in das CMS.

On the same page, you will find under the heading "design totally free" an animated view of the CMS.

Wenn du die Subnavigation verwendest um zu einem der Unterpunkte in der Seite Designer zu springen gibt es eine kleine Animation für die “Ankunft” bei dem gewünschten Punkt.

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.

comments powered by Disqus