A layout is arranged according to platform specific layout grid settings. For web, our grid follows specifications that are linked to viewport ranges by using breakpoints.
How the layout grid works
The grid adapts to the current screen size. Elements that are vertically stacked on the smallest screens (mobile screens) may be placed next to each other on larger screens. This way, the most optimal view will be shown for each touchpoint. The grid uses columns to lay out and align this content. This also means that you have control over the amount of columns the element should occupy for every viewport range.
Breakpoints
Breakpoints are needed to adapt to different screen sizes. As the name suggests, these are the points where the layout will ‘break’, or change. This allows us to optimise for the kind of device, or viewport width.
Each breakpoint introduces different grid settings. This means that every viewport range (the pixel range before or after a breakpoint) results in another layout grid. These ranges are named based on the kind of devices they represent (on average, as this is never exact).
Mobile range
|
Viewport range |
Columns |
Gutter |
Margin |
|---|---|---|---|
|
0 - 599px |
4 |
16 |
16 |
Tablet / mobile landscape range
|
Viewport range |
Columns |
Gutter |
Margin |
|---|---|---|---|
|
600 - 959px |
8 |
24 |
24 |
Desktop/ tablet landscape range
|
Viewport range |
Columns |
Gutter |
Margin |
Max-width |
|---|---|---|---|---|
|
960+px |
12 |
24 |
24 |
960px |
Figma frame sizes
As mobile traffic numbers are high and worst case scenarios (in terms of screen sizes) should be supported, designing for these devices is a good starting point. On the other hand, a wider, “desktop”, view is needed to demonstrate how the layout would shift and to support the high traffic numbers on that side. Everything in between should logically be supported as well, but often doesn’t need specific designs.
As a designer, you have to start somewhere when setting up your design file and frame sizes. Although mobile screen sizes are getting increasingly larger, we set up our frame sizes at 360px to support the smallest sizes. For desktop, we design at a 1440px frame size.
Choose the right grid presets (part of the Blueweb library) for your frames to design according to the layout grid.
