For iPhone an Android design, why we set the psd resolution up to 72? why we aren't using 160 for mdpi and 240 for hdpi so on.

Eg: for iPhone 2x res we are choosing 640 x 960px and and screen resolutions 72 pixel/inch . Why this 72 ?

  • 1
    Hi Arun, and welcome to the forum. The 72px/inch is the resolution density. It is the density that best mimics (perhaps even corresponds) with the physical display resolution. We have a small problem though, this question is probably off topic for the subject of user experience. Perhaps ask it in GraphicsDesign.SE if you want a more thorough answer. – AndroidHustle Mar 22 '13 at 10:43

Setting different DPI won't help - it's useless for both development purposes and presenting to the client. Displaying the design on computer screen will never gove you the same look and feel as on mobile. You will not achieve the same results as on mobile. Some reasons for that are:

  • there combination of pixel density and physical size of the image on the screen is different
  • mobile screens are watched from different distance than desktop screens
  • there is a lot of user behaviors typical for mobile (e.g. swiping, parts of the interface hiding behind thumb etc.)

This will not let you judge if design is good or bad just by overviewing the graphics on the computer screen. Moreover, there is a problem when presenting these to the client, as the he's going to use different screen and the experience will be different again. From my experience, the best way to present designs to the client is to prepare a quick prototype to display on the screen of the device it is going to be used on (same contrasts, and sizes), or at least tell the client to view it on such device. The same for your internal testing of course.

Some of the most commonly made mistakes are too small clickable elements and fonts, and not considering different screen ratio between iPhone 5 and 4s and lower.

Some quick design tips to let you start with it:

  • prepare the desings for the highest resolution available (iPhone 5 in this case)
  • however, remember that if the application is planned to be used on iPhone 4s and lower there is going to be less physical space for these (screen ratio is different)
  • refer to guidelines typical for a system and device - but be careful, especially with the principle of 44px size for tappable targets; in short, it's for the lower density, but this is a great simplification of this rule, you should refer to more information about densities and resolutions - it's quite simple to understand, anyway: http://mir.aculo.us/2012/09/27/resolution-vs-density-vs-pixel-ratios/)
  • test the design on the device (and test a lot) - while working on a design displayed on computer screen, as the design seems to be bigger than it will be displayed on, there is a significant tendency for inexperienced designers to make fonts and other elements too small.
  • use vectors or smart objects for scalable elements to allow lossless scalability (in both directions in case of vectors, and at least down for smart objects).

You can find guidelines for iOS here: http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UEBestPractices/UEBestPractices.html. Unfortunately, this topic is too broad to describe it here, you need to study it, understand it and then apply it. Misunderstanding these (e.g. the 44px principle) may lead to design errors as well.

Not the answer you're looking for? Browse other questions tagged or ask your own question.