Screen 07 / 18 · Learn
Lesson
A video lesson with a clay player, the course progress and tabs for notes, the transcript and questions.
- Player with scrubber and controls
- Notes / Transcript / Q&A tabs
- Up-next list and next button
Product Design Foundations
Section 3 · Lesson 10 of 16
Grids that do the work for you
A grid is a promise: everything lines up, so people stop noticing layout and read.
Mobile: 4 columns, 16px gutters, 20px margins. Tablet: 8 columns.
- 04:12
So far we placed things by eye. That works for one screen, but it falls apart on the tenth.
- 04:40
Let's set up a four-column grid on our 390-point frame, with sixteen-point gutters.
- 05:12
Now watch what happens when the card snaps to two columns instead of three.
- 05:38
The text block and the image share an edge, and the whole screen calms down.
Should the bottom tab bar sit on the grid too, or span edge to edge?
Is 20px a good outer margin on small phones, or is 16px enough?