Moodboard for web animators

How do you craft memorable ui design and animations? You study from the master. This blog features anything well-designed in the realm of digital experiences. Examples include, but not limited to preloaders, slider, scroll-triggered animation, and good old typesettings.

[ui-moodboard]

Fun text shaking animation as seen in the intro of the ultimate comfy anime Yuru Camp.

[ui-moodboard]

One of the most intuitively-designed and navigation-friendly blog feed, as seen on EBD Journal.

[ui-moodboard]

What is a creative agency for ocean? I don’t know, but I do know that this is such an fun animated transition into a landing page.

[ui-moodboard]

Cheeky, colorful text styling and animation sprinkled with ever-fun emojis. They are made with Canvas.

As seen on Reed agency.

[ui-moodboard]

A fun on-brand image drag animation as seen on fashion brand Barzagli from Japan.

[ui-moodboard]

Clear navigation bolstered by Immaculate font pairings. Who knows a copywriter’s website can be so well-designed?

As seen on Shawn Binder ‘s homepage.

[ui-moodboard]

A dancy custom loader full of swag as seen on Faf Swag.

[ui-moodboard]

There are many image-on-hover effects on the Internet, but this one by Collage Crafting is probably one of the smoothest, slickest thing I’ve found. Great animation work.

[ui-moodboard]

Love this interactive infographic from Eurovet. The main graphics are SVGs, but the interactive lines are made with Canvas.

If you are doubting whether you can do things a little more meaningful than star fields and blobs in HTML5 Canvas, this is an answer.

[ui-moodboard]

I like how Caleb Barclay managed to put a spin on the all too common header menu through good-old typesetting and lines.

Oh, and he didn’t forget to hint at potential clients what to do at the end of the scroll instead of concluding with a boring legal disclaimer.

[ui-moodboard]

An elegant, seductive loader paired with a curvy, exuberant display serif aptly named “Voyage”. Visitors can tell they are in for a good road trip before they even see the full website.

This is what a well-designed, on-brand preloader can do to your products.

As seen on Miti Navi

[ui-moodboard]

I love scroll animation, but it’s refreshing to see a cleanly, minimally, quietly designed web page devoid of sparkly animation.

[ui-moodboard]

Let’s take a moment to appreciate this aesthetic header design. All you need is good eyes for a sans-serif with good variety of widths and nicely-positioned lines.

You can’t go wrong with black typography over off-white background color. The inktrap is a sweety cherry hat adds more character to a simple design.

[ui-moodboard]

In this day and age, it’s so easy for have your name forgotten. I like how Flambette sticks its logo on the sidebar of its web page. Users can scroll anywhere and they are still aware that they are on Flambette’s website.

The navigation menu and social media links are also on the sidebar, but they are of smaller size, placed closer to the bottom and rotated, which indicates their secondary importance in the hierarchy.

Thanks to this meticulous intention, the seven clickable links on the website never feel cluttered.

[ui-moodboard]

Intro for a virtual reality tennis game animated in Greensock. I love the diagonal lines representing the court, which makes the layout more unexpected and memorable. The sound of the ball hitting the court is also well-matched with its movement.

Overall, amazing animation work. Everyone, check it out.

[ui-moodboard]

I’m smitten with this clean and simple typography-driven preloader showing progress on art direction Cedrick Lachot.