The desktop and mobile views for Thumbcinema


Side Project (Sole Contributor)

I designed, developed and launched this web-based tool for creating flipbook animations.

Make flipbooks easily

A simple, intuitive tool for creating flipbook animations without complex industry tools.

When creating this project, I was interested in making something that allowed people to be creative in new ways. I was interested in UI animation, and experiences that showed rather than told.

An early design principle was to avoid labels, alerts, and messages at all costs. If I could communicate actions and outcomes visually, I would do it.

Animation on the web was in its infancy at the time, so this was a great opportunity to learn about new technologies so that I could apply them to my day-to-day work, where I was less able to experiment.

Thumbcinema was designed in Photoshop, and built using Backbone.js.

A collection of screens from the mobile web experience of Thumbcinema

UI animation at its core

One of the goals of Thumbcinema was to explore a user interface that doesn't lean on text as a means to provide feedback to users.

When creating a flipbook with Thumbcinema, all UI elements communicate via animation. Create a new page, and it flows in from the right with existing pages shifted over. Delete a page, and it falls from the stage.

Users don't need to be told what's going on, because they're shown in physical terms how the UI has been updated.

I also experimented with different ways to play back animations. A simple play button was included, but I wanted to recreate the feeling of flipping through a book with your fingers.

To do this, created a mode of playback where you could manually move forward or backwards in a flipbook by making a circle gesture with your mouse — clockwise to move forward and anti-clockwise to move backwards, with the speed determining playback speed.

The creation experience for Thumbcinema

It got lots of love