An ultimate guide to selecting the perfect artboard size for mobile

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 have 412X847 for Pixel 3XL and 412X870 for 4/4XLAndroid, in Figma you have Pixel 2 with 411X731 value; I have to use 4–8–12 point of spatial grid system and this size contradicts with that.

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.