Line25

Creative Uses of Animated GIFs to Present UI Designs

Read the full post

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 colour, but also with all the transitions, gestures and animations of a completed app.

Speedcam App Animation by Jakub Antalik

Speedcam App Animation by Jakub Antalik

First Shot in Chapps by Dmitriy Chuta

First Shot in Chapps by Dmitriy Chuta

iOS 7 Animation by Fabio Basile

iOS 7 Animation by Fabio Basile

Life Minimal App GIF by Budi Tanrim

Life Minimal App GIF by Budi Tanrim

Weather Rebound GIF by Chris Slowik

Weather Rebound GIF by Chris Slowik

Weather by Beard Chicken

Weather by Beard Chicken

iWatch Mock-Up by Thomas Bogner

iWatch Mock-Up by Thomas Bogner

GIF Animation by Sergey Valiukh

GIF Animation by Sergey Valiukh

Abracadabra App by Sergey Valiukh

Abracadabra App by Sergey Valiukh

Cat Napper! by Kevin Martin

Cat Napper! by Kevin Martin

AgenceMe Work Page by Barthelemy Chalvet

AgenceMe Work Page by Barthelemy Chalvet

AgenceMe Dashboard by Barthelemy Chalvet

AgenceMe Dashboard by Barthelemy Chalvet

Vk Concept for iOS7 by Ilya Dmitruk

Vk Concept for iOS7 by Ilya Dmitruk

AgenceMe Account by Barthelemy Chalvet

AgenceMe Account by Barthelemy Chalvet

Covert Inbox by Creativedash

Covert Inbox by Creativedash

Delete Task and Assign Task in Action by Tobs

Delete Task and Assign Task in Action by Tobs

Soccer Analytics by Monterosa

Soccer Analytics by Monterosa

Salesforce Tour by Mark Geyer

Salesforce Tour by Mark Geyer

Animation Test by Jamie Heuze

Animation Test by Jamie Heuze

myChat App Concept by Nikolay Kuchkarov

myChat App Concept by Nikolay Kuchkarov

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

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

19 Comments

  1. Ghostkashak says:

    Nice, article. What software did they use? Is it AE and some vector graphics?

    • I know After Effects is their tool of choice, but I’m afraid I have no idea on the actual process!

      • Mike says:

        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.

  2. Miguel says:

    Wow, these are great! thanks for sharing.

  3. Vic says:

    Awesome animations, these are really creative.I will try something in PS6, it has great animation tools for gif creation.

  4. Marce says:

    Que buen articulo!!
    Que geniales trabajos!!
    Saludos desde México

  5. Rao says:

    very elegant examples. Thanks for compiling.

  6. Giancarlo says:

    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 :)

  7. 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!

  8. Scott says:

    Who would of thought – the animated gif making a comeback. Very Inspiring!

  9. Great Article. I am New Blogger, Your All Tips is Really Helpful for me. Thank you very much for Sharing.

  10. Robby says:

    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.

  11. 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.

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

  13. Matt says:

    Been wanting to give this a go but not amazing at AE. However, have a look at the below link, has a free bundle you can use!

    http://ui8.net/showcase-template

  14. Alvi says:

    Great collection of UI designs, Chris!
    Thanks for sharing nice article :)

  15. Anoop menon says:

    Wow this is simply awesome. Thanks a lot man.

  16. Birgit says:

    It sure would be nice to know more about the process. Great collection!

  17. Debarpan says:

    These designs are so nice,a great share indeed.

Sorry, comments are now closed