Why UI designers are using “dp” instead of “pixel” as unit to design mobile apps?

If you have ever paid attention to the default unit and size of artboard which any prototyping or mockup tool gives you for mobile app design, you will find that they are not using pixel as the unit.

Let’s take MockingBot’s default artboard size as example:

device types in MockingBot

The size of Samsung screen is set as 360*640.

But never think for one minute that their mobile screens are only 360px*640px, for Samsung’s sake. 😳

Let’s look at the real pixel size(resolution) of Samsung Galaxy S5, S6 and S7 screens.

Samsung Galaxy Metrics

For Samsung Galaxy S5, it’s 1080 x 1920px; For S6 and S7, both 1440 x 2560px.

However, they have the same “dp” size which is 360 x 640, as the left side column shows.

So the question appears: why are we having this “dp” here?

Answer: adapt your design to screens of different density.


First let’s have a review of screen density.

We use “dip”, which is the abbreviation for “dots per inch”, to measure pixel density.

For android, there are mainly six types of screen density.

Pic source: captechconsulting.com

Pixels are more dense with higher “dip”, as the picture below shows:

Pic source: printmailpro.com

So now imagine that we make an icon of 4 x 4px. When it’s displayed on two screens of 160dpi and 320dpi, sadly, we fall into this troublesome situation:

The layout and proportion are totally messed up!

That’s why we need the unit “dp” here. Dp is short for “Density-independent Pixel”, also abbreviated as “dip”.

The unit is relative to a 160 dpi screen, so one dp is equivalent to one pixel on a 160dpi screen, and equals two pixels for a 320dpi screen.

The numeric value formula is:

px= dp* (dpi/160)

Therefore if we make an icon of 4 x 4dp, it will be displayed as 4* 4px on a 160dpi screen, and 8*8px on a 320dpi screen.

Problem fixed!

The layout is beautifully consistent across a variety of screens.


That’s also why designers need to download 1X, 2X, and 3X size images when handing off design files to developers. They need to meet the demand of multi-density screens. For example, MockingBot allows designers to download all the versions in simple one click, saving designers from repetitive work.

MockingBot Handoff mode

Now that you understand that the pixel size of one mobile screen should be converted to dp size before the design of mobile apps, you may wonder whether you need to do all of this manually.

Nope.

Let the prototyping tool do their work.

Considering many full screen phones spring up this year, MockingBot just adds Google Pixel 2 and Google Pixel 2 XL as the default dp sizes of Android devices.

Creat project in MockingBot

Simply click “create a project”, and choose the right device you need! Don’t bother yourself with the conversion from px to dp.

All you need to do is enjoy your design. :)


Let me know if you have any idea about this article!