3:41:41 PMEST

Version History UI

Version History UI

This exploration actually started as a design challenge from Rayon's design interview process. The challenge is to make it easy for editors to see both a high level and granular view of the edits made in the document. The historical way of doing this is keeping the history in a side panel, but I was curious if this was actually the best solution.

I was considering what types of UIs already accomplish showing both of these views, and I realized pretty quickly that a timeline editor is meant to do this exact thing. You can zoom out to get a rough cut of the video, and zoom all the way into adjust things happening on individual frames. So it seemed like a good direction to work in. And it made showing all activity across a file easy since each track could represent a different editor.

I was also curious what it would look like to show edits to a particular frame. Maybe you don't want to see the history of an entire document but a particular section. This is something I've also thought about before over here.

It's also built to be responsive. I wanted to give the option of making it as condensed as possible while still maintaining the same clarity when looking at it. The intention is that it pops up to replace the toolbar at the bottom, and it feels logical to keep as small of a footprint as possible since the assumption is that dragging the playhead immediately shows the updates on the canvas. We can't see them if the timeline is huge!

Version history

CTRL/OPTION + CLICK and DRAG on a guide to duplicate it.

CLICK and DRAG on a ruler to create a guide.

RIGHT CLICK to delete a guide.

#FFFFFF
SHIFT

+

and drag to make a selection