iPhone Design

Once upon a time you only needed to design for one iPhone, meaning one size. With the release of the iPhone 4 it’s now a different story. There’s uncertainty amongst designers about how to design for both the iPhone 3 & 4. Below are a few links that should help you choose the best approach and save you some R&D time.

An App for the iPhone 3 should be designed at 320×480 pixels.

An App for the iPhone 4 is best to be designed at 640×960 pixels (twice the size).

2 pixels for 1 point:

In iOS4 dimensions are measured as points instead of pixels (unit change).

Outputting two sets of graphics is the best approach:

imagename@1x.png = iPhone 3

imagename@2x.png = iPhone 4

iOS4 will automatically pick the higher res (double the size) image if you use the above naming convention (@2x.).

Vectors and Smart objects are the suggested elements when designing for 3 & 4 as they are scalable. Design for the iPhone 4 at 640×960 (and then reduce by 50% for the iPhone 3).

Links:

Designing for the iPhone 3 & 4: Global Moxie

iPhone GUI Templates, Teehanlax

Icon Development and Templates:

There are potentially 11 !! Sizes of icon across the iOS4 platform – iPhone 3, 4 & iPad plus the store icons/search icons. Familiarise yourself with this ion the following link: Mr Gan

Leave a Comment