Creative Uses of Animated GIFs to Present UI Designs

Sunday, October 1, 2017

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.

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

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

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

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

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

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

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!

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

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

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

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.

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

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

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.

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.