Designing animated GIFs: getting started guide for UI designers
Easy to make and fun to share, GIFs are the perfect way to communicate with your audience. Here’s how to design animated GIFs
Whether you’re the kind of person who pronounces it jif doesn’t really matter. You’ll have seen them all over the internet.
They’re in the Buzzfeed articles that keep you up until the late hours of the night. They populate all manner of blogs from beauty to finance, they dominate social media and they’re even found in handy tutorials.
They are so popular that you could even say that they are the language of the web.
The GIF has transformed the way we communicate with each other online and has played a significant role in shaping the culture of the 21st century.
What better way to pay homage to the humble GIF than a getting started guide? In this post, Justinmind will explain how to design animated GIFs, including a little history, and a few tips and tricks for making the most of them in your design process.
What is a GIF?
A GIF, more formally known as graphics interchange format, is an animated image of sorts. They were created almost 30 years (really, that long?) ago by computer scientist and all around genius Steve Wilhite.
GIFs are simply a bunch of images sliced together that play repeatedly in your browser. The reason for their widespread use and popularity was because of their relatively small file size.
This small size was useful because they didn’t take a lifetime to download, even when your modem was busy making those strange dial-up sounds.
Why use GIFs?
Aside from the fact there’s one for almost every opportunity, using GIFs are a way to boost engagement. They tell stories without needing any explanation or enhance a message even further.
Consider using GIFs in your marketing and design efforts because they can:
- Provide extra context to your message
- Show your personality (everyone has their favorite GIFs… right?)
- Tell people you’ve got your pulse on internet culture
What makes a good animated GIF?
GIFs, quite frankly, are awesome. They’re great for engaging your audience, getting a giggle and conveying a message. Short, snappy and to the point, the GIF is a powerful weapon in online communication.
But, how does one design animated GIFs well? Here’s a few tips make your GIFs a success:
- Good GIFs have good resolution. No-one likes grainy.
- Maintain a small file size. Some websites have size restrictions.
- Keep a low frame rate for smoothness.
- Have it between 2 and 4 seconds long. This isn’t a short movie.
4 tools that make creating GIFs easy
Crafting a GIF isn’t a difficult process. In fact, there are a few methods that you can take when making your own, for example, whether you want to make it in an app or on the web. Here are some popular tools to get you started on your GIF making journey:
Gifs.com
Clean interface and intuitive to use, Gifs lets you create Gifs out of pre-made content from your favorite websites. It supports YouTube, Vine and Facebook videos. All you need to do is copy the URL and you’re on your way.
Giphy.com
Our go to is Giphy, which is a search engine for GIFs. IF you already have a GIF in mind, then you’re probably going to find it on Giphy. If not, well, it’s easy to use and lets you share your GIFs as soon as you make them.
And then I was like
Create some original content using your webcam on And then I was like. The website allows you be the star of the show. Talk about taking selfies to the next level…
RecordIt
RecordIt is great if you have a feature you want to show off in your product. RecordIt will record a selected part of your screen which you can then edit as you see fit. The tutorials make using RecordIt easy to understand and in no time you’ll be a GIF master.
Design your own animated GIFs
If you want to go renegade and make your own GIF instead of relying on the tools above, you can always fire up Adobe Photoshop. Photoshop surprisingly lets you make your own GIFs in a matter of minutes.
It’s common to take a video and make a GIF from that. You can make a video using RecordIt above or ScreenFlow, another screen grabbing app, which has animation tools that you can take advantage of.
What Photoshop does is take your series of photos and makes a loop. You can also make a GIF from a short video in Photoshop, too.
To get started, follow this tutorial by Adobe.
Importing GIFs into your interactive prototypes
When it comes to making your prototypes pop, you can embed animated GIFs into your interactive prototypes with Justinmind.
You need to make your own GIF, using the software of your choice (hint: use the tools above) and create a static GIF of the first frame which will be displayed until an Event is triggered.
Then set an Event on the UI element which will trigger the animation to start. You’ll want to use a Set Value event, select your image then set the image path to use your animated GIF.
Conclusion
GIFs are a great way to show personality, convey a message or simply to have a little bit of fun online. They’ll add flavor to your marketing communications and humanize your brand. Start making your own today with the tools listed above and become a GIF whizz in no time.
