Member-only story
Pixel-perfect design — a question of doing the math
Do you like counting pixels?
If yes, you can relax. If no, this is even more important.
Pixel-perfect design provides the most precise creative content design as every pixel is accounted for and utilized
For example, a static iPhone X screen viewport measures 375 x 812 pixels, (pixel ratio of about 3). This provides the designer with 304,500 pixels to design with. That is a lot of pixels to create with.
For the design blueprint, or wireframe, screen elements need to be separated into units. Units need be specified either in actual pixel, or in percentage proportion to the device screen size. Maximum user experience, such as tapping, scrolling, and zooming, needs to be integrated into the design elements.
Pixel measurements are design concept guides, and can get written as em/rem, based on css presets base em/rem (root em), for example, root font size of 12 px div {font-size: 1.5rem;} = 18px.
Lead UI elements, such as top status and bottom toolbars, guide the designer with precise pixel specifications
In the iPhone X example, at 375 px w x 812 px h, the required UI elements are part of the design screen.
The top status bar comes with a preset height of 44 pixels. This is an important UI element to start with, adding a top margin of 44 px and thereby already reducing the overall size of the design screen.
If a bottom tab/toolbar is needed, as a preset UI element, it has a height of 83 pixels. At the height of 83 pixels, this height specification integrates maximum user finger tapping interaction.
Thus, the actual design area is now set at 375 px width by 685 px height, from the actual screen size of 375 px width by 812 px height at the onset.
