Mobile Layouts & Grids
Tutorials
The invisible guides
There are some things users don’t see, but we as designers use them to make laying out components on the screen easier and more consistent. When you design a screen, you have different components which differ in size and distance relative to each other. Here is a brief overview of how to structure a screen to make quick decisions while designing.
The margins!
Margins are spaces that sit between content and the edges of the screen. They are defined with a fixed width — usually 16 px, but some apps use 20 or 24 px margins.
All the sizes of UI elements and spaces between them are set as a multiple of the number 8. Why 8? Because it’s easy to divide most of the mobile screens into 8pt grid.
Things between the margins
The content is placed inside the columns (within margins). These help us make decisions on where to place an element and make a well structured interface. Columns help developers to create consistent layout across multiple screen sizes. Most common number is 4, but you can try 6 or 8. The width is defined using percentages, rather than fixed values.
What about gutters?
Gutters separate the content in the columns. The recommended value for the gutters is also 16 px. Less than 16 px is usually not enough to keep elements visually separated but hey, maybe 8 px might work sometimes. Try it out for yourself.
Should I divide the screen horizontally too?
Horizontal UI grid is used to horizontally align UI elements — such as buttons, cards, and switches. Horizontal grid is set on 8 px rhythm (here’s that number 8 again). This will ensure that the vertical and horizontal spacings are in sync.
Baseline
Text sits on a baseline grid. The baseline grid helps you to keep the rhythm of various texts on the screen consistent. If you want to know more, you can search for “4 px grids”.
Ok, but how do I set that up?
It’s not that hard, assuming you use Sketch. Here are the steps:
1. Create a new Artboard (in this case iPhone 8)
2. Go to the View → Canvas → Layout settings
3. In the Layout settings window type in the values
That's it?
Click OK and look at your beautiful layout ?
Extra tip
In the Sketch preferences set up a custom nudging values so you can always move things on the 8 pt grid.
That’s it for now
That’s our short overview of things that should help you to start exploring grids. Don’t worry if a component works and looks better when it’s not perfectly aligned on the grid — grids are here to help you, but you don’t have to follow them blindly. If you keep most things aligned, small adjustments won’t break anything.
The content will define the grid, not the other way around.