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.

Freehand by InVision
Inside Design
3 min readJan 11, 2019

--

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

By Matthieu Souteyrand

Keep your eye on the I…X…III…

Dude, where’s my disk?

By Szilard Nagy

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

Follow the sign

By Ansell Leitao

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

Show us how you bounce

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

By Camille Raviart

Insert some movement and create some emotions.

Draw it out

By Jake Deakin

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

Space is the place

By Bojan Mesar

Could this astronaut to surfer animation be any cooler?

Welcome to my world

By Althaf Roshan

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

Oops, I 404ed again

By Akhil Krishnan

Who said 404 pages need to be boring and static?

Type it out, type it out

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!

--

--