Gif and Tell

Demonstrate your amazing user interface ideas with a simple animated GIF.


I’ve added items to the list below based on feedback in the comments. Cheers!

These days the use of animated GIFs as a form of communication is nothing new. Why say, “I’m in a super good mood,” when you could just show this. What is fairly new is how developers and designers are using GIFs to present how a UI could unfold.

Here's a quick GIF illustrating the "Sticky" effect.

All too often I’ve tried to explain visual design ideas to teammates, product managers or other stakeholders and have failed miserably. Instead of relying on lengthy blocks of text and screenshots to explain a new interface, I can use an animated GIF to show how that interface works. Interactions, such as page scrolling coupled with a “sticky” element, are difficult to capture with just plain screenshots and a few words, but if you present with a animated GIF you get a clear example of the sticky interface.

So how does one achieve such awesomeness? It’s really not that hard, there are plenty of free and open source tools that not only record and create GIFs but also make it super easy to share. Here’s a few to get you started.

If you have a similar workflow or tool in mind, please share it in the comments below. Now go forth and record something amazing!