You can imagine I was thrilled when Tony approached me to design the icon for his new Spaces-enhancing application, Hyperspaces. The name, purpose, and features of the application instantly appealed to me, and we set off to make a great icon for it.

When Tony and I were discussing the application and what artistic direction we could take, we both expressed our love for the existing popular culture representations of ‘hyperspace’. Since we both knew enough Star Trek and other science-fiction, we threw a few ideas back and forth about what hyperspace looks like.

Star Wars-y hyperspace. Those panels look suspiciously much like iPhones.

We concluded that we’d like concepts that relate to hyperspace, but that the icon should remain pretty close to the purpose of the application as well; the icon should convey its relation to desktops, to the Spaces application, and the Leopard look and feel.

There was enough conceptual reference; in mathematics, hyperspace has been quite well defined. We were also looking at the existing design of Spaces; although the Leopard spaces icon isn’t really that appealing, the basic shape is a great design.

With space and hyperspace, there’s more than enough to be inspired by.

I kicked off the sketch phase with a concept that had been lingering in my mind since I got the first email from Tony. I showed off a few other concepts too; although I had discussed tesseracts and other, more abstract concepts, I really wanted to propose the icon designs that I’d be most happy with; relating to all the intended concepts, with a clear ‘Spaces’ symbolism.

My sketched vision of the Hyperspaces icon.

I mocked up two designs; a ‘warp’-like field of stars as shown in popular culture, and a Leopard-like ‘galaxy’ behind a spaces screen. I figured it would be best to use this ’spaces’ shape, as it’s iconic for the purpose and working of the application. Making a galaxy and warp effect from scratch isn’t easy, but I had a bit of prior experience, having made spacey wallpapers in my younger years.

After varying with the nebula version, and trying a version with the ‘warp’ effect, we decided we preferred the warp-y version, in a color theme that matched the default Leopard desktop background. This icon was communicative of the application purpose, its relation to Spaces, the OS X desktop, and it would look futuristic enough for our needs. Polishing the design took a while, as rendering a truly convincing ‘warp’ effect and shading a proper glassy ’spaces’-shape was a process of refining this design iteratively. I’ve made a quicktime movie that shows a few steps from mockup to final design. You can see that the background and the shading are radically transformed with each step.

The outcome was incredibly pleasing. After nailing the warp effect, the shading started coming together. The unconventional color and suggested motion of the background effect gives the icon a very dynamic feeling.

In the late hours of the last working evening, I wrestled with the exact perspective and visual weight, and following some good balancing, I generated the icon. A quick application of the icon with Candybar later, and I there it was. I knew it was right; I wouldn’t want to get it out of my dock any more. And thus ended our journey through time and space.

I genuinely feel like I learned a lot about what was previously something of a black art to me, and I couldn’t help but come away feeling enthusiastic about the prospect of creating some of my own icons for future software projects - or just for fun.

Check it out here if you’re interested!

If you’re eager to hear a bit more about my work, my person, and the whole story with Apple, I recommend you listen to Pomcast’s latest English episode, where I and StuFF mc discuss Apple, graphical user interface design and a bunch of other things.

The day has come, and Icon Resource, the biggest project I’ve spearheaded since the start of my own company has gone live. You can now go to the Icon Resource website to watch a sample video, read more about the contents, or acquire your access to the polished Icon Resource member area.

Icon Resource contains 15 high-definition videos, separated into a theory and a technique section, explaining you everything you need to know to make your own icons with Photoshop. No prior knowledge of Photoshop is required.

If you purchase Icon Resource, you are granted access to a special member area featuring all videos in HD and iPhone formats, with the project files and documentation. The experience has been tuned to be as seamless as possible, as Icon Resource is now running on a separated, dedicated server, with an extra available high-bandwidth server for the large video files.

I want to thank everyone who’s helped out in this great endeavor; making such a beautiful and browser-friendly website was a unique experience, and working with the talented people who helped me turn a design into a great website was great fun. Of course, working on the videos provided to be a much larger task! I’ve spent about 6 weeks of fine-tuning my speech, minimizing my accent, and recording screencasts and audio.

Icon Resource wouldn’t be as beautiful and made with love if it weren’t for ScreenFlow, the best screen recording utility made since the dawn of man. Simon Clarke, one of the ScreenFlow developers, also helped me out with a minor issue I had during the composing of several recordings.

For now, sound off your thoughts and enjoy this great new jump into instructional videos!

Feel free to digg it if you want to see more of these kind of videos!