Fancy footerwork

Posted on by Ari Bader-Natal

Follow on Twitter

I've been playing around recently with some modifications to canvas footer on sketches, and I'm now settled on a design that I like. It's modeled loosely on web video players such as blip.tv and vimeo. I liked how Vimeo hides the controller entirely until you need it, but this turned out to be a bit problematic when the thing being controlled, the sketch, can itself be responding dynamically to mouse events. blip.tv offered an alternative model, where the controls are outside of the video itself, but are monochrome and minimalist, so as not to distract from the video itself. The other source of inspiration for the design was from the fine folks at dribbble. On hover, shots fade to reveal a nice overlay. Very snazzy:

My goal for the new footer, besides trying to look half as good as dribbble, was to make the canvas itself -- particularly when embedded in another site -- into a good starting point for exploring Sketchpad.

As you can see above, the play/pause, view source, full-screen, and clone actions remain, sketch title is now displayed, and a revamped link back to the homepage incorporates the Creative Commons logo for the CC TLD. Hovering over the controller expands the footer to reveal the license applied to the work, links to post the sketch to Twitter or Facebook, access to the canvas embed code, and a link to create a new sketch. (For you hover-free iPad/iPod users, you can click on the sketch title to toggle the state of the footer.)

I hope you find this useful!