Consistent spacing is one of the things that makes interface structure more clear and easy to scan.
Our spacing is based on a 4-pixel grid, let’s use these sizes:
|Size name||Desktop||Mobile||Examples of use|
|xx-small||4||4||Great for really small spaces like connecting an error message to form, eg.|
|x-small||8||8||Great when you need to connect related components, like a header and a description.|
|medium||16||16||Great for inner padding, left & right padding of the screen when placing content on mobile.|
|large||24||20||Great for left & right inner padding in sections.|
|xxx-large||52||44||Great for space between illustration and header.|
Space aligning in Sketch
Space in Orbit – future
Once we have layouts and grids defined, we can create some Sketch templates that can really speed up our design process.
@tales.ebner is our new Grandmaster of Space. He'll settle this frontier of space for us and offer a more sophisticated guide on how to conquer it.