Line25

Showcasing UI Interaction Design with Animated GIFs

Read the full post

The humble animated GIF has become a popular tool for designers to share their UI designs. How a web or app interface works is just as important as how it looks, and the animated GIF—while it lacks refinement and quality—is the most accessible file format that can be easily viewed directly in the browser, making it perfect for sharing on social sites such as Dribbble. In today’s post I showcase 20+ examples of how designers use animated GIFs to present the interactions and gestures in their UI designs.

Handsome Site Team Page by Sam Thibault

Handsome Site Team Page by Sam Thibault

Re:Designing Travel by Claudio Guglieri

Re:Designing Travel by Claudio Guglieri

Onboarding animation by Virgil Pana

Onboarding animation by Virgil Pana

Add New Content Button by Wouter de Bres

Add New Content Button by Wouter de Bres

GIF for Ribbet Controls by Tubik Studio

GIF for Ribbet Controls by Tubik Studio

CRNT Favorites by Raleigh Felton

CRNT Favorites by Raleigh Felton

Menu Animation by Nikki Clark

Menu Animation by Nikki Clark

PeopleNow Login by Patrick Johnson

PeopleNow Login by Patrick Johnson

New Rally Site by Ben Cline

New Rally Site by Ben Cline

Dropbox/Guide by UENO

Dropbox/Guide by UENO

Login & Screen by Anton Aheichanka

Login & Screen by Anton Aheichanka

Product page interaction for GSM Nation by Julien Renvoye

Product page interaction for GSM Nation by Julien Renvoye

Secret Project by Anton Aheichanka

Secret Project by Anton Aheichanka

Mixpanel Homepage Trends Design by Julien Renvoye

Mixpanel Homepage Trends Design by Julien Renvoye

90° The Last Appventure by Victor Erixon

90° The Last Appventure by Victor Erixon

Betacoin Illustrations by Linda Eliasen

Betacoin Illustrations by Linda Eliasen

New Message Animation by Jakub Antalik

New Message Animation by Jakub Antalik

Float Label Form Interaction by Matt D. Smith

Float Label Form Interaction by Matt D. Smith

Filter Menu by Anton Aheichanka

Filter Menu by Anton Aheichanka

New App Menu Interaction by Barthelemy Chalvet

New App Menu Interaction by Barthelemy Chalvet

Portrait vs Landscape by Sergey Valiukh

Portrait vs Landscape by Sergey Valiukh

Profile Screen Animation by Anton Aheichanka

Profile Screen Animation by Anton Aheichanka

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Iggy's design tutorials and articles at his Web Design Blog or follow his daily findings on Twitter.

18 Comments

  1. Kristinahughes says:

    Good to see the variety of unique UI designs..Claudio Guglieri animation is just hilarious …

  2. Hello Spooner,

    Such a nice and useful collection. This post is showing your hard work. Thanks for sharing with us.

  3. Tom says:

    Wow, really nice collection. Thanks for sharing.

  4. Amber says:

    love to see how designs are evolving day by day

  5. Excellent article! We are linking to this great article on our website.

  6. tnx a lot i like your site too much

  7. very very good website you have.

  8. Wow, really nice collection. Thanks for sharing.
    http://www.sitesazi.com

  9. Esferasoft says:

    Nice collection !!!

  10. sanjib831 says:

    Thanks Spooner for sharing this nice collection of animated GIFs. Animated GIFs are a new concept for me. Can you tell me how these GIFs are made?

  11. calipus says:

    Excellent. A great article and the last 1 is my favourite.
    Thanks a lot for sharing.

  12. A great article and the last 1 is my favourite.
    Thanks a lot for sharing.

  13. اوینیک says:

    I love “add new content button” design.

Leave a response