Treat every piece of content as a design problem: who is the user, what are they trying to accomplish, what barriers stand in their way, how do you structure information so they act. Sits between visual design (design-principles.md) and sentence-level craft (copywriting).
The 8 principles
1. Information hierarchy. Most important information first. Every section earns the right to the next.
2. Progressive disclosure. Layer complexity: headline → subhead → body → detail.
3. One job per element. Every heading, paragraph, image, and CTA has exactly one job. If it does two, split it.
4. Scannable structure. 80% of readers scan. Headers, bold, bullets, breaks.
5. Behavioral triggers over rational arguments. Lead with loss aversion, status quo bias, social proof. Rational justification follows.
6. Consumption over conversion. Conversion follows comprehension.
7. Whitespace is content. Dense layouts signal low quality.
8. Mobile-first information architecture. If it does not work on a phone screen, the hierarchy is wrong.
Page architecture
Scanning patterns
- Z-pattern (visual-heavy pages): logo top-left, trust signals top-right, hero center-left, CTA bottom-right of hero.
- F-pattern (text-heavy pages): front-load each section. First 2–3 words of headings, first sentence of paragraphs, first bullet in lists carry disproportionate weight.
- Left-align body text. Center-aligned body breaks both patterns.
- Heading hierarchy is the scan navigation.
Gestalt grouping
- Proximity: items close together perceived as a group.
- Similarity: same shape/color/size = same category.
- Common region: shared background = related.
- Closure: brain completes incomplete shapes; use sparingly.
Cognitive load
Reduce extraneous load. Increase germane load. Strip every word, image, and section that does not earn its place.
Content structure patterns
- Inverted pyramid: lead with the conclusion. Best for emails, news, status updates.
- Modular blocks: independent sections that read in any order. Best for landing pages.
- Awareness ladder (Schwartz): structure long pages by reader awareness level.
- Pain-Solution-Proof interleave (Pitch a vision as pain → solution → proof, interleaved per beat — not three sequential acts).
Behavioral science
- Loss aversion (Kahneman): losses feel ~2x as strong as equivalent gains. Frame around what they're losing today.
- Status quo bias: people stick with the default. Show the cost of staying.
- Social proof: specific named customers > generic logo bar.
- Identity signaling: appeal to who they want to be seen as.
- Anchoring: the first number sets the comparison. Use deliberately for pricing.
- Friction as feature (Add friction when it helps users decide whether the product is for them): add friction when it helps users self-qualify.
UX writing
- Microcopy: every button, error, empty state has voice.
- Error messages: name what happened, why, what to do next. No jargon.
- Empty states: show the goal state, not "no items." Teach the next action.
- Buttons: verbs that match what happens on click.
Rapid prototyping
- Wireframe in low fidelity first. Boxes and headlines, no design.
- 5-second tests: show the page for 5 seconds, ask what the product does (B2B homepages must communicate use case, alternative, and result in five seconds).
- Comprehension tests before conversion tests.
Common failure modes
- Hero copy buried below the fold.
- Center-aligned body text on long pages.
- Multiple CTAs of equal weight competing.
- Important information mid-paragraph where scanners miss it.
- Generic "no items" empty states.
- Modal jargon error messages.
- Designing visuals before locking copy.
- Conversion-test before comprehension-test.