Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

Basically the question is divided into three parts -

  1. What size should I start with on an iPad?

  2. At what size do the Graphic Assets need to be passed to the developer?

  3. What about the same items on an iPhone?

With the plethora of devices available --and particularly if I would have to design for an iPhone or iPad-- where should I start detailed design exactly? Should it be for lower res (say 1024 x 768 px for iPad) or should I do it on a higher resolution as for Ipad 2? In case I do it for a higher resolution, should the ppi be at 72 or higher (and how much higher)?

Can I work on 1024 x 768 layout and do the icons scaled up by increasing the ppi? Should I make the detail design at 1024 x 768, leaving the developer to scale it up 2x times through code for the newer iPad versions (which means I share lower version of icon artifacts to developer)? Is there any other means of defining the layout size?

And again, does the same also apply to iPhone layout?

share|improve this question
add comment

migrated from ux.stackexchange.com Jul 12 '13 at 10:53

This question came from our site for user experience researchers and experts.

2 Answers

There is a huge myriad of resolutions for different devices (this is a good cheatsheet for iOS), but you are in the right track.

The 'real' resolution is, as you pointed out, 1024 x 768 pixels. But when you are preparing the materials to send to the developers, you need to design with retina in mind. This means, all your graphics need to be either scalable (SVG for example), or double the size you'd normally use (PNG, JPG..).

So to answer your questions:

1) What size to start with? Double the display size: 2048 x 1536 pixels (for now, at least!).

2) What size to export graphics? Double the 'natural' size (the equivalent of ppi72, but ppi are I think irrelevant in this case). So if you icon should be 40x40px, you need to send it in 80x80px. Unless it's an SVG, that because it's scalable it can be any size.

3) Same for the iPhone, or any device with (1.5x or) 2x pixel density - most smartphones. 640x960 px for iPhone 4, 640x1136 px for iPhone 5.

The specifics will depend on how the developer is making the app, but he/she shouldn't scale the graphics unless they are all SVGs and in the same starting size. The only way you will get artefacts is if the graphics are @1x PNG/JPG and he/she tries to double them.

Final note: Because different devices have slightly different resolutions (or sizes - it's usually the portrait height that varies), it's best if you keep this in mind and design according to those changes. So, for example (and this has happened a lot to me with games), make sure your app backgrounds are long enough to fit everywhere. Even if the rest of the elements will be floating in the top part and the bottom extends to infinity.

share|improve this answer
add comment

You don't want to scale up, always scale down. As such, build the 2x retina assets. The developer can handle scaling down.

Ignore PPI settings in your design software. It's not really relevant. All that matters are the pixel dimensions.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.