Solid Animated GIFs Made by Non-Designer in Under 5 Minutes
In this article, I’ll give some tips on how to quickly make a high-quality GIF file and explain why this can be useful.
Gifs is a very good approach to storytelling.
In Everhour, we practice a monthly digest email to all our customers in which we briefly describe what was changed/improved in the product over the past month.
Title + gif image + maximum of two sentences per feature. Whereas short (under 10 secs) and straight to the point GIF is our primary focus. Why?
People are very busy. Hundreds of emails fall to their Inbox every day and they simply don’t have enough time for a long read. Although they certainly want to be in the know.
We value their time and prepare an email that can be scanned really quickly and, at the same time, help the client to instantly learn about the new stuff.
If necessary, they can go to our blog later and dive into nuances. But the details on what and where something was changed and how does it look like will be caught instantly.
I will give you an example. We’ve recently slightly changed our Resource planner: added the ability to zoom in/out the grid, changed the way we switch grouping, etc. If we’d describe it with text, it would take us multiple sentences + screenshots. Gif works much better. A person can visually see how something behaves, where controls are located, etc.
Another example. We needed to deliver the new info tooltip added on the Time page, which shows how time entry was made, at what time, etc. Gif again works here very well.
The person in our team responsible for such update emails is Customer Success, not a designer. For him, to record a video and then somehow process it through Adobe After Effects or similar Pro tool is too difficult and time-consuming.
Instead, we use free tools like Recordit or LiceCAP. By the way, the first one is much better in terms of quality.
Everything is done right in the browser window which we pre-size to 1080x790. Sometimes we can also make some cosmetic changes via Inspector. And we use only Mac, because of end quality on retina.
After recording there are 2 problems left: the length and the size. As I have already mentioned, ideally a GIF should be under 10 seconds and 200–400Kb. Why show the client watch how you move the cursor through the entire screen or to wait while something is loading?
For such purposes we use https://ezgif.com/
It helps us to optimize the recorded GIF and what is especially cool to remove unnecessary frames, thereby reducing the file size and time.
That’s basically it. Making a Gif file like attached usually takes us under 5 minutes. And IMHO the quality is pretty good.
If you liked this article, 👏 even 50 times — I would really appreciate it and it makes a huge difference to me.
This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +442,678 people.
Subscribe to receive our top stories here.
