Spacing
Definitions
Margin : External spacing between an element and the ones on the same level
Padding : Internal spacing between element and its child elements
I am using spacing correctly if :
the spacing used helps me understand the hierarchy and grouping of elements on the page
developers can place elements on the page without input from a designer
designers can place elements on the page in less than 30 seconds
Standard : Use a spacing grid
How to define a grid
Define a basic spacing value (5pt, 8pt ...)
Use only multiples of that value to place elements on the page
Pro-tip : Material Design uses an 8pt-grid
Using a grid brings consistency and ease of mind
It reduces the amount of time needed to position elements by reducing choice
It ensures a visual harmony of the positioning and sizing of elements by using only multiples of a basic value
For elements with fixed width or height, fix that dimension using multiples of the spacing value as well, for maximum consistency
Good practices
Add your grid basic value and some commonly used spacing dimensions on your styleguide
Define elements by margin instead of by size.
Sketch tips
Décaler les éléments de 10pts dans une direction : shift + flèche
Mesurer la marge entre deux éléments : sélectionner un élément + alt sur l’autre élément
On peut faire des calculs simples (+, -, *, /) dans l’inspecteur de Sketch
Helpful articles
Last updated
