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.

  • Ghostkashak

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

    • http://twitter.com/chrisspooner Chris Spooner

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

      • http://mikemollick.com Mike

        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.

  • http://websensemx.com Miguel

    Wow, these are great! thanks for sharing.

  • http://www.realxreviews.com/lovoo-app.html Vic

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

  • Marce

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

  • Rao

    very elegant examples. Thanks for compiling.

  • http://www.giancarlomarcelli.com Giancarlo

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

  • http://medialoot.com Jennifer Coyle

    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!

  • http://www.blackboxdesign.com.au Scott

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

  • http://www.computerheros.com Taswir Haider

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

  • http://robbyk.com Robby

    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.

  • https://www.dallas-designs.com/ Collaterals designs

    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.

  • http://www.tutoriallounge.com Ademarliany Rotinsulu

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

  • http://www.matthewluxford.co.uk Matt

    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

  • http://www.scoop.it/t/seputar-indonesia Alvi

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

  • http://www.confianzit.com Anoop menon

    Wow this is simply awesome. Thanks a lot man.

  • http://ice-horse.de Birgit

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

  • http://www.techtrickhome.com/ Debarpan

    These designs are so nice,a great share indeed.