During my time at Gifs.com, one of our major projects was to redesign Gif.com’s impressive gif editor. It needed to be totally responsive, match the colors and feel of the previously updated homepage, and easy to use.
At that time, the Gifs editor was quite small. We knew we wanted the new editor to be an entirely full screen web app on desktop, so we started there.
We wanted the editor to feel like a robust piece of software contained inside the user’s browser. Inside it, users could add stickers and text to their gifs, apply various effects at the click of a button, animate frame by frame, and much more.
Once we had the general flow and edge cases realized, I spent time refining and iterating on screens until they felt solid. During this time I was constantly sending shots to the rest of the team, getting good feedback, and making necessary changes.
After getting to a good space with the desktop editor, we started thinking and prototyping for mobile. The biggest challenge we faced was cramming this massive, full screen editor into such a small place.
We decided on a simple navigation split into four parts: Text, Stickers, Instant Effects, and Adjustments. Every element and action a user could add or take to their gif could be placed into one of these categories.
The trickiest part of designing the editor for mobile was how to size the gif’s timeline. Within that timeline are layers for everything the gif includes: the gif itself and any layers (stickers, text, etc.) the user adds. Each of those has its own layer, too. Similar to a video editing software such as iMovie, After Effects, etc. Each of these needed to be independently editable on a mobile screen all while being easy and fun to use.