Creative Uses of Animated GIFs to Present UI Designs

Home » Articles » Creative Uses of Animated GIFs to Present UI Designs

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

With the abundance of gestures and animations being implemented into mobile apps designers are facing the tricky problem of how you present these UI concepts.

Storyboards and static screenshots don’t show any dynamism, whereas wireframes are visually plain and boring. There is one solution that seems to be catching on; the reinvention of the animated GIF. Today’s post rounds up 20 creative examples of how the traditional GIF is now being used to create some amazing UI concepts, presenting the design not only in full

Today’s post rounds up 20 creative examples of how the traditional GIFs are now being used to create some amazing UI concepts, presenting the design not only in full color but also with all the transitions, gestures and animations of a completed app.

Speedcam App Animation by Jakub Antalik

This is the animation for a new speed cam app created by the designer for Sygic.com.

Speedcam App Animation by Jakub Antalik

First Shot in Chapps by Dmitriy Chuta

All designers love the freedom to play with animations and fancy ways of interaction. Check out this cool app’s animations and be inspired!

First Shot in Chapps uses of animated gifs

iOS 7 Animation by Fabio Basile

This is a simple iOS7 animation for a profile / social media app. It has a smooth transition for the menu appearance.

iOS 7 Animation by Fabio Basile

Life Minimal App GIF by Budi Tanrim

This is a great animation created for a minimal app. It contains a dashboard and a really unique, icon-based menu.

Life Minimal App GIF by Budi Tanrim

Weather Rebound GIF by Chris Slowik

We love how this weather app was created. The animations create a very nice atmosphere. Have you noticed that it rains on the screen?

Weather Rebound GIF by Chris Slowik

Weather by Beard Chicken

This is another cool weather app, with a dark theme and cool effects for the temperature graph and also the precipitations.

Weather uses of animated gifs

iWatch Mock-Up by Thomas Bogner

This designer had the idea of wrapping the interface around the wrist and have something like the click wheel rotating around my arm. We like it!

iWatch Mock-Up by Thomas Bogner

GIF Animation by Sergey Valiukh

Here’s a graphical brain exercise of screen transitions animation skills. It looks great for a transport / map app.

GIF Animation by Sergey Valiukh

Abracadabra App by Sergey Valiukh

This animation is quite complicated even though it looks very beautiful. We like it but user experience should be tested first before launching it.

Abracadabra App uses of animated gifs

CRNT Favorites by Raleigh Felton

This app UI design lets you pull down to get your favorite locations. The navigation needs some refining though.

CRNT Favorites UI Interaction Design

AgenceMe Work Page by Barthelemy Chalvet

This is a simple animation created for a responsive website’s work page. The images have smooth transitions and everything fits perfectly in the layout.

AgenceMe Work Page uses of animated gifs

AgenceMe Dashboard by Barthelemy Chalvet

Here’s a simple app dashboard design with great effects for the graphs that show the stats.

AgenceMe Dashboard animated gifs

Vk Concept for iOS7 by Ilya Dmitruk

This was a contest for the best design of iOS7 for vk.com. So, here is the designer’s result.

Vk Concept for iOS7 animated gifs

AgenceMe Account by Barthelemy Chalvet

Check out the smooth transitions for switching from one page to another in this app. Great for switching from the feed, to account, to edit page, in any kind of app.

AgenceMe Account by Barthelemy Chalvet

Covert Inbox by Creativedash

This app’s transitions shows you what happens when you get a new message and when you tap on something. Once you tap to view a message you swipe to the right to go back to the inbox.

Covert Inbox by Creativedash

Delete Task and Assign Task in Action by Tobs

This is a cool animation for how to delete a task and assign a task to the teammate in action.

Delete Task and Assign Task in Action by Tobs

Soccer Analytics by Monterosa

This is a really unique app design for a soccer applications which shows you analytics in a really creative way.

Soccer Analytics animated gifs

Salesforce Tour by Mark Geyer

Here’s an on-boarding tour concept for Salesforce. Users are able to swipe through the tour (at their own pace) before diving into the app.

Salesforce Tour animated gifs

Animation Test by Jamie Heuze

This is an animation test perfect for a blog or a review app. The menu opens up beautifully.

Animation Test by Jamie Heuze

myChat App Concept by Nikolay Kuchkarov

This is the myChat Android app concept for my.com. It has sleek transitions and a great layout.

myChat App Concept by Nikolay Kuchkarov

Author
Iggy
Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

21 thoughts on “Creative Uses of Animated GIFs to Present UI Designs”

  1. We do conversion optimizing for a living and product display (demo) is a great way to improve conversions.

    Awesome examples, simple to create and most importantly they will help convert by interacting with their target.

    Good job on the gallery.

    Reply
  2. amazing user experience presentation you sharing and i love such way to convince our client with real-time output. Appreciated Chris

    Reply
  3. Chris you are always great on your blog. Every time when I read your blog post I really learn new ideas and tips. I really appreciate your blog the post and would love to request you to keep on posting.
    Thank you so much.

    Reply
  4. Definitely a cool way to display bit’s and pieces of an app or whatever, but there’s got to be a lighter way to do it. The file sizes are pretty big for each one of those.

    Did anyone, back in the day, used to make animated gif ad banner’s for their sites? I forget the name of the software but it used to come packaged with Photoshop and you’d do it frame by frame.

    Reply
  5. This is an great collection, Chris. I see these on Dribbble and am always in awe. There are some really nice color palettes in here too. Thanks for sharing!

    Reply
  6. Ironic! I was looking at these earlier today (Monday) and wondering how they’re put together. It would be so great for prototyping! And, now look at your post :)

    Reply
      • In After Effects you can create a composition the size of the device screen and do the UI animation in it. Then create a second composition with the device mock-up and add the composition with the UI animation to the second composition. To line the animation up just turn on 3D support and line it up with the mock-up. Once you have that you can export it to a video file and use Photoshop to export it into an animated gif.

        Not that I’ve actually done one of these UI animations, I’m just familiar with After Effects and this would be my best guess as to how they would go about it.

        Reply

Leave a Comment

Verified by MonsterInsights