An ultimate guide to select perfect artboard size for your next mobile UI Design

Since I started to design products, I fell in love with mobile UI Designs, but the only thing that always causes trouble is to select perfect Artboard size for both Android and iOS.

I think everybody faced the problem for selecting the right artboard size, be it in Sketch App, Adobe XD, Adobe Photoshop, Figma, Framer, etc...

I have been calculating different screens, dpis, dips, pts, pixels, etc... and tried to find the best way to increase productivity without spending and wasting time to select perfect Artboard size for Mobile UI Design

Why tho? It's already available in softwares, just click A or F bro...

Yes I know, by selecting a preset artboard you can easily create an artboard and start working on that. But problem starts when there are different values in each software for different sets of devices.

Most of you have checked the prototypes in your smartphones and saw the disturbing inner bezels, just because of wrong or default selection of artboard.

Screenshot of SketchApp with default Pixel 2 artboard and Pixel 2 XL artboard placed. Here you can clearly see the difference, size of Pixel 2 artboard (412X732) is larger than Pixel 2 XL artboard (360X720).

In Adobe XD, you only have 360X640 for Android, in Figma you have Pixel 2 with 411X731 value; I mean why would I make an artboard for Android with a width of 411 where I have to use 4-8-12 point of girds.

Aspect-Ratio matters the most

Aspect ratio is primarily dictated by the size of your camera's sensor, taken from the width and height of an image (W:H).

The aspect ratio of an image describes the proportional relationship between its width and its height. It is commonly expressed as two numbers separated by a colon, as in 16:9. For an x:y aspect ratio, no matter how big or small the image is, if the width is divided into x units of equal length and the height is measured using this same length unit, the height will be measured to be y units.

In simple words, it is a ratio between height and width of a scalable resolution of an image or a screen.

16:9 is most popular aspect ratio, due to its considerable width, this format is considered panoramic. In other words, it captures a wider area than other aspect ratios. In the late 2000s, it surpassed the 4:3 video format in popularity and is now the standard for television and online content.

Modern smartphones companies are racing towards larger screen and better resolution, day by day. But due to vertical nature and average width of holding a smartphone, companies maintain width within a ratio of 9 and increases the height i.e. 16 (panoramic ratio).

dp or pts or pixels ?

While handoff you can select whatever metric you want to select for particular OS, but while designing you can work only on pixel values. How?

It's simple maths actually!

Perquisites:

Aspect ratio of device you're designing for, most common aspect ratios are-

• 12:9 or 4:3 (iPhone - 4s, downsampled), (Old Android devices)
• 16:8 or 2:1 (Old Android devices)
• 16:9 (Standard panoramic ratio), (Android devices till 2017 includes Nexus and Pixel series), (iPhone5 - SE, downsampled),(iPhone 6,7,8 and plus models)
• 18:9 (New Android smartphones e.g. Pixel 3 and Pixel 3 xl)
• 18.5:9 (New Android smartphones e.g. Galaxy S9 and S9+)
• 19:9 (New Android smartphones e.g. Galaxy S10, S10+, Note 10)
• 19.5:9 (New Android smartphones e.g. OnePlus 7 pro)(iPhone X and 11 series, upsampled)
• 20:9 (OnePlus 7T, Samsung Galaxy A70 & A80)
• 21:9 (Xperia Devices, Motorola one, Samsung Galaxy Fold)

Screen resolution of your device (Google it for ease)

_______________________________________________________________

Here comes the calculation part:

Let's assume, 1dpi (dots per inch) = 40

To get artboard size for your UI design you have to multiply aspect ratio of your mobile device with 40, for an e.g. for Galaxy S10, I have to multiply 19:9 with 40, which will give me an Artboard size to work on (it will help me to export and render the same design for any screen within 19:9 ratio)

19X40 = 760 9X40 = 360

Hence the size of an artboard is 360X760 (portrait or vertical orientation)

For an iPhone X, it would be

19.5X40 = 780 9X40 = 360

But as you have noticed that Artboard size of iPhone X in softwares and guidelines is always 375X812 and it's due to the resolution of screen Apple provides. Higher density in screen results a specific Render rate (which is 3x in case of iPhone X) and to maintain the resolution of 1125X2436, they upscale the size of independent points.

Conclusion

So after this short article, hopefully you’ve learned something. Let me quickly summarise all that I’ve said. First of all, you should always get that smartphone manufacturers do manipulate(upsample/downsample) the screen resolution and independent pixel/point size to differ from others, likewise clocking speed of CPU and GPU. Then after you have to set a size of an artboard according to device you're using to test or target with the help of above calculation, and start creating the designs that you think will work.

If you liked my article, connect with me over LinkedIn and say "Hi ??". Support my content by pressing ??.

You can write to me directly via WhatsApp or find me on Instagram or Dribbble as @appy013