Sizes of iPhone UI elements:

Icon Specifications for App
Store:

a) 29×29 – PNG, No Transparency,
No Layers, 72 PPI

b) 57×57 – PNG, No Transparency,
No Layers, 72 PPI

c) 512×512 – PNG, No
Transparency, No Layers, 72 PPI

iPhone
App Design Trends:

1.  Mirroring Native iPhone UI
Elements

It is always better to maintain the style of layout and UI elements that
the user is already familiar with. This saves time and energy. So it seems
quite convenient to use this approach when designing iPhone-applications. This
way the designer has to get into the flow of the OS and create an app that
requires zero explanation for the end user to operate. The custom app blends
into the iPhone environment giving the end user a consistent experience and
thus getting involved in the new app right away.

Stylization of Native iPhone App UI Design

Stylization of Custom Made iPhone App UI Design

2.  Very Simple User Interface

It is inconvenient for the user to read or see a lot of data
on a small screen even if the application design looks great at a glance. This
results in user dropout at the very beginning. Therefore it is very essential
to simplify the UI design.

Facebook for iPhone

Flicker for iPhone

Facebook’s first release did a great job of fitting a lot of core
functionality into a small space. The problem, of course, is in laying out all
that data and creating an intuitive interface. But their later 3.0 release
took a “springboard” approach to streamlining the interface, keeping it
intuitive and maintaining functionality.

Flickr is another example of how to achieve a good balance between
functionality, visual design and the small display area on mobile devices.

3.  Hardwarish Look

Many utilities are breaking out of the conventional iPhone UI
to take advantage of the device’s unique ability to respond to finger gestures.
Many of these have hardware-ish interfaces that users are familiar with but
come with perpetually shiny exteriors and clicks and pops that maintain their
newness from the first to one-thousandth click.

Where To?

Convertbot

Convertbot reminds us of the proportion wheel we all used in grade

school, except it’s more distinctive, original and creative.

Where To? This application looks like it belongs in a Mercedes. Plush

leather, matte-finish tactile buttons: quality craftsmanship. We can just
imagine how each button press feels solid, requiring the perfect amount of
pressure.

4.  Rich, padded and Pretty List Views

Essentially,
users are asking for a snapshot of what’s next, and then decide if they want
more information. One way to do this is with big pretty buttons. Large
and in charge, elegantly designed big buttons give the user a lot of
information through their color, icons and typography.

Delivery Status

Be Happy Now

Delivery Status

Check out
how Delivery Status uses appropriate colors on its big buttons to identify each
brand. And it uses typography well to establish a hierarchy of information.

Be Happy
Now’s big buttons convey the “be happy” mantra
through a mellow color scheme and light, calm and clear typeface.

Nike’s workout application for women includes a nice visual
treatment and illustrations that match the brand. It breaks out of the
traditional UI just enough to communicate the brand without making it difficult
for users to understand the interface and how to use it.

5.  Layered Interfaces

Several
applications take advantage of the iPhone’s capabilities by layering the
interface and making some elements stationary and others vertically or
horizontally scrollable. This approach has several benefits:

1. It reduces the number of traditional navigation elements that
are necessary (i.e. fewer buttons help to avoid a cluttered interface).

2. It gives users a faster route to the information they want.

3. More screen space is available for information.

Tweeter

Barnes & Noble

Tweeter uses layers to organize information specific to each of your

Twitter friends. Just look at all of the information packed into this one
screen!

Barnes & Noble has a layered interface that allows you to

quickly slide through new releases at the top or dive into more categories
below.

6.  Icons for List Views

On small screens, icons
can give a huge boost to an application’s usability and navigation. Let’s now
take a look at some examples of applications that use icons to their advantage.

iStudiez

Top Floor

iStudiez: This application uses various educational metaphors as icons to clearly communicate the purpose of the application.
Excellent visual cues tell the student what’s happening today at a glance.

Top Floor uses simple and easily recognizable icons to
quickly guide users to their category of choice.

7.  Illustratioins in Use

Applications
that rely on graphics not found in the standard user interfaces are increasing
in popularity, as developers try to set their apps apart from the crowd.
Sometimes it works, but often it doesn’t. The more unconventional a design is,
the more likely it is to have usability problems.

Magnetic Personality

Mom Maps

Magnetic Personality is an excellent example of how buttons don’t
have to look like standard buttons.

Mom Maps is Another example of how illustrations do a

great job of pulling together the whole concept of an application.

8.  Using Gestures

Classic linear
navigation may look boring: a button that links to other buttons, which leads
you to a list of something, which leads you to such-and-such an interaction.
Not really spectacular. The possibilities for creative interaction in utility
apps are huge and largely untapped.

Mover exemplifies

ABC animals

Mover exemplifies how to use gestures for sharing contacts, photos and bookmarks. Open two devices, and flick the shared files from one
handset to the other.

ABC animals: This application teaches while it entertains.
Being able to trace a letter with your finger is another example of how the
iPhone responds to touch and movement.