Layout & Composition

Grids, balance, focal points and the rules that make a page feel designed.

Video tutorialTrack course · Envato Tuts+

Graphic Design Full Course for Beginners

Speed

0.75x1x1.25x1.5x2x

Skip intro Next lesson

Watch 00:00 · 2 checkpoints Watch on YouTube More on this topic

Transcript & captions .txt

11/11

1. 00:00Layout & Composition. Grids, balance, focal points and the rules that make a page feel designed.
2. 00:06Composition decides what the viewer sees first, second and third.
3. 00:11If everything shouts, nothing is heard — a strong layout has exactly one hero element.
4. 00:17Grid: 12 columns for web, 3-6 for print. Every element snaps to it.
5. 00:22Rule of thirds: place the focal point on an intersection, not dead centre — unless symmetry is the statement.
6. 00:29Visual hierarchy: hero → supporting → detail. Test by squinting.
7. 00:34Balance: symmetric feels formal and stable; asymmetric feels modern and dynamic.
8. 00:39Negative space: the most underused premium signal in design.
9. 00:44A simple 12-column grid (css): .layout {…
10. 00:49See hierarchy at work — edit the sample and run it in the browser.
11. 00:54Note: The squint test: blur your eyes at the design. Whatever you still see is your hierarchy. If it's nothing, increase contrast and scale.

Composition decides what the viewer sees first, second and third. If everything shouts, nothing is heard — a strong layout has exactly one hero element.

• Grid: 12 columns for web, 3-6 for print. Every element snaps to it.
• Rule of thirds: place the focal point on an intersection, not dead centre — unless symmetry is the statement.
• Visual hierarchy: hero → supporting → detail. Test by squinting.
• Balance: symmetric feels formal and stable; asymmetric feels modern and dynamic.
• Negative space: the most underused premium signal in design.

.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin-inline: auto;
}
.hero  { grid-column: 1 / 8; }
.aside { grid-column: 9 / 13; }