Key Takeaways — Chapter 10: Design and Layout

A one-page summary card. Use it to re-ground before the quiz, or to review weeks later.

The one idea

Design is not decoration; it is part of the meaning. The reader looks at your page and decides—in about half a second, before reading a word—whether engaging is going to be painful (the flinch test). A well-written document in a hostile layout goes unread, the same way a correct-but-buried conclusion fails to arrive (Chapter 4). You don't need to make documents beautiful; you need to make them readable, and readable by everyone. Most technical documents aren't over-designed—they're un-designed (tiny type, no white space, no hierarchy, a gray wall). Clearing the bar is easy.

The core moves

  • Typography: bigger type, shorter lines, looser spacing. The serif-vs-sans choice barely matters. What matters: size (≥~11pt / 16px, lean larger), line length (~45–75 characters; the most common mistake is full-page-width text and its error-prone return sweep), and leading (~120–145% of type size). Default to left-aligned, ragged-right (drop forced justification). Monospace for code only.
  • White space and hierarchy turn a block into a page. White space groups related items and separates unrelated ones (proximity), rests the eye, and signals care; margins also shorten the measure. Make heading levels look obviously different (size + weight + space), with more space above a heading than below so it attaches to its own section.
  • Emphasis works only by contrast. Emphasize one or two things, not twenty—over-emphasis cancels itself. Bold sparingly; italics for real uses; no underline-for-emphasis on screen (it means "link"); ALL CAPS only for tiny labels.
  • Design for everyone (accessibility is central here):
  • Contrast — body text ≥ 4.5:1 (large text ≥3:1). No light-gray "modern" text. Check with a tool, don't eyeball.
  • Color independence — never color alone. Pair it with a label, icon, or shape (≈1 in 12 men are red-green color-blind; grayscale printouts erase color). Use color-blind-safe palettes (blue/orange, not red/green).
  • Real structure — real (semantic) headings, real lists, alt-text that conveys what each figure shows, meaningful link text—so screen readers can navigate. The heading hierarchy that serves sighted scanners (Ch 4) is the structure that serves screen-reader users: one effort, both audiences.
  • Templates are a gift; use them well. Let the template own the pixels (type, margins, palette, often accessibility); supply your own structure of meaning (cut/rename/reorder sections, emphasize your key point). "Generic" comes from thoughtless filling, not from templates.

The diagnostic

The three-second look. Before sending, glance at the page without reading for three seconds. Can you see where to start, what matters most, and where to go? If it's a gray block, it fails—add hierarchy and white space. And the inverse check: is everything shouting, and does any meaning rely on color alone? A page can fail by being too gray or too loud.

The two cautionary tales

  • The wall of text (Case Study 1): solid writing, no design—fixed by adding hierarchy, white space, a bottom line, and one emphasis. Same words, now read.
  • The beautiful dashboard nobody could read (Case Study 2): too much color and emphasis, low contrast, color-only status—fixed by removing (calming the palette, restricting emphasis) and adding accessibility cues. More design isn't better design.

The test to apply before you send anything

If the reader looks at this for three seconds without reading, can they see where to start and what matters—and can every reader, however they see, extract the meaning?

If no, the design is failing the writing. Fix the surface.

Themes this chapter surfaced: #5 structure-serves-the-reader (layout is structure made visible) · #7 the-best-writing/design-is-invisible · #2 audience-is-everything (the reading situation drives the layout).

Threshold concept: Design is not decoration; it is part of the meaning. A reader judges whether to read before reading a word.

Back to: Chapter 10 · Exercises · Quiz · Further Reading