iPhone Screen & Element Dimensions

Vertical Layout with Tab Bar @ 100%

www.iPhoneDesignTools.com

x:0 y:0
Status Bar
x:0 y:20 w: 320 h: 20
x: 0 y: 0

x:0 y:64 Navigation Bar

w: 320 h: 44
x: 0 y: 20

480

x:0 y:431

TabBar
w: 320 h: 49
x:0 y:480

320

For a complete library of iPhone Design Elements visit www.iPhoneDesignTools.com

© j.Beaird, All rights reserved - www.iPhoneDesignTools.com - jbeaird@iPhoneDesignTools.com
iPhone Screen & Element Dimensions
Vertical Layout with Toolbar @ 100%
www.iPhoneDesignTools.com

x:0 y:0
Status Bar
x:0 y:20 w: 320 h: 20
x: 0 y: 0

x:0 y:64 Navigation Bar

w: 320 h: 44
x: 0 y: 20

480

x:0 y:436

Toolbar
w: 320 h: 44
x:0 y:480

320

For a complete library of iPhone Design Elements visit www.iPhoneDesignTools.com

© j.Beaird, All rights reserved - www.iPhoneDesignTools.com - jbeaird@iPhoneDesignTools.com
 iPhone Screen & Element Dimensions
Horizontal Layout with Toolbar @ 100%
www.iPhoneDesignTools.com

Status Bar Navigation Bar

w: 480 h: 20 w: 480 h: 44
x: 0 y: 0 x: 0 y: 20
x:0 y:0
x:0 y:20

x:0 y:64

320

x:0 y:436

x:0 y:480

480
Toolbar
w: 480 h: 44
x: 0 y: 0

For a complete library of iPhone Design Elements visit www.iPhoneDesignTools.com

© j.Beaird, All rights reserved - www.iPhoneDesignTools.com - jbeaird@iPhoneDesignTools.com
Toolbar Dimensions & Elements
Horizontal and Vertical Layouts @ 100%
www.iPhoneDesignTools.com

The translucency and color of

toolbars can be specified. Standard
Vertical Toolbar: 44 x 320 toolbar colors are blue and black.

Title: Helvetica 20pt Bold

2 of 18
Button: 30 x 49
44 ToolText Save
Label: Helvetica 12pt Regular

320

64
The recommended hit area is 44 x 44
44 pixels. Providing five or fewer toolbar
items is reasonable.

Icon Artwork: 20 x 20
PNG Format
Anti-aliased
White with alpha

Horizontal Toolbar: 32 x 480

96

32

480

Note: The iPhone OS automatically creates the selected and deselected appearance for items in
toolbars, navigation bars, and tab bars. These visual effects are automatic and their appearance
can not be altered. For development you only need to provide one version of an icon.

For a complete library of iPhone Design Elements visit www.iPhoneDesignTools.com

© j.Beaird, All rights reserved - www.iPhoneDesignTools.com - jbeaird@iPhoneDesignTools.com
Navigation Bar Dimensions & Elements
Horizontal and Vertical Layouts @ 100%
www.iPhoneDesignTools.com

Navigation Bar: 44 x 320

Title: Helvetica 20pt Bold

44 NavText Title Save Button: 30 x 49

Label: Helvetica 12pt Regular

Default Color Blue

Icon Artwork: 20 x 20
44 Title PNG Format
Anti-aliased
White with alpha
Black Recommended hit area is 44 x 44

44 Title Save

Translucent with opaque gray Status Bar

Title: Helvetica 20pt Bold

32 Title Save

Default Color Blue

Button: 45 x 23
Label: Helvetica 12pt Regular

Save

Save

Note: The iPhone OS automatically creates the selected and deselected appearance for items in
toolbars, navigation bars, and tab bars. These visual effects are automatic and their appearance
can not be altered. For development you only need to provide one version of an icon.

For a complete library of iPhone Design Elements visit www.iPhoneDesignTools.com

© j.Beaird, All rights reserved - www.iPhoneDesignTools.com - jbeaird@iPhoneDesignTools.com
TabBar Dimensions & Elements
Horizontal and Vertical Layouts @ 100%
www.iPhoneDesignTools.com

TabBar: 49 x 320

64

TabBars display a maximium of five

49 tabs. For applications that contain
more than five tabs, the iPhone OS
will display four tabs and add a More
tab to the TabBar.
64

49
Title Title

Label: Helvetica 10pt Bold Icon Artwork: 30 x 30

PNG Format
Anti-aliased
White with alpha

Title Title More More Top Rated Top Rated

Title Title Keypad Keypad Most Recent Most Recent

Note: The iPhone OS automatically creates the selected and deselected appearance for items in
toolbars, navigation bars, and tab bars. These visual effects are automatic and their appearance
can not be altered. For development you only need to provide one version of an icon.

For a complete library of iPhone Design Elements visit www.iPhoneDesignTools.com

© j.Beaird, All rights reserved - www.iPhoneDesignTools.com - jbeaird@iPhoneDesignTools.com