Sharing Interactions – How I create GIFs with LICEcap

May 15th, 2020 · 2 min read

As a designer, there are often moments where I designed a user flow and created a prototype to indicate a specific interaction I had in mind. The next step is usually to share it with a product owner, developer, or put it into a document to describe the flow.

The easiest way for me to do this is to capture my desktop and create a GIF or video.

As an example you can see below how Grammarly helped me to correct and improve this text. The GIF shows how the interaction works, and I do not depend on you to click a play button – it will catch your attention.

For many years I've been using LICEcap, a simple tool to make animated screen captures for OS X and Windows. For my needs, it does what it is supposed to do. You can capture any area of your desktop and save it directly as a GIF file. That's it, nothing more, nothing less, and it comes for free.

To record, you simply position and adjust the frame to what you want to capture on the screen. In the settings, you can control the frames per second and show mouse clicks if you wish. They just recently provided an update to make it work on the latest Mac OSX version.

More complex flows

If I need to show more complex flows and express my thoughts, I will create a video by recording my screen with the Quick Time Player and use the microphone to capture my voice. As an example, I recently shared a concept inside our product team to communicate the user experience.

Everybody can watch it at their own time and provide feedback. I can speak to the video and explain my thoughts behind – easy todo without much of an effort. It felt better to publish it like this than having a meeting where everybody is silently watching me presenting. If there are open questions, we can still get together and discuss it.

I hope this helps you to improve communicating your user flows and designs.

Stay safe and healthy 🙂