Animated Gifs is a New Way of Good App Presentation

Everything has a habit to return, and gif animations that for a long time lost its dominance, popularity and utility among developers has taken a fighting stance nowadays. Although it is still the same array of images that are consistently shown, yet there are no more rough plain transitions between frames that in the good old days recreated a sense of a quite abrupt video with lack of quality. At the moment gifs can be effectively populated with various eye-catching effects and smooth transitions that give the final animation a sleek and sophisticated appearance.

UI/UX developers have quickly reassessed the whole potential of such small yet truly effective and interpretative animated pictures. All we know how it can be difficult, irritatingly and time-consuming sometimes to explain to clients or end-users how the app will look like in the end; and no spectacular screenshots of topnotch, beautifully-crafted user interface designs together with extensive descriptions and effects “shown on the fingers” won’t do the trick. Only video or these short fully animated gifs can easily uncover work flows and convey all the charm of an “alive” app, effectively demonstrating an interaction between various functional components.

So by a nice irony, our toolkit of presentation instruments has been recently replenished with a new tool, which actually all this time was nearby.

Today we have compiled a fresh collection of animated gifs that pleasantly show work flows of various mobile applications.

First shot in Chapps by Dmitriy Chuta – Here you can enjoy the whole beauty of a fully animated set of photo cards with various professionals. The gif reveals a lovely approach of alternative and visually pleasing searching process through a database.

First shot in Chapps

App concept by Bastien Leprince – Here the primary focus of attention is on the dragging filters that are built into a map widget. All the presented functional screens and widgets perfectly interact with each other, providing users with a smooth work flow.

App concept

FaceScan app concept by George Frigo – Although the animation lasts only 12 seconds it is quite sufficient to clearly express a main idea of the app. For those who want to take a glance at the full version the UI designer also provides an avi file.

FaceScan app concept

WIP Discover Music app by Alexander van Ravestyn – As the nameplate implies, the designer wants to direct users’ attention towards the process of navigating through the multimedia content, which quite predictably ends up on a well-crafted screen with a music player.

Discover Music app

Speedcam app animation by Jakub Antalík – The designer does a great job of presenting its app in action. The gif nicely showcases a part of a speedcam app in all its glory.

Speedcam app animation

Workflow Payment by Barthelemy Chalvet – The team exhibits several gifs dedicated to its new app. The one that is presented below establishes a focal point on the payment process that looks quite neat and handy. Other gifs cast a light upon timeline, pay/charge, fiche and account processes.

Workflow Payment

Dashag Tour by Barthelemy Chalvet – Here the team has displayed only a small gif that is aimed to remind others about their previous project. If you want to thoroughly familiarize yourself with the app you can visit theirs official website that includes a massive gif animation that reveals almost all functional screens.

Dashag Tour

Gif Animation by Sergey Valiukh – This topnotch screen with pleasant and carefully-crafted transition animations uncovers a small process of navigating through a basic map widget and a main menu. Everything is nicely connected together via lovely effects.

gif animaton

Walkthrough Animation by Devin Ruppert – The gif points out a welcome screen that has a slider with several dynamic slides and panel with login buttons. Everything is brought to life in order to effectively showcase what you can expect from this app.

Walkthrough Animation

Interaction overview by Mihnea Zamfir – This is a quite short yet effective animation that was originally created to walk a client through a simple process of adding and deleting items from the card directory.

Interaction overview

Delete task and assign task to your teammate in action by Tobs – The gif is aimed to demonstrate a standard swipe technique in action that effectively contributes to the whole aesthetics and makes the app look alive, modern and alluring.

Delete task and assign task

Team Messages by Jan Losert – The team has provided its readers with an extensive explanatory material that is intended to reveal not only static screenshots with descriptions but also video and a huge gif animation that shows how the app will be actually working.

Menu interaction GIF by Ben Dunn – Here the animated gif serves as a tool for displaying a whole beauty of a basic menu in action that elegantly slides out from the left side and presents all necessary links.

Menu interaction

Poppin – Adding a task by Ed Sansom – The app has a lovely circular vibe and elegant aesthetics of flat style that is nicely highlighted by smooth effects united in a one small gif.

Adding a task

My First UI Animation by Dennis Terrey – The gif tries to exemplify how a basic slide menu can look clean, stylish and subtle.

UI Animation

What’s Next for Zite by Danny Spitzer-Cohn – I want to complete our collection with this lovely gif animation that definitely evokes some pleasant old-timey feelings with its classy and traditional utilization.

Next for Zite

Those who want to try their hands on such sort of presentations we have also included several freebies with gif animations that can be easily disassembled into components.

Freebie: flat preloaders by PixelBuddha

Freebie: flat preloaders

Precomposed Touch Gestures by Areus Wade

Precomposed Touch Gestures

Conclusion

Video editing programs such as Adobe After Effects fraught with many opportunities and possibilities that solve lots of problems concerning interaction between app creators and clients/end-users. Gifs that can be used as short explanatory animations can efficiently reveal work flows for better understanding of what is going on.

What do you think about such way of presentation? Are short animated gifs able to clearly communicate an idea of an app?

Nataly Birch

I'm an internet entrepreneur and an amateur web designer and developer from Sevastopol. In my spare time I read books, play board games and volleyball.

Newsletter

12 Comments
  1. Mordechai Levi Mar 27, 3:49 pm

    It would be awesome if you guys could a tutorial on going from a static mockup to a gif.

    Reply
    +71
    • Lukas Kus Mar 30, 10:51 pm

      Photoshop -> after effects -> MAGIC! -> done!

      Reply
      +2
    • Sara Apr 7, 7:14 pm

      the best option is after effects, but if you don´t have enought time to learn a new tool your best choice is keynote, simple and easy :)

      Reply
      0
  2. Drazen Mokic Mar 27, 8:55 pm

    A tutorial on how to go from static to a gif like that would be great

    Reply
    +21
  3. Benjamin Mar 28, 8:27 pm

    I’ve seen the pattern wide spread specially around dribble fanboys, not that bad… not that bad..
    I think the big difference with video is that you don’t need to think about sound, though I’ve to say the GIF format barely meets todays web standards, you have to be a master craftsmen to fine tuning GIF animations, read this page about gif compression mysteries: http://www.radzone.org/tutorials/gifcomp.html

    Reply
    +1
  4. Adam Ehrheart Mar 29, 6:59 am

    Absolutely love the use of GIFs to illustrate interaction. I’ve got a nice Flipboard of these types of GIFs. If this is your things definitely check out this board.

    https://flipboard.com/section/interaction-bfr4SM

    Reply
    +7
  5. e11world Apr 3, 10:41 pm

    I would love to see a tutorial on the process of making one of these ridiculously fabulous GIFs. Great collection here.

    Reply
    +3
  6. chawki trabelsi Apr 7, 10:31 pm

    Wonderful apps and gifts animations from photoshop to after effects. It’s a nice way of presentation Nataly. I hope that all the apps in the future will be at this way.

    Reply
    0
  7. Andreas Apr 8, 6:20 am

    This Collection is Great, but I’m missing a discussion about the gif format vs alternatives like keynote, avi etc.
    Why gifs?

    Reply
    0
  8. Josh Winn Aug 20, 6:14 am

    This is an excellent collection that is an inspiring reference point. I’ve noticed the use of gifs lately for showing off new features, which is a lot more effective at conveying the nature of whatever the new thing is, as well as more enticing for the reader to click through and read more. One recent example I remember is in a MailChimp newsletter. The area of animation is very new, and exciting, for a lot of web developers and designers that have been used to more static design, and now that the browser support and tools have improved, the future is bright.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters