OS Scaling vs figma designs
Hi!
Some time ago I was creating designs for a web app for a desktop-only version, and after implementation I hit a small problem, namely the final look was definitely larger than the design from figma.
Today I came to the conclusion that the cause was two things:
- system scaling of the interface
- hardcoded element sizes in px
As I found out today, each device ( I mainly checked windows here) has different default scaling depending on the screen and resolution. For a desktop monitor with a 2k resolution, the scaling in the system is set to 100%, for a 15' laptop with a 2k resolution it's 125% and for a 12' tablet with a similar resolution, for example, it's 150%.
While the second cause is already more of a result due to the first one, it makes me wonder more about how to prevent this for the future.
The designs were made on 1920x1080 frames which made them seem simply too large when scaled up more, and since they were designs that were also based on a particular aspect ratio of the height of the elements (table, bars, etc.) it looked even worse.
Therefore, I would like to get some advice on which resolutions are best to create designs for desktop and possibly tablet/mobile keeping in mind also such aspect as scaling?
By now I have read only that:
for laptops with windows a good choice is 1366x768
for laptops with mac os a good choice is 1440x900
for desktops with external monitors 1920x1080
But I would like to know how it looks from the side of a more experienced designer
2 Replies