Update
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.
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.
-
LICEcap - Provides a simple interface to record anything on your screen and save that recording as a GIF. (Big thanks to my fellow RightScaler Jakub Hampl for this tip.)
-
Byzanz for Gnome - For those who prefer a Linux OS.
-
Record_it - For both OS X and Windows.
-
Gifify - A nice little shell script that converts any .MOV file to a GIF and uploads it to CloudApp for easy sharing.
-
GIF Scrubber - A Chrome extention for controlling GIFs like you would a movie. (via fellow RightScaler Ali Hosseini).
-
GifGrabber - A OS X app for quickly capturing anything on your screen (via Thibault Maekelbergh).
-
CloudApp Motion - A new feature in the media sharing app allowing super-simple GIF screen recording (Big thanks to Samuel Kraft for this tip).
If you have a similar workflow or tool in mind, please share it in the comments below. Now go forth and record something amazing!