-2

I just took a project on android app design. I am beginning to learn about app design and this dpi stuff is really throwing me overboard. My main concerns are:

1) What is Dpi( I am not a programmer so 0 knowledge in this area)

How Dpi changes from device to device. Please explain with examples. I started designing for a nexus 5 screen size(1020x1920) which is also default app design template in PS.

a) Thing is google stated that nexus5 is xxhdpi so I used 48dp icons from their icon resources Which are huge.

b) How icons scale from dpi etc. and what should be correct size for nexus5

c) I usually design websites so I am stuck with pixels. So please explain wrt pixels (or any which way thats the best practice for app design)

2) Screen sizes and best practices

After doing some research I realized the design should adapt different screen size. So from where do I start and which is the best practice. So far I realized that 5inch screens are in lead followed by 5.5inch SG Notes etc. In my country 5inch screen is max used. Please suggest.

3) Typography This one is a huge problem. Which font size is best suitable for the (1020x1920) and (720x1280) or whichever size you say.

a) What is the standard size for header/action bar....Main card heading and normal text in cards. b) How is sp changes with device to device(dpi etc). And how to calculate these things in pixels.

I know these are a lot of questions But I am really stuck. If I nail this project...It would drastically change my design career.

Please Help

Thanks in adv.

  • you can search this site using tags such as [dpi][ppi] – Yorik Nov 13 '15 at 15:34
  • I voted this question down. As Janus mentioned, there are way too many varying questions here, all of which you could have found out yourself with some Google research. Personally, I think you need to go back to school and learn about Graphic Design and Web Development. All of these questions are extremely remedial for someone with any web design experience. – paulmz Nov 13 '15 at 16:03
  • I don't understand how you can have a "design career" but not know what "DPI" means. You say you "usually design websites", but if you really design websites, then I'm sure you have designed responsive or mobile versions of these sites, right? There isn't much difference between designing an app and a mobile web site. Seriously, more effort and research on your part is going to help you learn all of these things better than hitting us up for advice. You need to find things out for yourself, try things and make your own best-practices. You have a long way to go, my friend. – paulmz Nov 13 '15 at 16:05
  • calm down @paulmz I didnt go to any design school. All I have is self taught knowledge I dont have the money or time to go to design school and beginning to get into design. The person with good knowledge would share without any regret. Sad to see people judge other over these things without knowing. – tushar bose Nov 13 '15 at 16:30
2

You ask quite a few questions all at once here—far too many for all of them to be answerable in one answer. I’ll limit myself here to explaining what I think is the basic source of your confusion: the different units of measurements.

 

DPI, PPI, and DP

DPI is dots per inch (this can be easily looked up—it’s even in most dictionaries), which is a measurement used to define the density of scanners, printers, and other ‘real-world’ things. For screens, the traditional unit is PPI, pixels per inch (though some, like the Android documentation page linked to below, somewhat misleadingly use DPI for screens as well).

DP is density-independent pixels, a unit created to account for the varying density (in PPI) of different types of screens.

‘Density’, as the DPI and PPI names suggest, refers to how many pixels a given type of screen contains in the physical space of one inch, i.e., the physical size of each individual pixel.

 

A practical example

If you have a screen that has a physical size of 5” x 5” (let’s just assume it’s rectangular for ease of calculation) and a density of 96ppi (common enough in older mobile screens), the entire screen consists of (5 x 96) x (5 x 96) px = 480 x 480 px = 230,400 pixels. If you make a box 480 pixels wide and 120 pixels tall, it will fill the entire width of the screen and one fourth of its height.

If you have a newer screen of the same physical size, but with smaller pixels at 326 ppi, that number changes drastically: (5 x 326) x (5 x 326) px = 1980 x 1980 px = 7,762,392,000 pixels. That’s about 33,690 times as many pixels in the same physical space. Obviously, if you view the same 480 x 120 px box as before on this screen, it will take up less than one fourth of the width of the screen, and only about one sixteenth of the height: it will be tiny.

Density-independent pixels are a way to work around this, at least in part. They are based on a specific density of 160 ppi, ignoring what the actual density of the screen is. Let’s use the same box on the same two screens again, but this time define it in dp instead of px. To calculate how big the box will actually appear on the screens, we now need to find the ratio between the imaginary base screen (160 ppi) and the physical screen: the small one at 96 ppi has a ratio of 160/96 ≈ 1.67 (1 ²⁄₃), while the large one at 326 ppi has a ratio of 160/326 ≈ 0.5. The size the box will appear on the screens is its size in dp divided by this ratio:

  • Old screen: (480 / 1.67) x (120 / 1.67) ≈ 287 x 72 px
  • New screen: (480 / 0.50) x (120 / 0.50) ≈ 960 x 240 px

If we take these sizes as being relative to the size of the whole screen, we can see how they’re now much closer to each other:

  • Old screen: (287 / 480) x (72 / 480) ≈ 59% x 15%
  • New screen: (960 / 1980) x (240 / 1980) ≈ 48% x 12.5%

So where defining the size of the box in absolute px made it 100% x 25% on one screen and 25% x 6% on the other screen (a huge difference), defining it in dp instead makes them fairly close to appearing to be the same size on both screens.

Much the same could be accomplished by defining it in per cent, but as you probably now from ‘regular’ web design, percentages have their own problems and caveats; density-independent pixels are a way to get a more uniform appearance out of an absolute unit of measurement.

 

Typography and SP

When dealing with typography, you should use the SP unit (scale-independent pixels) instead of DP. SP work the same way as DP, but they also take into account the user’s text-size preferences. So if a user has set the basic preferences on his phone to always use larger text (say, 120% of normal size), text set in 12sp will be 12dp x 120% = 14.4 dp; i.e.:

  • Old screen: (14.4 / 1.67) ≈ 8.62 px (1 line ≈ 1.77% of screen height)
  • New screen: (14.4 / 0.50) = 28.8 px (1 line ≈ 1.45% of screen height)
  • Wouldn't it be easier to say its all about pixels and who cares how dense the screen is since you cant know how big the NEXT screen is – joojaa Nov 13 '15 at 15:41
  • @joojaa In a way, yes—except I'd say it's all about perceived physical size relative to full screen size, rather than pixels as such. But yes, the whole point is that the density of the screen has to be made a non-issue, which is exactly what DP/SP try to do. – Janus Bahs Jacquet Nov 13 '15 at 15:45
  • Thanks for taking out time and answering in such detail. I have somewhat understood the dp/sp situation. @JanusBahsJacquet is right. With tech development going so well and ppi increasing with every panel...pixel independent unit is necessary. But getting a hang of things is a pain. – tushar bose Nov 13 '15 at 15:48
  • @tusharbose we have had pixel indeoendent units for about a few thousands of years... although not as standardized as the metric units. why invent more? – joojaa Nov 13 '15 at 15:55
  • I know....I read somewhere that apple uses pts for measurement. But google wanted something different. – tushar bose Nov 13 '15 at 15:56
1

For the purpose of understanding what they are, PPI and DPI are exactly the same, dots or pixels per inch. PPI is the digital version of DPI.

What you need to understand is that a dot or a pixel has no physical size. It can be 0.0000001mm2 or 1m2. When you get too close to a large outdoor digital advertising board you can actually see the pixels and they're pretty big.

If a file is 72 DPI/PPI, that means there are 72 dots or pixels squeezed into every inch. The more dots/pixels per inch, the higher the quality of the image will be.

Now, if I recall correctly, my Nexus 5 has a screen of 442 PPI. That means that they've fitted 442 pixels into each inch. When you look at a 442 PPI image on a standard 72-96 PPI laptop screen at 100% zoom it is going to be nearly 5 times bigger than a standard resolution 96 PPI image because it has nearly 5 times as many pixels.

So the bottom line is, for higher quality screens, you need higher quality (larger) graphics.

0

If anyone else is stuck where I am... I found a work around. Heres what I did to bypass calculating pixels.

1) Make a new file in photoshop with your device's dimensions. for mine its 1080x1920 for nexus5.

3) Visit this link: https://www.youtube.com/watch?v=8f3h7id7EN0
make sure to uncheck resample if you are using photoshop cc. or you will change the dimensions of your document.

4) Now everything can be measured in dp.

I am still completing the design. I'll report back if it works for real. So far action bar,status bar and the nav bar are a spot on match in terms of measurement.

Everyone who answered...Thanks for the patience and the guidance. Thank you all.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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