UI Design For Ipad Dimension

[vasanthakumar L]

Hi Guys,

I want to create UI Design/Mock-up for Ipad (7 inches). How do I measure the actual pixel for Ipad dimension and what is the difference between resolution and dimension (Width-Height).

Thanks,

Vasanth

[Derek Cross]

I suggest you create your page for an iPad at 2048 x 1536 px this will work well on a retina screen. Resolution is irrelevant in this context.

[vasanthakumar L]

Thank you Derek Crose.

But I still confusing what is the actual dimension (width & height) for 7 inch Ipad tablet because i can't understand difference between the Resolution and Dimension.

Finally this UI design/mock-up will given to the tech team. They will need measurement of the each and every object sizes in pixels (Buttons,icons,...) like style guide. Are you sure I follow this pixel 2048 x 1536 for 7 Inch Ipad tablet?

Thanks,

Vasanth

[Test Screen Name]

Forget the size in inches. This is of no importance. Only the size in pixels is important. If you want to see it at a different size in screen use ZOOM, please ask if you do not know how to do this.

Each iPad model has different size in pixels. Make sure you are using the right size. Many web site have this unformation eg iOS Quick Reference for iPhone, iPad, and Apple Watch

[vasanthakumar L]

Thanks.

Yes I don't know. I got some knowledge but please explain clearly, What you mean that "ZOOM"

Thanks,

Vasanth

[Derek Cross]

Don't produce content for a specific device as there are many and they are all different. Produce it for the best and let the content scale and/or letterbox for the rest.

[Test Screen Name]

If it's a UI a good developer will have the content adapt. A UI is not a picture...

[Test Screen Name]

Here is a tutorial on zooming in Photoshop Zooming And Panning In Photoshop

[Keith_Gilbert]

As others have said, the physical dimensions and resolution of any device (iPad, phone, etc.) are irrelevant. Only the total dimensions in pixels are important. Specifically, both the latest iPad and iPad Mini models have a resolution of 2048 x 1536 pixels. The resolution of the iPad Pro models are different, but at least the 4:3 aspect ratio of ALL iPad models is the same, so content scales nicely from one iPad to the next.

I assume that you are mocking up UI elements in Photoshop, and then handing the designs off to a developer. If the developer is going to carve the design up into final bitmap icons and other elements from your source files, creating your file at 2732 x 2048 would be safest, as the developer would be able to generate high-quality icons from that file for ALL iPads. But if you are only concerned about the iPad Mini, then 2048 x 1536 will be just fine.

[Derek Cross]

There you have the answer Vasanthakumar, from one of the world's leading experts on the subject!