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
- Information hierarchy. Most important information first. Every section earns the right to the next.
- Progressive disclosure. Layer complexity: headline → subhead → body → detail.
- One job per element. Every heading, paragraph, image, and CTA has exactly one job. If it does two, split it.
- Scannable structure. 80% of readers scan. Headers, bold, bullets, breaks.
- Behavioral triggers over rational arguments. Lead with loss aversion, status quo bias, social proof. Rational justification follows.
- Consumption over conversion. Conversion follows comprehension.
- Whitespace is content. Dense layouts signal low quality.
- 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.