Offered by Dead Brands
Layout is the invisible engineering that makes a page, poster, or screen feel inevitable instead of accidental.
Use it over MCP: connect to https://mcp.deadbrands.co/hub/mcp and call skills_get with slug layout-and-composition.
# Layout and Composition
Credit: SteTy — published free in the Skills Hub
Layout is the invisible engineering that makes a page, poster, or screen feel inevitable instead of accidental. This skill covers the working toolkit of professional composition: grid systems, the rule of thirds, the golden ratio, Gestalt grouping laws, white space, alignment, and visual weight — plus concrete recipes you can apply to a poster, a web page, or a game screen today.
## Overview
Composition answers one question: where does everything go, and why there? Amateurs place elements where they fit; professionals place them where a structure says they belong. The structure is usually a **grid** — Josef Müller-Brockmann's *Grid Systems in Graphic Design* (1981) codified the Swiss Style approach: divide the format into columns, rows, and margins so every element aligns to shared axes. Layered on the grid are perceptual laws from Gestalt psychology (Berlin, 1920s, Wertheimer, Koffka, Köhler) that predict how viewers group what they see. Add proportional systems — thirds, the golden ratio (φ ≈ 1.618) — and a sense of visual weight, and you can build layouts that read clearly at a glance and hold together at a squint.
## Core Principles
- **Order before decoration.** Müller-Brockmann's grid philosophy rests on order, consistency, and hierarchy: predictable alignment reduces the reader's cognitive load.
- **Alignment is meaning.** Any two elements that share an edge or axis are perceived as related. Accidental near-alignments (off by 3px) read as mistakes, not freedom.
- **The eye enters at a point and travels.** In left-to-right reading cultures the gaze starts top-left (the Gutenberg diagram: primary optical area top-left, terminal area bottom-right, with a weak "fallow" corner top-right and bottom-left). Compose a path, not a pile.
- **White space is an element, not an absence.** Margins and gaps group content (proximity), create luxury (generous space = premium), and give the focal point room to dominate.
- **Balance is weight distribution, not symmetry.** A small dark, saturated, detailed, or face-containing element can balance a large pale empty one. Asymmetry balanced well feels dynamic; symmetry feels formal and static.
## Techniques
- **Column grids.** Divide the canvas: 12 columns is the web standard (divisible by 2, 3, 4, 6); editorial print often uses 3–6. Set a **gutter** (20–24px web, 4–5mm print) and outer margins at least one gutter wide.
- **Baseline grid.** Set body text line-height, then make every vertical measurement a multiple of it (e.g., 8pt baseline: spacing values 8/16/24/32/48). Type, images, and rules all snap to the same rhythm.
- **Modular grid.** Columns × rows create modules — Müller-Brockmann's famous Tonhalle Zürich posters and his 20-grid-field divisions let images span 1, 2, or 4 modules while never breaking alignment.
- **Rule of thirds.** Divide the frame into 3×3; place the focal point on an intersection ("power point") and horizons on a third line. Fast, reliable for photography, game scenes, and hero images.
- **Golden ratio.** Divide so whole:longer = longer:shorter ≈ 1.618. Use for format proportions (a 1:1.618 card), focal placement (spiral to the small quadrant), and type-size steps. It is a seasoning, not a law — thirds is its practical cousin.
- **Gestalt grouping, applied.** *Proximity*: cluster labels tight to their fields, separate groups with ≥2× that gap. *Similarity*: same style = same kind of thing (all links one color). *Continuity*: align elements along a line or curve and the eye will follow it like a road. *Closure*: an incomplete shape (the WWF panda, built from black blobs) is completed by the brain — use it for logos and icons. *Figure/ground*: make the subject unmistakably the figure via contrast and isolation. *Common region*: a card border or tinted panel groups everything inside it instantly.
- **Visual weight levers** (strongest first): size, darkness/value contrast, saturation, detail/texture, faces and eyes, isolation by space. To rebalance a layout, adjust one lever at a time.
- **Squint and thumbnail tests.** Blur your eyes or shrink to 10%: you should still see the intended hierarchy — one dominant mass, a secondary group, then detail.
## Worked Examples
- **Swiss poster recipe (Müller-Brockmann style).** A1 portrait. Margins 40mm. 4-column grid, flush-left ragged-right Helvetica/Akzidenz-Grotesk. One huge grotesque element (a letterform or cropped photo) spanning 3 columns, title in the remaining column at the top, details small at the bottom-left, one accent color. Nothing centered; everything on a grid line.
- **Landing page hero.** 12-col grid. Headline spans cols 1–7, product image cols 8–12 bleeding to the right edge; subhead under headline at 60% size; single button below, aligned to the headline's left edge. The diagonal from headline (top-left) to image to button follows the Gutenberg path to the terminal area.
- **Photo composition.** Landscape shot: horizon on the upper third line, subject's eye on a power point, leading line (road, railing) entering bottom-left and exiting at the subject — thirds plus continuity.
- **Dashboard.** Modular grid 4×3 modules; the single most important metric gets a 2×2 module top-left (primary optical area), supporting metrics 1×1, a chart spans the full bottom row where the gaze terminates.
## Common Pitfalls
- **Centered everything.** Centering destroys shared edges, so nothing groups and the layout feels like a stack of plates.
- **Equal spacing everywhere.** Uniform gaps erase proximity grouping — the viewer can't tell what belongs with what.
- **Grid-breaking "creativity."** One element may break the grid for emphasis; five breaking elements is just no grid.
- **Trapped white space.** Holes of emptiness stranded mid-layout (not at margins or around groups) look like something fell off.
- **Golden-ratio mysticism.** Forcing φ onto every measurement produces worse layouts than a simple consistent scale. Use it for proportions, not as a religion.
- **Ignoring the fallow corners.** Putting the key call-to-action top-right in a left-to-right culture parks it in the weakest zone.
## Practice Drills
1. **Trace the masters.** Overlay a 12-col grid on three Swiss posters and three magazine spreads; redraw their grids exactly and note every span.
2. **One content, three grids.** Lay out the same article in 2, 4, and 12 columns. Compare scan speed and calm.
3. **Thirds drill.** Take 20 photos forcing subject placement on power points; then 20 deliberately centered. Review at thumbnail size.
4. **Gap surgery.** Take a cluttered form and fix it using *only* spacing changes (proximity), no styling allowed.
5. **Weight balance.** Compose an asymmetric poster using only black rectangles; balance a small heavy block against a large light one until it holds still visually.
## When to Use and Limits
- **Use it when:** a task calls for layout and composition, as laid out in the Techniques and Worked Examples above.
- **Watch first for:** Centered everything.; Equal spacing everywhere.; Grid-breaking "creativity." (see Common Pitfalls).
- **Limits:** this is a general reference drawn from public sources; it is a starting point for practice, not a full course, and attributions and dates should be checked against the cited sources before quoting them.
## Quick Reference
- φ = 1.618; thirds ≈ its fast approximation. | Web grid: 12 cols, 20–24px gutters. | Baseline: make all spacing a multiple of line-height (8pt system). | Gutenberg path: top-left → bottom-right; fallow corners: top-right, bottom-left. | Gestalt six: proximity, similarity, continuity, closure, figure/ground, common region. | Weight order: size > contrast > saturation > detail > faces > isolation. | Tests: squint, thumbnail, flip horizontal (fresh eyes), print at arm's length.