Page intent first: decide the page's job before choosing any component
Design a page from its job, not from a template: classify the intent (brand impression, explain, teach, convert, search, portfolio, workflow, publish, trust), state the required decision fields, and pick a composition before any component.
Overview
What: Before laying out a page, name what the page is for and let that drive composition. Most weak pages were built from a template ("hero, three cards, CTA") and only afterwards filled with a purpose.
Why: A page has one primary job. When the job is chosen first, hierarchy follows naturally: the dominant element in each viewport is the thing that does the job. When components are chosen first, everything ends up with equal weight and the reader has to work out what matters.
Use when: every new page or screen, and every redesign brief. It takes two minutes and removes most "generic template" outcomes.
Do not use as: a substitute for content. If the page has no real proof, product surface or copy yet, intent classification tells you what to gather, not how to fake it.
Implementation
- Classify the intent. Pick one primary (and at most one secondary) from this table and read off the design direction:
| Intent | Design direction |
|---|---|
| Brand impression | cinematic or immersive first screen, motion-capable, minimal copy at first |
| Explain a complex product | progressive disclosure, diagrams, real demos, annotated sections |
| Teach a concept | editorial flow, practice zones, checkpoints, worked examples |
| Convert visitors | clear promise → proof → objections → one CTA sequence |
| Let people search | search-first layout, filters, grouped results |
| Show portfolio work | case-study rhythm, large visuals, process evidence |
| Support an application workflow | workspace layout, persistent actions, explicit state |
| Publish knowledge | documentation IA, readable column (45–75 characters per line; in CSS max-inline-size 45–65ch, default 60ch, since 1ch ≈ 1.2–1.5 characters), anchors, examples |
| Build trust | verifiable proof, credentials, process, restraint |
- Write the intent note before any markup. Keep it to eight lines; if a line cannot be filled, the brief is not ready:
Page type:
Primary user action:
Emotional tone:
Content density: (sparse / medium / dense)
Motion level: (0 static … 5 shader-heavy; see motion-purpose-principles)
Recommended composition:
Recommended stack:
Anti-patterns to avoid:- Choose a composition, not a component set. Pick one from: hero-first · editorial longform · immersive canvas · split narrative · guided lesson room · comparison flow · proof ladder · interactive demo · product walkthrough · search workspace. Only then select components that serve it (see
lesson-non-card-content-layouts). - Name the dominant element per viewport. For the first three viewports, write down the single thing that should own each. If two things compete, cut or demote one.
- Record rejected defaults. List the generic shapes you deliberately did not use (equal-height card wall, three columns under a centred hero, icon feature grid) and why — this is what reviewers check first.
- Hand the note to the design gate (
lesson-pre-build-design-gate) as its first input.
Verification
- An intent note exists for the page and every field is filled with something specific to this product (no "modern", "clean", "engaging").
- The chosen composition can be named in one phrase and is not "hero + cards + CTA".
- For each of the first three viewports, one dominant element is named and visibly dominates at 1280 px and 360 px.
- The primary user action in the note matches the most prominent interactive element on the page.
- Rejected defaults are listed, and none of them appears in the build.
Sources:
Limitations
- Intent categories overlap (a portfolio page also converts). Pick the primary deliberately; a page that tries to serve four intents equally serves none.
- Application screens use a different vocabulary (screen, state, flow, task) — classify the surface first (
lesson-surface-classification-before-composition) so a workspace is not designed as a long-scroll page. - The intent note is a thinking tool, not evidence. It does not prove the composition works; a five-second test and a task walkthrough do (
lesson-design-critique-and-lightweight-tests). - Values verified 2026-09-26: 2 against published guidelines, 1 measured or computed in Chromium lab tests; remaining judgement defaults are marked as such in the text.