25 July 2012

iPhone & iPad Basic Screen Component Dimensions – Updated For Retina

Ever since I created these diagrams showing the pixel dimensions for the most common UI components on the iPhone and iPad screens, I constantly find myself referring to them. The only problem was that I usually create the Retina art first. I got tired of having to multiply the unRetina dimensions by two, and I figured you all might too!

Here are the same diagrams, updated with Retina dimensions in parentheses:
 

Basic iPhone Retina Screen Toolbar Nav Bar Button Pixel Dimensions

Click for a larger image


 
Basic iPad Screen UI Component Pixel Dimensions: nav bar toolbar buttons tab bar

Click for larger image

For those of you who would prefer a list instead, read on.
 

iPhone and iPod Touch Pixel Dimensions

Notes:

  • Retina Dimensions are given in parentheses.
  • All the dimensions for the iPhone are the same as for the iPod Touch.
  • All pixel dimensions include highlight or stroke effects.  For example, a 30-pixel high button is actually a 29-pixel high button with a 1-pixel highlight on the bottom.

iPhone screen size:

  • Portrait 320×480 (640×960) pixels
  • Landscape 480×320 (960×640) pixels

iPhone Nav bar:

  • Portrait: 44 (88) pixels high
  • Landscape: 32 (64) pixels high

iPhone Nav bar buttons:

  • Portrait: 30 (60) pixels high
  • Landscape: 24 (48) pixels high

iPhone Nav bar button icons: about 20×20 (40×40) pixels (when in Landscape mode, it shrinks the 20×20 (40×40) pixel icon)

iPhone Toolbar: 44 (88) pixels high (does not change)

iPhone Toolbar button: 30 (60) pixels high (does not change)

iPhone Toolbar button icon: about 20×20 (40×40) pixels

iPhone Tab Bar: 49 (98) pixels high (does not change)

iPhone Tab Bar icon: about 30×30 (60×60) pixels
 

iPad Pixel Dimensions

iPad screen size:

  • Portrait 768×1024 (1536×2048) pixels
  • Landscape 1024×768 (2048×1536)

iPad Navigation Bar and Tool Bars: 44 (88) pixels high

iPad Nav Bar and Tool Bar buttons: 30 (60) pixels high

iPad Nav Bar and Tool Bar button icons: about 20×20 (40×40) pixels

iPad Tab Bar: 49 (98) pixels high

iPad Tab Bar icons: about 30×30 (60×60) pixels

iPad List View: 320 (640) pixels wide.  This is because when the same app is on the iPhone, the 320 (640) pixel width fits iPhone Portrait mode perfectly.
 

Category: Game Design, Tutorials

Tags: , ,

40 Comments

  1. Thanks for this! I am not a game developer, but I am working with my brother to create an app. These diagrams are very helpful.

  2. vwenderlich says:

    You’re welcome – hopefully it saves everyone some time and frustration :]

  3. Piyush says:

    Useful information.!

    You have used the word “Toolbar” (not “Tab bar”) when screen mode is changed to landscape from portrait. Why?
    Could you please explain what is the difference between “Tool bar” and “Tab bar” in reference to iPhone?

  4. vwenderlich says:

    Hi Piyush,
    I did this because in the landscape mode I was demonstrating how a toolbar looks on the bottom, rather than a tab bar. They are different.

    A toolbar contains controls that perform actions that are relevant to what you see on the screen.

    A tab bar lets the user switch between different modes of the app.

    You can read more in Apple’s HIG: http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW1

  5. Thanks Vicki, it’s very complete and useful. Since you have almost every aspect of an iOS app measured don’t you think it’s a good idea to also have the dimensions of the icons the app?.

  6. Paulius says:

    Vicki, thank you for posting this. Its very visual and clear the way you did. I think it would be more useful if you made a PDF or vector file that can be downloaded and used as a template.

  7. Thomas says:

    Retina iPad height in landscape is 1536 not 1356…..

  8. Steve says:

    I believe you made a typo for the iPadHD dimensions, 2048×1356 should be 2048×1536 , however I could be wrong

  9. vwenderlich says:

    Yep that was a typo, thanks for pointing it out!

    @Paulius – glad it is useful! It isn’t meant to be a template or even completely to-scale, though – just a quick reference when starting projects.

  10. Hans-Jürgen says:

    Thanks for this wonderful and helpful collections of information

  11. ejk says:

    These diagrams are great! Thank you.
    I just started designing for iPhone & iPad apps. I create my artwork in Photoshop, but was wondering: do I save my finished artwork at 300 dpi or 72 dpi? Thank you.

  12. vwenderlich says:

    @ejk – it does not matter what resolution you save the art at. It only matters what the overall pixel dimensions are. I usually save at 72 dpi if I have to pick a setting (screen resolution rather than print resolution), but it doesn’t matter.

  13. Albert says:

    Thank you Vicki! So brief and so informative. A kind of rare thing nowadays:) A thing to learn from you.

  14. Anand says:

    Very useful content for the developers. Thank u so much. It wd be again useful share the pixel information if a iPad application to support both retina (HD) and non retina versions. Does it mean the developer has to provide 2 different pixel sizes for the same image?

    It wd be also further useful if u mention on iPad mini pixels which I heard there is no need for a seperate images needed.

  15. Dave says:

    Great info. Do you know why if on the iPhone the tab bar and toolbar should both be on the bottom edge, why they have different heights 49 pts vs 44 pts?

  16. george says:

    looking for some app developers for environmental initiative app- geo-locators, photos- this looked like a good place to start

  17. Shawn says:

    Thank you for the great cheat sheet… I still have a problem though. The images I create look blurry on the actual test build of iPhone? The DPI is set to 72.. Should this be higher?

  18. Dinesh says:

    hi i am web designer and also created started in app design but the design view on in ipad tab bar icons in jaging i design with icon in photoshop design with anti aliyas but the retina view is jaging please inform me how to fix it :)

  19. Incredibly helpful! Thanks so much.

  20. dan hamann says:

    Super helpful…girl you rock!!!

    dan

  21. srinufx says:

    Thankyou so much..
    Very good article.

  22. Thank you, very useful information. Especially for starters like me.

    Thanks again!

  23. Very nice if you’re making mockups in Photoshop etc. Thanks for this!

  24. srinufx says:

    Thank you so much

  25. RK says:

    Very useful for Learners, thanks a lot

  26. Really appreciate this, especially for showing both pts and pixels instead of just pts.

  27. thanks a lot it helped me and my stuff ;)

    wish to get other mobiles sizes also ;)

    appreciate this

  28. fadz says:

    helo there,

    Iam very new to iphone design .. soon im going to start designing over iphone application ..plus i have never used any iphone devices..
    The thing which is confusing me ..

    I want to know what is the difference between retina and non retina . ? ..

    Is it necessary to have iPhone device to check live preview ?

    And can u please guide me the way to design a design which fits in all iPhone devices 3,3s,4,4s,5…

  29. Polash says:

    This is really awesome calculation. It helps me lot.

  30. Monika S. says:

    Awesome post for iOS developers and designers. Helped me a lot for creating my universal app quickly. Thanks Vicky!

  31. Some days ago I design my http://samtheme.com/ site. I did not follow responsive method. But it was responsive. Some days ago I sow in phone. It is working well.

    I have a question that is, we can do this code three time one for tabs one for phone and another for PC. Can we do it. All smart phone screen is same size.

    @media only screen and (max-width: … px) {

    }

    • vwenderlich says:

      I’m not a programmer – you should head over to raywenderlich.com and check out his tutorials on iPhone development.

  32. I also have another question?

    All smart phone like iphone, blackberry and other. And all tabs for all brands are same screen? I need to know it

  33. Sonu says:

    Good job! :-)

Leave a Comment

I'd love to hear your thoughts!