This was a side project made in collaboration with a software engineer to explore possibilities of Material Design. The main idea was that screens differentiate by the background color and that there is a smooth transition between them.
Here is a small research I did of screen resolutions and aspect ratios. I think it’s useful to have it all in one place. It’s also very interesting to see different devices’ resolutions side by side.
In the Sketch file you can see screen resolutions of all Apple and Google devices (phone and tablet) and possible aspect ratios. It is safe to say that these cover almost all Android devices, and all iOS devices. Note that these are absolute screen resolution, which means they don’t necessarily reflect the physical size of the screen because of the different screen densities.
E.g. you might think that iPhone 6 Plus is a device similar to iPad judging by the resolution, but in reality there is a difference in screen diagonal of 4.2” in favor of the iPad.
That’s why everything needs to be defined using density independent units. For Android we use “dp” and “sp” (sp is used for font sizes, dp for everything else) and on iOS we use “pt”. Everything is defined for baseline density (mdpi for Android, non-retina for iOS). From there the framework scales UI to keep it physically the same when rendered on different screens. In addition to that, If we want our interface to look crisp on all devices, we need to prepare assets to match the densities.
ldpi, mdpi, hdpi, xdpi, xxdpi, xxxdpi
@1x, @2x, @3x
If you’d like, you can download Sketch (3.2) file and look at the examples here.