Would you like to tell us how we are doing?

You bet No thanks

Design units for measurement

A design unit (du) is a unit of length that simplifies the creation of layouts across devices that have different screen specifications. UI elements such as components and icons have a base design unit value that you can use to scale assets for all BlackBerry 10 devices.

A design unit is independent of a display’s resolution and takes the standard user-viewing distance into account. One design unit equals approximately 0.69 mm of screen space. BlackBerry chose 0.69 mm after careful consideration of current and future screen specifications and how well the length fit into the rhythm of our user interface.

If you know the device's bucket, you can convert a design unit value into a pixel value.

Device Model Screen resolution and density Bucket

BlackBerry Z30 smartphone

BlackBerry Z3 smartphone

720 x 1280 pixels

295 ppi

8

BlackBerry Q10 smartphone

BlackBerry Q5 smartphone

720 x 720 pixels

330 ppi

9

BlackBerry Z10 smartphone

Porsche Design P’9982 smartphone from BlackBerry

768 x 1280 pixels

356 ppi

10

Future high-resolution device

1440 x 1440 pixels

452 ppi

12

The design bucket value indicates the pixel size of one design unit on the device. For example, 1 du on the BlackBerry Q10 smartphone is 9 pixels. If you have a radio button that is 5 x 5 du, it equals 50 x 50 pixels on the BlackBerry Z10 smartphone and 40 x 40 pixels on the BlackBerry Z30 smartphone.

You can reverse the formula to calculate du from known pixel values, making asset scaling easy. For example, if you have a square button 114 x 114 pixels that you created for the BlackBerry Z10 smartphone and you want to figure out the design unit size to scale the image for a 1400 x 1400 future device, here's how:

  1. Divide 114 by 10 (the design bucket for the BlackBerry Z10) to get 11.4.
  2. Round off to the nearest integer to get the du value (11 x 11 du).
  3. Multiply the du value by the design bucket of the new device (12) to get 132 x 132 pixels.


Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus