one-button mouse

It was around midnight when I showed Ged a draft of what would become the final icon for xScope 2.0. I saved it out as a PNG and sent it to him via iChat.

“I’m impressed,” he IMed back.

“By the sheer number of variations we’ve produced?” I replied.

“Well, that too.”

It had taken over two and a half months and nearly 20 revisions to get to that final draft of the icon. That’s a lot of back and forth considering that we were the clients on this one and could do whatever we wanted without answering to any third parties. Coming up with the concept for your app icon is often the most gut wrenching and difficult part. In this case, we had the concept nailed down from the start – everyone was happy with the visual metaphor we’d come up with for version 1 of xScope, and we were just updating the look of the icon.

Application icon for version 1 of xScope

This time around it was the execution of the concept that made life difficult.

My initial forays into the redesign involved only minor changes. I made the icon black, and gave it a sleeker look by thinning the X spokes a bit. Wolfgang was a bit skeptical at first, having grown fond of the version 1 icon, but we all agreed this was a good direction in which to head.

He suggested tweaking the material to make it appear to be more of a carbon composite – a little less glossy, a little less pure black. I revised the icon accordingly, and over the next few versions, the new design began to grow on Wolfgang.

Unfortunately, at the same time Craig pointed out that in many cases the icon didn’t show up very well in the Dock. I went back to the drawing board and experimented with the lighting on the icon to try to get it to pop more. The top row of the image below highlights a few of the designs during this early stage.

xScope application icon redesign

Still, it wasn’t quite right. The first two icons in the second row above show where we went from there – increasing the screen size and reducing the width of the bezel. I hoped this would improve the icon’s presence in the dock, and I was also trying to get away from the CRT feel of the old icon. These versions were an improvement, but the icon still wasn’t popping off the dock enough.

By this point, we’d been going through variations for around two months. Getting a bit desperate, I threw out a few total departures, most notably the one with “running lights” going up and down the arms. Interesting from a brainstorming point of view, but definitely not a direction we wanted to head.

Finally, during one of these rounds of revisions, I got a promising look while editing the icon. Deleting some of the vector shapes left me with a metallic sheen that looked pretty cool. I re-did the icon in this style and sent it to Ged, calling it the “liquid metal” version.

Final drafts of the new xScope app icon. It’s liquid metal!

Thankfully, this version was a hit. It popped off the dock more and had a nice, modern and polished look to it. I lightened up the color of the screen a bit, made a few more tweaks, and after some finessing of the details by David we had our final icon.

xScope 2.0

The app icon is the first contact users have with an application – it should go without saying that it’s a pretty important piece of artwork. And considering the limited space you have to work with, even the small details can be significant. So, while the redesign of the xScope icon was a long – and at times painful – process, I’m glad we took the time to get it right. And I’m really hoping that everyone stays happy with this design for at least the next three or four xScope releases.

~ Filed in Design, Icons, Ramblings, UI ~