Designing for the Apple iPhone: Six top tips
Category : Blog
#1: Wireframe, wireframe, wireframe!
I honestly can’t stress enough how important this one is. Do not, I repeat, do not attempt to design an iPhone application without wireframing first. Even if you have a really clear image in your head about what you want your app to achieve and what you want it to look like, you still need to spend some time wireframing, even if it is a short 10 minutes for a very small iOS app.
Opening up a blank canvas and starting from an image you’ve only seen in your head is very tricky, and you’re bound to run into user experience problems if you rush into things. Scribbling your ideas down onto paper will allow the errors to jump out at you; that button is out of place, that image won’t fit there, this needs to be on a different screen, that screen doesn’t need a back button… the list goes on. Designing your applications user interface is also a great deal easier if you have wireframes to refer back to throughout the process.
#2: Use LiveView Screencaster
To be totally honest I haven’t a clue how I coped before finding this incredibly helpful Mac/iPhone/iPad application created by Nicholas Zambetti. The concept is simple: your iPhone (or iPad) replicates what is on your screen.
The set-up is extremely simple; download LiveView on your iPhone or iPad, andLiveView Screencaster on your Mac. Once you have downloaded these you simply run LiveView Screencaster and an iPhone or iPad frame will appear on your screen, just position this screen over your canvas in Photoshop (or your design software of choice). You then simply open up LiveView on your iPhone or iPad and select your Mac’s name to replicate your screens.
This allows you to repeatedly check how your design looks on your iPhone without having to export images and send them to your iPhone. Before using this application I was saving maybe 5-10 images from Photoshop per day, and then sending them to my iPhone via Dropbox. After a quick calculation, I estimate that I was spending up to 20 minutes per day waiting for files to save and transfer. This app allows me to spend that 20 minutes per day designing, that’s 100 minutes per week and 5200 minutes per year, which is a whopping 86 hours and 36 minutes that I save per year from using this application alone, equivalent to £2,150 wages!
I almost forgot; LiveView is a completely free application. There are absolutely no charges, which surprises me as me and many others I know would happily pay a few bucks for this!
#3: Make use of Vector images
Once upon a time this was never really all that important when designing for iOS devices, but now we have different resolutions to think about (iPhone [All Models] vs iPhone 4) it is very important you use scaleable vector images as often as you can. It isn’t essential, but if you don’t have lots and lots of time to completely redesign an app at a different resolution, it’s important, not to mention much easier!
I’m not saying use a vector-based application like Illustrator here, I’m just stating that you should use vector-based elements. In Photoshop for example, make use of Shape Layers (which are vector, by the way)! Shrinking a rasterised element can cause blurry edges, where as upscaling a rasterised element will just create a pixelated mess. Now replace the word rasterised with vector, and we avoid all of those outcomes. Make it smaller and it will stay perfectly crisp, make it larger and, again, it will stay perfectly crisp.
Sticking to this rule will save you a lot of time in the long-run, and will also produce much higher quality results, which is ever-so important with the mass of upcoming iPhone designers if you want to either stay at the top of or climb the ladder to become the top of the iOS design market.
#4: Snap to Pixels!
Here’s another important Photoshop tip, which won’t necessarily save you time, but will make your designs much sharper and, well, sexy! The most common use of snap to pixels is when using shape layers. It allows your shapes to be the same on each edge. This is a tricky one to explain, but the screenshots below clearly demonstrate what it is I’m blabbing on about.
It’s a super simple tip, and once you’ve ticked that “Snap to Pixels” box (which is hidden away in the menus) you’ll never have to do it again, so it is highly recommended if you don’t already use this hidden gem of a feature! To turn the feature on, simply click on the arrow next to your shapes in the shape layer tool bar, and check the box! Simples!
#5: Familiarity is key!
There is nothing wrong with thinking outside the box and creating something stunning that doesn’t resemble Apple’s default UIKit – but sometimes there is simply no need to. For simple and large applications alike having a familiar interface isn’t a bad thing – there is nothing wrong with using elements from the default UIKit and grooving them up a little with new colours and applying a texture here and there.
The main reason for keeping your application familiar is that the user immediately feels comfortable with it. Although the user has never used the application before, they know what this button and that toggle does, even if they are sporting a different colour. Other actions that are good to stay the same are swipes (i.e. swiping through images or swiping on table views to reveal delete buttons) and pinches (to zoom in and out). This creates a brilliant user experience, and is definitely recommended – although there is nothing wrong with going all out and creating something brand new, just make sure its buttons and actions are instantly recognizable!
#6: Get good feedback!
It’s important to get good feedback on your work, an opinion from someone who isn’t directly involved in the project you are working on. Make sure you are allowed to share your work though, as some contracts may state you’re not allowed to show the general public the work until it has been approved and/or released. I recommend using Dribbble, an incredible community which focuses on interface and graphic design. I also find myself using Twitter a lot, posting TwitPics of my designs to get direct feedback. Sometimes I have what I like to Twitter design sessions, posting 10 minute progress updates (with screenshots) of the design I am working on. This is a great way to get people involved in my work, receive constant feedback and also improve your social networking skills!