How to create a pixel-perfect UI Design!
4 & 8 PT Grid
Is a system for sizing, spacing, and laying out components relative to one another. This means that any padding, margin, button height, etc. is a multiple of 8, you can also use 4 pixels for smaller spaces.
*The exception to the rule…
Sometimes you will need to adapt your design in order to get visual balance. Trust your instincts!
Wait! What it is Pt?
A point (pt) is a measurement of space that is dependent on screen resolution.
‘1x’ resolution (or @1x) 1pt = 1px.
How it works:
Hard grid
Elements are sectioned off and positioned relative to a container element higher up in the hierarchy.
Soft Grid
Individual elements are positioned relative to each other rather than to an actual grid.
Why it matters?
*Better legibility
*Visual hierarchy
*High level of design
*Fewer decisions
*Multi-platform design
*Consistent user experience & scalability
*Helpful for the development process
