What?! Something on layout, again?!
Yep. Layout is so so so important. And up until this point in the UX process, there’s a good chance that the layout on any wireframes is far from refined. But don’t fret! That’s how it’s supposed to be. You shouldn’t worry about the details when you’re wireframing. That’s what this stage of the UX process is for.
These layout principles very much matter, especially for the visual design phase. Make sure to apply them appropriately in your designs.
At this point in the process, you'll go back over your designs with a fine-tooth comb and make sure everything is sitting where it needs to. For example, ensure the same spacing rules apply across your designs.
When creating a digital product, you’ll want to have a consistent system in place for the sizing of elements and the space between them. For example, there should be the same amount of space between a header and the content below it no matter where you look in a product.
This is where the 8pt grid system comes in. The 8pt grid system uses increments of 8 to size and add space between elements on a screen.
Why 8pts? Long story short, if an object renders on a half pixel, it will be blurry on a low resolution screen. So if you used a 5-pt grid system and needed to export assets at 1.5x, that would be problematic because it would render on half pixels, causing blurriness.
With such a large variety of different screen sizes, it can be tough to create only 1 set of assets that work across a plethora of devices. Using 8 for sizing and spacing elements makes scaling simple because it divides and multiplies into even numbers rather than half pixels. This makes it so objects that are scaled to .75x, 1.5x, 2x, 3x, and so on are all aligned on the pixel grid and don’t look blurry.
The 8pt system is incredibly valuable because it saves you time, while providing a steady rhythm and sense of harmony for your content. It makes the product look well designed across all platforms.
Additionally, it makes communication with developers much simpler because there’s a system in place that both designers and devs can reach for. If devs are struggling with a component’s spacing, they know that it has to be an increment of 8 instead of having to measure it themselves.
The spacing between elements shouldn’t be arbitrary. Keep your spacing consistent. Make sure the spacing between all similar sections is equal. For example, if you use 48px between your H1 and H3 on one page, use this consistently across all parts of your design.
It’s important to point out that many websites and products don’t use the 8pt grid system. If you’re designing a product that doesn’t use the system, spend some time learning their spacing and sizing strategy.
