Wed, 26 August 2009

Design 1 - The Start

Impression, my recently released watermark plugin for iPhoto, is heavily based on the iPhoto2Twitter plugin. I used the iPhoto2Twitter Xcode-project as the starting point for the new project, which initially went by the name of Watermarker. Large parts of the code could be reused, e.g. the license key validation, software update notifications, some of the watermark code (the trial version of iPhoto2Twitter places a small watermark on the exported photos), the view that shows the selected image and a few more smaller features.

The initial version looked like this. It was almost the same as the iPhoto2Twitter design.

Screenshot 1

I actually liked this first attempt. I was able to fit all the controls into a fairly small space without making it look too busy. I like the many small buttons that Apple gives us as standard controls in Leopard.

The main issue with this design was that the photo preview area was very small. To be able to judge your watermark image, you’re going to need a significantly larger preview image.

Design 2 - Larger photo, narrow controls

Screenshot 2

There were several problems with this design attempt.

The text field that shows the path to the selected watermark file did not fit in the narrow control-box anymore. This was solved by removing it entirely and replacing it with a gray dot next to the Watermark file button. The idea is that, if a valid watermark is selected, this will become a green dot. There’s no real need to see the path anyway. Problem solved.

The second problem was that, if I want the photo view to be at least a 500 pixel square, as it is here, the whole plugin window is becoming quite high at 700 pixels. On a 13 inch MacBook, if you measure the space between the bottom of the menubar and the top of a full-sized dock, 700 pixels is exactly the space you have available. So technically it would fit, but it wouldn’t look very good. The solution was to remove the large logo text from the top part of the plugin window, or at least make it much smaller. Another problem solved.

But much more importantly: I hated this design. I’m not a trained designer, so I couldn’t tell you exactly why, but all the proportions seemed wrong with this layout. Probably something involving a golden mean or so, I wouldn’t be able to explain it, but it didn’t feel right to have a large square view containing a rectangular photo next to a very tall and narrow control-box. I experimented with some small changes but decided to quickly trash this one.

Design 3 - Move everything inside the image frame

I decided to remove the control-box on the side and create a much smaller custom view that I could place in the center of the image. The view would only be visible when the mouse pointer is inside of the image and disappear again after a certain time or when moving the pointer outside of the image.

It looked like this:

Screenshot 3

With a few more tweaks this could have become the final design. Everything now fitted nicely in a relatively small square that leaves enough room at the edges of the photo to not hide the watermark. The panel is slightly transparent and has a subtle gradient at the edges. The Position control is now a custom view that shows the user what corner is selected and lets him click or drag the white square to select a different corner for the watermark. This let me remove the four buttons that were used to pick a corner in designs 1 and 2.

I came very close to releasing this version but finally I decided that there were too many different types of controls to be grouped together in one panel. There’s a standard button, a gray or green dot, a custom view for the corner selection, a custom rotating arrow for the angle selection, a circular slider for the opacity and a text field for the margin. I thought that every one of these was perfect for the task they were cut out to do, but I needed to find a better way to make them all fit together somehow.

Design 4 - The HUD way

After having done design 3, I had the idea to try to change the control-panel to a HUD window (heads-up display) like the Adjust panel in iPhoto, a black transparent window. Of course, although it changed the look of the view, that didn’t do anything about the fact that the buttons didn’t fit together. So I thought, if the buttons don’t fit in the same view, why don’t I split them up into separate views? Like this:

Screenshot 4

This was obviously just a rough sketch, but I liked the idea. It became the first build that was sent to a few beta-testers.

Design 5 - The final design

Lots of polishing: added titles for the buttons, made smaller icons, made shorter custom sliders for the Margin and Alpha buttons, added a hairline edge to the location view in the Location button. Also rounded the corners a bit more and slightly reduced the transparency of the black background. Just like in design 3, these buttons are only visible when you move the mouse pointer over the image.

Screenshot 5

This is what version 1.0 finally looks like.

You can find Impression for iPhoto here if you’d like to try it out.

I want to thank Matt Gemmell, who gave me the idea for this post.

Blue Crowbar — Apps for iOS and OS X