Showcasing UI Interaction Design with Animated GIFs

Monday, March 30, 2015

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


The post Showcasing UI Interaction Design with Animated GIFs appeared first on Line25.







Source: http://ift.tt/1HWhQLH

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading