A Web Designer’s iOS Story

Photoshop

At the start of the summer, I began to learn about the world of iOS design. Three months later, we have an App ready to launch in the iTunes Store and the whole thing has been a life changing experience. If you are a Web Designer and you have even the slightest interest in learning about iOS design, my recommendation would be, “do it now.”  And when I say “now”, I mean when you get to bottom of this article, follow the links and start learning right this second. You will absolutely love it.

iOS Design = Web Design x 2

For those not familiar with iOS design, everything basically happens in two resolutions. One for the original iPhones and one for the newer Retina Display devices at exactly twice the size. What this means is that you have to create your designs twice. There are a few short-cuts, but when it comes down to it, you are creating two versions of everything.

This can be pretty daunting at first. Especially if your App, like ours, has a lot of images. In the end, I produced about 500 image slices for our finished App. Ours is based on Stickers so we naturally had lots of visuals to create, but no matter what type of App you’re creating, it’s always worth keeping this in mind during those early design stages. Especially if you are constrained by the amount of time it will take to create such a large number of images.

But, saying that, the upside is that it also opens up an amazing world of detail. I found myself designing everything in the Retina display resolution since I love the sheer amount of detail it offers. At 640px by 960px , most any design will look amazing. Some of that detail does get lost of course when it’s viewed on the iPhone’s small screen, but that didn’t stop me from putting in the attention to detail and I’m sure it wouldn’t stop you either. In fact, that’s the exact thing I love about iOS design. Getting in close and making sure every little bit is pixel perfect. I found the experience even more rewarding than designing a brand new website.

Your Design Across the World

So the first thing you’ll notice is how fun the iOS design process can be and then you’ll have the realisation that your design will be available in over 60 countries! Launching a website is one thing, but putting out a worldwide product is a whole new ballgame. The level of excitement is way beyond any project I’ve even been involved with before.

Add to that a sense of ownership and pride in your work and you’ll see why this is so much fun. People across the world will be buying your App and using it on their iPhone, iPod Touches and iPads. Devices that are attached to people’s daily lives in significant ways. Before we submitted our App, I said to my son Patrick, “In a couple weeks, there might be a little boy in Japan who’s playing around with our App.” No matter what your age, that’s exciting stuff!

Where to Start

To get you started, here’s a collection of the most useful links I found:

Designing for iPhone 4 Retina Display: Techniques and Workflow : A great intro article from Smashing Magazine, this one will make it all clear from the start:

iPhone App Design Workflow for Designers : Another perspective on the ideas mentioned above:

iPhone 4 GUI PSD Retina Display and iPhone 4 GUI PSD Non-Retina : These are invaluable. All the common UI elements created in Photoshop. Brilliant.

Glypish Icons : These are the best App icons. Look no further.

Good Luck

Good luck on your App designs, it’s going to be a great journey. And don’t forget to let us know what you create.  We’d love to see it!

Comments are closed.