Booklet

author

Mike V Dijssel

Design

How to create consistent spacing in ul design

design

Design

|

HOW TO CREATE CONSISTENT SPACING IN Ul DESIGN

Spacing is EVERYTHING in Ul Design

WHY

  • It improves data consumption through better legibility
  • It provides customers with a more consistent user experience
  • It drives consistent scalability
  • It conveys meaning by giving elements a visual hierarchy
  • If you're a designer, your output will just... look better.

So... How DO WE WIN WITH SPACING?

THE 8-PIXEL GRID
To make the whole design look cleaner, it's helpful to first set the measurement value that will then determine all of the sizes. The best option is to stick to the proven rule to resize and move elements by exactly 8 pixels. This rule will streamline your decision-making.
NOTE: If you work with smaller elements, it's also ok to use 4-pixel increments, instead of 8 — occasionally, so you can make further adjustments, when required.

WHY 8PX?

  • Eight pixels is a sufficient minimum 'jump'.
  • Eight is a great number because it is divisible by four and two.

AND THE MAGIC 8 IS PERFECT FOR SCALING
You can easily resize any element without ending up with half pixels, If, on the other hand, you start with 10, you'll end up with 5 pixels, then 2.5 pixels, then 1.25 pixels.

TEXT & LINE HEIGHT
Regarding line height it can be tricky to make sure text elements fall within the grid. You can use the 8px rule for your line height, with smaller font sizes you can also ok to use the 4-pixel increments.

SOME PRO TIPS!

  • Use the magic 8px also on your baseline
  • Create a spacing system that will help you and your team. If the developer needs to make some quick changes, he can adjust by 8-pixel increments. This will ensure consistency and order.
  • For existing products, take a step back and build design rules based on the current assets.
  • Make sure you share it with the whole team and help them understand the benefits.

DO YOU USE GRIDS FOR SPACING?

More booklets by Mike V Dijssel

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets