Designing for iOS4 devices is totally different from designing for the web.

1. 10 Tips For iPhone User Interface Design
Designing for iOS4 devices is totally different from designing for the web. Sarah Parmenter
illustrated how to conceptualize, design, and develop a successful user interface for iPhone.
The most successful apps fulfill basic needs of people who need to find something quickly, or
people who are plain bored or just micro tasking.
When you design user interface with the Iphone, it's a completely different category because
you've got one platform, Webkit (there are other browsers but the main one is Webkit) and all the
constraints of designing for the web. We have barriers to actually make it designing for Iphone a
pleasure and that's something that's a bit strange to get your head around because we have this
guidelines, various strict restrictions on what we can and can't do in the Iphone. But this actually
makes the design process easier.
How do we start this process and give a helping hand in making an Iphone user interface project
you might find along the way?
1. Make a Development Choice
The first choice is Apple SDK. It's got steep learning curve, cocon and objective C. It uses apps
from the Apple SDK which is $99 to join but it's got a lot of potential to generate a significant
income from the Itunes store. There are great books you can find to learn more about Iphone and
mobile design and development to such books as "Iphone in Action", "The Iphone Developer's
Cookbook", and "Mobile Design and Development".
Your second choice Web Only App. This uses HTML/CSS techniques with no revenue from the app
store. It's good for clients on lower budgets and can be made to look like a native app.
The third choice is a Hybrid App. There's app like PhoneGap, Mobile Roadie, and JQTouch. You
have to be very careful what you use because sometimes apps get rejected on the basis of not
using the SDK.
2. Clearly Define What you Design
You start with an Application Definition Statement (ADS). It is a couple of sentences that describes
exactly what your app does. Don't make large paragraph with every single detail and as coherent
to someone who maybe doesn't understand. Just keep it short and straightforward.
Figure out the best UI components for your application. The first type of design app is Serious
Tool which is one of the very specific design methods. This comes with limited colour palette and
always focuses on minimising graphics. The most important thing about this type is the data. It
contains standard navigation with clear divisions and blocks.
Digital Organics: Web Design Sunshine Coast - 1/102 Howard Street, Nambour, QLD 4560 T 617 5476 3800, SEO Sunshine Coast

2. Next is the Fun Tool. They are types with moderate use of colour and graphics and with simple
hierarchy of information. This always encourages leisurely productivity which is very diffrent to the
Serious Tool.
The third type is Fun Entertainment. Now this is very easy to design for because this embodies
games. This are extremely graphically-rich, have fun use of sound, with simple hierarchy of
information, and in-your-face visual feedback.
The fourth one is Serious Entertainment. This specific design have moderate use of graphics,
focused on content, with normally heavy use of tabbed data, and standard navigation elements.
This is probably the hardest type to get yor head around.
The fifth app type is Utility. These are graphically rich with normally single screen. It tries to not
have a hierarchy and normally used for less than 30 seconds.
3. Provide Inspiring Documents
You can wireframe however you like – paper, Fireworks, Photoshop – but don’t get too detailed:
keep to shades of grey and white and block elements. Don’t produce detailed icons or anything
that could steer your client away from the main task of signing off the functionality; they can sign
off design elements later.
Think about the gestures a user will need to use to get from one screen to another or to refresh a
page and sign these off at this stage as well. You might also want to bear in mind whether you’re
going to support a different landscape mode, in which case you’ll need to wireframe this too.
Giving the user a visually rich landscape mode can really add brownie points to your app.
4. Be Prepared for UX Interjection
If you’re presenting your wireframes to clients, take the time to produce comprehensive
documents, annotate where required and reinforce any design or UX decisions you’ve had to make
for the greater good of the app. By putting your thoughts down on paper and explaining details
concisely, you’ll minimise questions and queries from the client throughout the process. Don’t be
tempted to just send off screens as an attachment in an email: give them purpose and show them
in the most realistic environment you can.
I always embed my screens into a Keynote document, with the screen on the left and a paragraph
about the screen to the right. I never embed full quality artwork because I’ve had my fingers
burned too many times. It’s a good habit to slightly downsize the artwork for presentation.
5. Orientations, Dimensions, and Hierarchy
You’re also going to need to think about the space for touch gestures, such as buttons. The
minimum hit size on an iPhone is 44 x 22px: anything smaller than this and a user might get
Digital Organics: Web Design Sunshine Coast - 1/102 Howard Street, Nambour, QLD 4560 T 617 5476 3800, SEO Sunshine Coast

3. frustrated with mis-hitting their intended buttons. The ideal fingertip target is a comfortable 44 x
44px. You also have to think about the space between anything a user will need to touch. The
recommended minimum space between elements is between 12 and 22px.
Always embed my screens into a Keynote document, with the screen on the left and a paragraph
about the screen to the right. I never embed full quality artwork because I’ve had my fingers
burned too many times. It’s a good habit to slightly downsize the artwork for presentation.
6. Unravel High Fidelity UI
You’ll notice that the apps that ship with your iPhone or iPad are of the highest quality, that
attention to detail is in abundance and that they’re pleasing to the eye. The apps that get the
greatest graphical reviews are those that follow suit. The iPhone and iPad are in such close
proximity to your eye level that it’s possible to make the most subtle of textures and gradients
noticeable. Flat, block colours can work well but just adding hints of gradients, texture and realism
can lift your app from good to fantastic.
Other elements that can make an app beautiful are text highlights, tactile backgrounds, subtle
shadows, high gloss finishes and clean, crisp, custom icons within your app (of course, all used
sparingly and appropriately).
Studying the UI of your favourite app will help you to see these little details but the best apps are
always those that get the UI and the UX right, such as the Twitter for iPhone app (formerly
Tweetie). The “pull to refresh” has become a standard gesture across many apps and coupled with
a beautiful user interface: it’s no wonder it has become a favourite amongst Twitter iPhone users.
7. Don't Reinvent the Wheel
While you are designing, keep your documents neat and tidy. If you’re working in Photoshop,
make sure you group and name layers sensibly. Whilst Photoshop is an industry favourite, you can
work in any program that can export PNG files, as this is what is used for development.
It’s normal to hand over a Photoshop document to a developer at the end of the process: unlike
the web, this isn’t frowned upon. It’s always worth asking your developer whether they’d like you
to pre-slice the UI into PNG files.
8. Take Time to Design a Beautiful Icon
Your icon is one of the most important things you’ll design: it will be someone’s first contact with
your app on the App Store. Start on paper: it’s expendable and easy to let your ideas flow without
committing to anything. Once you have something you feel you could develop further and better
on the computer, move forward. The best icons always portray a single, defined silhouette and tell
a story of what your app represents.
Digital Organics: Web Design Sunshine Coast - 1/102 Howard Street, Nambour, QLD 4560 T 617 5476 3800, SEO Sunshine Coast

4. Spotlight icons are seen on the search screen of the iPhone
Try to leave text out of the icon: it rarely works and is mostly unnecessary as your app name will
be presented below the icon anyway.
9. Pricing UI Design
Your standard iPhone icon is 57 x 57px with a border radius of 10px and iPad icons 72 x 72px with
a border radius of 12px.
Don’t forget about your icons for the App Store, which are a supersize 512 x 512px but normally
scaled to 175 x 175px for the App Store.
10. App Approval Process and Onward Development
Use purely the Apple SDK if possible. Try not to use the high-breed methods because some of time
get rejected and its worth looking into the internet and to read what they tend to adapt.
Don't use any Apple icons or imagery or any Apple trademarks. Do not use popular stock icons.
We want a little bit custom and not something available freely on the internet. Try not to be too
controversial; find a language, a hook where you can make a cue and can get it through that way.
Keep your developers happy because chances are you're not gonna developing this yourself.
Provide very comprehensive documents and clearly labeled and grouped layers in Photoshop when
you handover these documents to Iphone developers. Pre-slice PNG files where necessary bacause
they're the only files that Apple developers work with.
Moreover, consider designing for Retina Display just be aware it's double the amount of work. To
take advantage of the Retina Display you're going to have to create 2 sets of artwork adding 2x to
the end of your filename ie.logos@2x.png. Create bigger and more detailed icons ie. the 57 x 57
icon becomes 114 x 114. Try and design in vector format so that all imagery is scalable and future
proof.
Digital Organics: Web Design Sunshine Coast - 1/102 Howard Street, Nambour, QLD 4560 T 617 5476 3800, SEO Sunshine Coast