10 microinteractions that will inspire your next project

To help get you rocking and rolling on your next project, we’ve collected 10 of our favorite microinteractions on Dribbble. And all of them were created using InVision Studio.

InVision
InVision
Jan 11, 2019 · 3 min read

I appreciate the small things in life: a greeting smile from my neighbor, a tiny postcard from my mom, or a loyalty stamp card from my favorite coffee shop. When it comes to design, I always get excited by these same tiny details: meaningful transitions, cute animations, and microinteractions.

Let’s cut to the chase: What *are* microinteractions? According to Dan Saffer, “microinteractions are contained product moments that revolve around a single use case — they have one main task.” So far, so good.

But now imagine a world without them. What if the little bell in your Facebook app didn’t jump when opening the app to indicate you have new notifications? What if the loading symbol of your favorite ecommerce website stopped rotating?

It’s the attention to detail that differs a great website from an ordinary and — let’s be honest — boring one. To help get you rocking and rolling on your next project, we’ve collected 10 of our favorite microinteractions on Dribbble. And all of them were created using InVision Studio.

Hamburgers in motion

Image for post
Image for post

By Matthieu Souteyrand

Keep your eye on the I…X…III…

Dude, where’s my disk?

Image for post
Image for post

By Szilard Nagy

Car windows, micro-sim cards, or disks? Either way — delightful interaction, created by Szilard Nagy.

Follow the sign

Image for post
Image for post

By Ansell Leitao

Improve your navigation with this grand three-bar exit transformation.

Show us how you bounce

Image for post
Image for post

By Oxygenna

Hover interactions can be a great way to engage customers with the product. Beautiful coloring doesn’t hurt.

Drag…and snap

By Yancy Min

Highlight an element’s interactivity with its own microinteraction.

Send ’em up, bring ’em down

Image for post
Image for post

By Camille Raviart

Insert some movement and create some emotions.

Draw it out

Image for post
Image for post

By Jake Deakin

Explore icon animation as a way of calling attention and adding delight.

Space is the place

Image for post
Image for post

By Bojan Mesar

Could this astronaut to surfer animation be any cooler?

Welcome to my world

Image for post
Image for post

By Althaf Roshan

This welcome loader for Althaf Roshan’s personal website creates a beautiful experience for visitors.

Oops, I 404ed again

Image for post
Image for post

By Akhil Krishnan

Who said 404 pages need to be boring and static?

Type it out, type it out

Image for post
Image for post

By Julia Vedenyapina.

EnVision this as a microinteraction while waiting for a website to load.

All interactions were created with InVision Studio. Download it here and start creating now!

Image for post
Image for post

Inside Design

Stories by designers. For designers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store