Gifs.com Editor

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.

Going big

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.

Scrapped Gifs.com Editor Designs

Early iterations of the editor.

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.

Refining

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.

Final Gifs.com Editor Designs

The opening editor screen.

Final Gifs.com Editor Designs

Users can add text to their gifs.

Final Gifs.com Editor Designs

With the editor, cropping gifs is easy.

Final Gifs.com Editor Designs

Stickers!

Translating to mobile

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.

 Gifs.com Editor Mobile Designs

Mobile editor designs.

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.

You can use the live gif editor over at Gifs.com.

Go to gifs.com