Mobile Layouts & Grids

Tutorials

Tutorials - Mobile Layouts Cover

The invisibe 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.

Tip: iPhone 8 screen has 375 px width, so you’ll have to steal 1 px from a component to keep an 8pt grid. Don’t worry, devs use percentages anyway.

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.

Tip: Not every element in the component has to align with the vertical column. Align the bounds of the components with the columns.

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”.

Layout settings

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

Grid

That's it?

Click OK and look at your beautiful layout ?

Tip: Play around with numbers a bit. Maybe try 6 columns or 8 to see what will happen and how you can use it.
Nudging settings

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.

NEXT ARTICLE
Neat Folders & Files
Tutorials
More treasures ahead
E95CC837-0713-48B5-BAA1-FC9DD4FA6399Arrrrr!
A true explorer like you is always in search of new quests and gems. How about we send you one every month?
TOP