10 Websites with Inspiring Micro-Interactions

While micro-interactions might seem like small, almost insignificant details of a website, they are, in fact, an extremely important part of the UX. These minuscule animations improve the browsing experience, clarify how certain things function, and provide feedback to the users. They also make everything on a site appear more natural and more alive. Without them, websites would be a static and boring collection of text and images, and users would feel like mere observers instead of active participants.

Nowadays, micro-interactions are a huge part of web design. Both designers and developers spend a lot of time perfecting them and making them as creative and unique as possible. This has led to a large number of websites that seem overly polished, perhaps even overdesigned. But when done right, micro-interactions strengthen a website’s aesthetic and give us a feeling that every single detail was carefully considered. The following 10 websites do just that – they approach micro-interactions in an inspiring and unique way and show just how much these barely noticeable animations can contribute to the overall browsing experience.

1. MA True Cannabis

The first example on our list is a website where almost no element appears to be static. When you visit the home page of MA True Cannabis, you’re greeted with a large, animated product and a few floating 3D rendered objects. You’ll notice that, on hover, each of these elements becomes animated in a different way, and a fun message encircles them.

But the designers and creative front-end developers paid just as much attention to the micro-interactions as they did to this hero section. Everything is intuitive at a glance. When you hover over a link, a fade animation occurs, letting you know the text is clickable. CTA buttons have a brief underline animation that draws attention to them. The slider navigation is handled without any unnecessary arrows, lines or numbers. Instead, there’s a fluid, monochrome shape at each edge of the active slide. When you hover on the shape, it becomes larger and starts moving faster, inviting you to click. Once you do, the color fills the entire screen and transitions into the next slide. Additionally, the bullet navigation in the lower left corner lets us know what we can expect to see on the next slide – another product.

The animation style of the bullets complements the fluid slider navigation style. When we hover on a bullet or switch to the next slide, the spherical background seamlessly shifts places, morphing in to the adjacent bullet.

2. Alban Mezino

The website of Alban Mezino, the creative front-end developer, is essentially quite simple and minimalistic. It’s all about typography, really. However, this website has been beautifully enriched with emoticons and a cursor that, whenever we hover over a link or icon, transforms into a random emoji.

The typography on the site is also handled masterfully. Some words are in bold, others in red. This is intentionally done to draw attention to the most important snippets of text. At the top of the page, we’re shown a set of large, alternating keywords that describe the author and his projects.

All of these elements come together to form a coherent picture. The emoticons and the text complement each other and create a fun, yet professional impression of Mr. Mezino and his creative work.

3. Spire Global

Spire Global is a company that uses satellites to provide aviation, weather, and maritime analytics and tracking. Their website is the work of a very successful creative agency called Locomotive, which is well known for delivering interesting solutions in terms of micro-interactions.

As the home page loads, the first impression you get is that the website’s aesthetics resembles the cutting-edge interfaces companies like Spire Global use in their day-today work. This distinctly hi-tech atmosphere is largely due to carefully executed micro-interactions. At the very top, where there’s talk about data & analytics from orbit, the text is accompanied by an animated, purely decorative sinuous line, resembling that of data charts. Above the text, there’s also a clock with swiftly-moving clock hands. The line and the clock, combined with the way the titles load and how images appear, create the vibe of continuity and progress. And as we continue to browse the website, we begin to feel as if we’ve just accessed a program that’s in the midst of performing an important action.

Micro-interactions have been wonderfully handled, from the text link hovers and the sticky Reach Us section, to the fast-loading dropdown menus. As you scroll down the page, right when you reach the Meet the Data section, the mouse cursor morphs into a large circle containing the message – Drag, inviting you to move the cursor left and right. This action enables you to learn more about the projects the company focuses on as well as to download sample data.

The sheer amount of attention paid to every detail makes this website feel just as fluid as we imagine are the programs Spire Global uses in their work.

4. Elivi Hotels Skiathos

A cursor is an excellent tool for pointing out what’s clickable on a website. Better yet, it can be used to hint at what’s going to happen once a button or link is clicked. We’ve included several websites that use cursors in innovative ways on our list. But one of the most interesting ones is the online presentation for the luxury Elivi hotel in Skiathos.

The reactive cursor, which is initially spherical, changes its shape depending on what it’s hovered on. This serves to demonstrate exactly what elements on the site are interactive and clickable. For example, as we move our cursor over a simple, textual button, the sphere turns into a line. The same thing happens as you hover over other links.

When we move the cursor over the round anchor link at the bottom of the slider, the cursor remains spherical, but it becomes bigger. On the other hand, as we hover it over a menu icon, navigation, and certain buttons (such as the Book Now button), it morphs into a square.

5. Femme & Fierce

Femme & Fierce is a fashion retailer that sells clothes from international independent brands. The company is known for vibrant colors, loud prints and contemporary designs, and their website reflects that. They’ve opted for serif fonts, which give off a 70s vibe, and a combo of pink and red colors that dominates the layouts. However, it’s the interactions that are, to quote the website’s authors:

“the shining stars of Femme and Fierce, adding bags of personality with sassy copy to match, that completes a memorable user experience.”

And they really do shine. Just look how the product hovers make browsing the site more fun and interesting. As you hover over each item, you get to see it from different angles. Also, charming tiny graphic elements (like kisses, lipsticks, eyes, lollypops, etc.) appear around the photo, making the entire website appear more vibrant and amusing.

Once you decide to make a purchase, you’ll notice the cart icon also comes to life as you add an item to it.

6. Purée Maison

Purée Maison is a Parisian creative agency with a great website. The preloader alone makes a strong impression. It’s a beautifully animated doodle that hints at what awaits us when the website loads – clean design and typography set between large, bright spaces.

The anchor in the hero slider isn’t static. Instead, it jiggles slightly, retaining the vibe of the preloader.

The same vibe continues as you hover over the interactive links. An animated doodle covers the letters, and a list with related content appears next to the interactive link. All of this serves to enhance the website’s functionality, which under no circumstances should be jeopardized.

When you hover over images, an animated, bouncy line appears around them, so users are not bored for one second while they scroll down the homepage.

At the very bottom there’s a question: Do you have a project? Once you move the mouse over it, a doodle in the same style of the preloader appears. It says Hey! – clearly announcing the action you can perform here, which is to contact the agency.

7. Ultranoir

Another element that can greatly emphasize micro-interactions on a website is sound. You don’t necessarily have to separate sound from visual elements and animations. In fact, all these elements can work in symbiosis and complement each other. The Ultranoir website is the perfect example of this.

The first thing you hear when the site loads is a mystical, almost unsettling sound. Then you notice a small cursor, which sort of stirs the surface of the page as you move it around. At the bottom of the screen is a message: click and hold. If you do what the message tells you, the sound is slightly muted and you’re transported to a project list. But only temporarily. The moment you let go of the mouse button, the active project is loaded and the eerie sound returns.

The reactive cursor also changes its shape (from a solid point to a larger outline circle) in response to the actions you take. And each action has a distinct sound that accompanies it.

This happens whenever you hover over the menu icon, social icons, the sound on/off switcher, the menu items, etc. Also, as you click on each of these elements, you’ll hear a new sound.

8. Synerg’hetic

Synerg’hetic is a digital agency from France that has some very creative micro-interactions on their website. For example, at the bottom of the homepage there’s a CTA button in the form of an interactive emoticon. The closer you get to the button, the bigger the smile on the emoji, and vice versa. As the cursor moves further away, the emoji loses its smile and becomes emotionless.

As you hover over the button, a huge smile appears on the emoji’s face and it also winks at you. The whole thing is very intuitive and it’s pretty clear the emoji expects some sort of interaction from you.

Once you click on it, you’ll end up on the Contact page. But even without reading the message that surrounds the smiley face, you can guess that a click will take you to the Contact page, because, the moment you hover over the emoji, it establishes contact by looking straight at you.

9. Buddha Pizza

The Buddha Pizza website is quite distinctive. It’s done in a completely cartoonish, goofy style. There are loads of icons scattered throughout the site (in the left menu, the categories section, on CTA buttons), each with its own, distinct hover animation.

The main graphic element on the site, a pizza slice with a big eye, is also interactive – the eye follows the movement of your cursor. The shopping cart is equally interesting. Once you decided which pizza to buy and click on the purchase button, a small image of your pizza will slide into the cart.

The micro-interactions have been handled in an extremely creative manner, but in no way do they cloud the main function of this website, which is pizza delivery.

The idiosyncrasy of the Buddha Pizza website has been awarded several times. It’s gotten Special Kudos on CSS Design Awards and an Honorable Mention on Awwwards.

10. Jonny McLaughlin

Closing our list, Jonny McLaughlin’s website isn’t quite like any of the previous examples. It’s not exactly flooded with micro-interactions. You won’t see them as you hover over a CTA button, a link, or any other clickable element. However, when you click anywhere on the screen, a tigers paw suddenly appears and breaks apart everything that’s in its way. It mixes up the words, graphics and the links, scattering them all over the place. The more you click on the page, the more chaos ensues. The content is captivating as it is, but this sort of interaction makes users feel as if they’re playing a game while browsing the site.

Here, the content is actually subordinate to the interaction, it’s an answer to it. And the content you end up seeing depends solely on your actions.

This kind of a website can be inspiring to designers and creative front-end developers, as it shows just how far you can go with your micro-interactions. Of course, the way the standard elements of a website are designed and animated matters. However, you can make things even more appealing by incorporating fun interactions and arranging elements in an interesting manner, such as here, where the entire website has a game-y feel.

Conclusion

And that ends our list of 10 websites with inspiring micro-interactions. We hope these examples have given you some new ideas for your next project. Remember, there are no limits to what you can do and how inventive you can get with your micro-interactions. Which is why they’re such a useful tool to have in your creative toolkit. Whether you’re looking to enhance the functionality of your website, or just want to make it more fun and inviting, micro-interactions give you a great and above all original way to achieve your goals.