Skitch Design Explorations

A design project for Evernote • 2014

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.

Some of this iteration's big changes included giving advanced color selection its 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.

With this iteration of Skitch, I decided to separate advanced color selection from basic color selection via two separate buttons on the toolbar. My decision here was based mostly on personal preference - 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 loved how this design framed everything.

Zooming in and out of an image would reveal a tooltip containing information about the current zoom level, as well as a button to size the image to its actual size and a button to go into full screen mode. After appearing, the tooltip would go away after a few seconds.

Another interesting idea I was exploring in these designs was how to present input options when starting a new Skitch document. Mousing over the floating "+" button at the top left corner of the canvas would reveal a list of different input options. The "+" would turn into a "Screen Snap" button, and the other options would expand down. This design was meant to give users immediate access to taking a screen shot, which was the most common form of input. The other input options from top to bottom were as follows: Fullscreen, Open a File, Blank, and Clipboard.

When mousing over the share button at the top right corner of the canvas, a list of output options would expand down, and the share button would turn into a draggable UI component. This would give users immediate access to dragging an image file out of Skitch. Other output options from top to bottom were as follows: Copy URL, Facebook, Twitter, and Evernote.

Input/Output Button Prototype

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

This prototype doesn't reflect the horizontal toolbar design in the mockups above, but it does show how an input or output menu would expand and contract. I put special emphasis on the animation of the buttons when mousing over the main access point to make sure they felt snappy and responsive.

Launchpad Designs

The launchpad was another crazy idea I was exploring for future Skitch functionality. The general idea was to present users with a floating widget containing input options when initially opening Skitch, rather than launching straight into a blank canvas. The launchpad would stay active in the background while a document was open, and it would become a place to drag files into Skitch. It could also potentially morph into something else when an image is open - for example, it might 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 morphed to the needs of the user. I would have loved to have taken this idea farther.