Mobile-first
It’s critical mobile customers receive the best possible experience so it’s our starting point for all work undertaken.
Working in a smaller viewport allows us to deliver the most critical user journeys, then we scale up supporting content as the viewport space allows.
Breakpoints
Below are the range of breakpoints we use across our designs. Our grid Figma file provides a starting template for designs within these ranges.
|
Min width |
Max width |
Name |
Example devices |
|---|---|---|---|
|
0 |
575 |
Small (S) |
iPhone SE, iPhone 8, iPhone 13, 12 Pro Max, Google Pixel, Galaxy Note |
|
576 |
1023 |
Medium (M) |
Kindle Fire |
|
1024 |
1279 |
Large (L) |
iPads Landscape/Small Desktop |
|
1280 |
~ |
Extra Large (XL) |
HD Laptops, iPad Pro 12”, 13” Macbook Pro |
Figma frame sizes
|
Breakpoint size |
Figma frame size (px) |
|---|---|
|
Small (S) |
375 |
|
Medium (M) |
768 |
|
Large (L) |
1024 |
|
Extra Large (XL) |
1440 |
Layout grid
All of our designs should fit to an 8px soft grid (4px can be used in components for narrow padding).
Our grid component file contains optional layout grid styles that can applied to any frame – these are available as a layout grid style in Figma.
Grid Styles in Figma
These layout styles are made up of the following columns, gutters and margins. All of the layouts should be centre-aligned to the canvas.
|
Size |
Columns |
Gutter width |
Margin |
Artboard frame |
Margin width |
|---|---|---|---|---|---|
|
Small |
4 |
60px |
16px |
375px |
Center aligned |
|
Medium |
8 |
64px |
32px |
768px |
Center aligned |
|
Large |
12 |
68px |
16px |
1024px |
Center aligned |
|
Extra large |
12 |
68px |
32px |
1440px |
10px |
Max width
Line height
Line-height v baseline distance
It’s a soft grid, so there are no absolute rules, but a good rhythm based on an 8px grid will look something like:
- 24px, 32px, 48px or 64px between panels, cards and other page elements
- 1x the header line height before headers within elements or in runs of text
- 1.5 x line height before body text, bullets and links
- At least 24px above and below buttons
These gaps will vary according to the font sizes you’re using.
As a general principle, always remember to group related information and elements together. For example, a header should always be closer to the content it’s describing than whatever is above it.
This is based on the Gestalt principle of proximity.
When applying these guidelines, be sure to look out for excessive gapping or bunching of elements and adjust accordingly.
Resources
- Responsive testing tool - Test live sites in various breakpoints
- Figma grid visualiser - Converts Figma grids to frames to overlay mockups
- Figma responsive plugin - Preview designs in Figma at different sizes
- iOS resolution - iOS device screen sizes
- Screensiz.es - Directory of screen sizes by device
- 8-Point Grid: Vertical Rhythm – A good article on vertical rhythm
- Gestalt principles - A quick summary of the main Gestalt principles