Skitch Design Explorations

Towards the end of my tenure at Evernote, I started exploring some ideas for what the next big version of Skitch would look like. I wanted to make it cleaner, simpler, and more accessible than it had ever been before. In order to achieve these goals, the conclusion that I ultimately came to was something that the Windows Touch product had previously done - a horizontal toolbar across the bottom edge of the frame. Personally I love this design...it shows a clear hierarchy of information, and it perfectly frames the content you're working with. I also had some crazy ideas for access points to import and export content from Skitch. Controls for creating a new Skitch and sharing a Skitch would end up being what our design team affectionately referred to as "skittles" - circular action buttons that progressively revealed more actions. More details below.

Some of this iteration's big changes involved giving advanced color selection it's own spot on the toolbar, putting undo and redo buttons in line with the rest of the tools, and making input and output functions float above the canvas as circular action buttons.

 

Visual styling idea for the size control submenu:

 

Visual styling idea for a basic colors submenu:

 

With this iteration of Skitch, I decided to clearly separate advanced color selection from basic color selection via two separate buttons on the toolbar itself. My decision here was slightly informed by personal bias - as an artist I like having easy access to a broader color selection.

 

When entering crop mode via the crop tool, the crop controls at the top balance well with the tools at the bottom. I really love how this design frames everything.

 

This mockup shows the zoom tooltip...it appears when you zoom in and out of an image and goes away after a few seconds. I think the tooltip balances well with the input and output buttons.

 

Input skittle interaction for starting a new Skitch document - when mousing over the "+" button at the top left, a list of input options expand down, and the "+" turns into a "Screen Snap" button. This would give users immediate access to taking a screen shot. Other input options from top to bottom are as follows: Fullscreen, Open a File, Blank, and Clipboard.

 

Output skittle interaction for exporting a Skitch document - when mousing over the share icon at the top right, a list of output options expand down, and the share button turns into a draggable UI control. This would give users immediate access to dragging an image file out of Skitch. Other output options from top to bottom are as follows: Copy URL, Facebook, Twitter, and Evernote.

 

Input/Output Button Prototypes

As the mockups above show, I wanted to change how input and output worked in this version of Skitch, and I was inspired at the time by some of the things Google had been doing with its material design language. I made a couple prototypes so I could get a better feel for the animation and timing involved with progressively revealing the input and output button menus.

Share Skittles v1

This prototype doesn't reflect the overall Skitch design in the mockups above, but it does show how a skittle menu would expand and contract. Mouse over the share button at the bottom right corner of the prototype to try it out.

Share Skittles v2

This prototype is mostly the same as the first, except I changed the animation for how the skittles appear. In this version, they scale up in place rather than tweening into position from the bottom.

 

Launchpad Designs

The launchpad was another crazy idea I had while I was concepting future Skitch functionality. The general idea was to present users with a floating widget containing input options upon opening Skitch, rather than launching straight into a blank canvas. The launchpad would stay active in the background while a document was being worked on, and become a place to drag files into Skitch. It could also potentially morph into something else when an image is open - for example, maybe it would show a thumbnail of the current image and allow the user to drag it out from the widget to different places. I was basically trying to make the launchpad a useful helper interface that morphs to the needs of the user. I wish I could have taken this idea farther.