Exercises — Chapter 10: Design and Layout

Writing and design are learned by doing. These exercises ask you to diagnose, redesign, and produce—not just recognize. Since this is a Markdown textbook, many "redesign" tasks are described in words: state the visual changes you'd make and why. Where a task is open-ended, a self-assessment rubric follows instead of a single answer.

⭐ = foundational · ⭐⭐ = intermediate · ⭐⭐⭐ = challenging · ⭐⭐⭐⭐ = extension

Part A — Analyze This ⭐

Identify what works or what's broken in each described layout. Name the principle (§ reference), not just a vibe.

A1. A one-page memo is set in 9-point Times New Roman, single-spaced, running the full width of the page (about 110 characters per line), fully justified. The content is excellent. List every typographic problem and name the principle each violates.

A2. A status dashboard shows project health using only cell fill color: green = on track, yellow = at risk, red = blocked. There are no labels or icons. Who can't read this, and what's the single fix?

A3. A README opens with a 400-word paragraph describing the project's history and philosophy, then—buried in the middle of paragraph three—the install command, in the same font as the prose. Name the two design failures (one structural, one typographic) and the chapter sections that address them.

A4. A slide for a conference talk contains four paragraphs of text in 14-point font, edge to edge, no images. Why does this fail as a slide specifically (not as a page)? Which chapter handles slides in depth?

A5. A report uses these heading styles: the title is 13-point bold; the section headings are 12-point bold; the body is 12-point regular. A reader says "I can't tell the headings from the text." Diagnose it using §10.3.

A6. A web article sets its body text in light gray (#AAAAAA) on white "for a clean, modern look." What accessibility standard does this likely fail, and roughly what contrast ratio does body text need?

A7. A paragraph has eleven bold phrases, two sentences in red, and one highlighted line. The writer says "I bolded everything important." Explain, using §10.5, why the reader now sees nothing as important.

A8. A document's heading list (as a screen reader would announce it) reads: "Heading 1: Report. Heading 3: Background. Heading 2: Methods. Heading 3: Results." Name the structural problem and why it matters for both sighted scanners and screen-reader users.

Part B — Revise This ⭐⭐

Redesign each described page. Describe the specific visual changes you'd make. Don't rewrite the words unless the task says so.

B1. The wall of text. You're handed a one-page project update: a single block of text, no title, no headings, edge-to-edge, no paragraph breaks, ~600 words. The content covers three things (what shipped, what's blocked, what's next). Describe, step by step, how you'd redesign this page using only design (typography, white space, hierarchy)—no rewriting. List at least five concrete changes and the principle behind each.

B2. The over-emphasized warning. An instruction page has a safety note in which the whole paragraph is bold, red, ALL CAPS, and highlighted yellow. Redesign it so the warning actually stands out and is readable. What do you keep, what do you remove, and why?

B3. The color-only table. A 12-row project table conveys status purely by row color (red/yellow/green). Redesign it to be accessible: describe exactly what you'd add to each status cell and why this survives color-blindness and grayscale printing.

B4. The cramped contact block. A footer reads, all run together: "Dr. Yusuf Demir Lead Engineer Platform Team ydemir@company.com +1-555-0193 Building C Room 220." Redesign using white space and proximity only (no new words). Describe the grouping and spacing.

B5. The flat release notes. A release-notes page is a single bulleted list of 25 changes at one level, no grouping. Readers "can't find anything." Redesign using white space and hierarchy only (no rewriting the bullets). Describe your grouping and headings.

B6. The generic template dump. A colleague used the company report template but left every default section ("Section 1: Introduction," "Section 2: Background," "Section 3: Details," "Section 4: Conclusion"), some empty, and applied no emphasis anywhere. The report is about a single recommendation (migrate to a new logging vendor). Describe how you'd adapt the template—what you'd cut, rename, reorder, and emphasize—to make it not generic, without abandoning the template.

B7. The exhausting line length. A web documentation page renders body text full-width on a 1600-pixel monitor (~140 characters per line). Readers report eye strain. Give the one-line fix and explain the mechanism (the return sweep, §10.2).

Part C — Write / Produce This ⭐⭐–⭐⭐⭐

Produce an actual artifact (in Markdown, since that's our medium) or a precise design specification.

C1. Design a one-page README skeleton. Write, in Markdown, a README skeleton for a fictional command-line tool, demonstrating good design: a clear title, a one-line description, real heading hierarchy (Installation, Usage, Contributing), a monospace code block for the install command, and good use of white space. The content can be minimal/placeholder; the design (real headings, code block, spacing) is what's graded.

C2. Write alt-text for three figures. For each described chart, write a one-sentence alt-text that conveys what the chart shows (its point), not just "a chart": - (a) A line chart of monthly active users, flat around 10,000 for five months, then climbing steadily to 18,000 over the next four. - (b) A bar chart comparing average response time across three servers: Server A ≈ 120 ms, Server B ≈ 340 ms, Server C ≈ 130 ms. - (c) A pie chart of support tickets by category: 55% "login," 25% "billing," 20% "other."

C3. Produce an accessible status table. Write a small Markdown table (4–5 rows) showing project status that does not rely on color alone—use a text label and a symbol in each status cell. Then write one sentence explaining what makes it accessible.

C4. Write a design checklist. Produce a reusable "pre-send design check" (6–8 items) you'd actually run on any important document before sending it. Each item should be a yes/no question with a fix if "no." (Model it on the chapter's Decision Framework but in your own words and tuned to documents you write.)

C5. Spec a one-page handout. You're making a one-page printed handout summarizing a workshop. Write a design specification (not the content): typeface and size for body and headings, margins, line spacing, how many heading levels and how they're differentiated, where white space goes, and what (if anything) gets emphasized. Justify each choice in a few words.

C6. Redesign this page (the full treatment). Here is a described page exactly as received—redesign it end to end. "A one-page internal FAQ document. Title 'FAQ' in 11-point bold (same as body). Twelve questions and answers run as one continuous block, no spacing between Q&A pairs; each question is in plain body text indistinguishable from its answer. Body is 10-point, full-width (~115 characters/line), single-spaced, justified. Three answers contain a command, set in the body font inline. Two 'important' answers are entirely bold. Status of three beta features is shown by green/red text color only." Produce a redesign specification covering: (1) typography fixes, (2) how you'd make questions visually distinct from answers (hierarchy/white space), (3) the emphasis fix for the two all-bold answers, (4) how you'd set the commands, (5) the accessibility fixes (the color-only status, contrast, real headings). For each, name the principle and § reference. This is the chapter's "redesign this page" task at full scope—treat it as a portfolio-quality deliverable.

C7. Redesign an email for a phone. You're given a customer-facing email that displays as four dense five-line paragraphs with the key action ("reply by Friday to keep your account active") in the middle of paragraph three. It will mostly be read on phones. Rewrite the layout only (you may keep the words, or trim lightly): describe paragraph length, white space, where the action goes, and any emphasis—tuned specifically to a narrow phone screen (§10.4). Name what changes when the reading surface is a phone rather than a desktop.

Part D — Synthesis & Critical Thinking ⭐⭐⭐

D1. Design across audiences (translate the layout). Take one piece of content—"the payments service was down for 22 minutes Tuesday; ~1,400 customers affected; root cause a stuck migration; now resolved." Describe how you'd lay it out three ways: (a) as a mobile email to a VP, (b) as a section of a printed incident report, (c) as a slide in an all-hands deck. For each, name the reading situation and the two or three design choices it forces. (Ties §10.4; this is the design version of Chapter 2's audience analysis.)

D2. Find the flaw. A well-meaning writer makes their document "more accessible" by adding lots of color coding (six categories, six bright colors) and bolding all the key terms throughout. Explain why these well-intentioned moves may harm accessibility and readability, citing §10.5 and §10.6.

D3. The "substance over style" debate. A senior colleague insists design doesn't matter for technical documents—"if the engineering is right, who cares how it looks." Write a short, respectful rebuttal (one paragraph) grounded in the chapter's threshold concept and the flinch test (§10.1). Then concede the legitimate kernel in their view (where is design not worth much effort?).

D4. Diagnose the whole stack. A reader bounces off a report. List, from outermost to innermost, the layers at which the report could be failing them—design/layout (Ch 10), structure (Ch 4), clarity (Ch 3)—and explain why design is the first layer the reader encounters and why fixing clarity won't help if design fails. (Cross-chapter integration.)

D5. Accessibility as universal design. The chapter claims "most accessibility is just good design done properly" and that accessibility features help everyone, not just the people they target. Defend this with three concrete examples (e.g., high contrast, redundant cues, real headings), naming who each "targets" and how it also helps general readers.

Part M — Mixed Practice (Interleaved) ⭐⭐–⭐⭐⭐

These mix Chapter 10 with earlier chapters. Decide which skill each problem actually needs—it isn't always design.

M1. A document is well-designed (good typography, white space, hierarchy) but the reader still can't find the main point. You reverse-outline it and discover the conclusion is in the last paragraph. Is this a design problem or a structure problem? Name the chapter and the fix. (Ch 10 vs. Ch 4.)

M2. A paragraph is set in beautiful typography with perfect spacing, but it's 9 sentences long, full of nominalizations and "it is important to note that." What does it need first—design or revision? Name the chapters. (Ch 10 vs. Ch 3.)

M3. A figure is laid out cleanly with good white space, but its caption just says "Figure 4: Results." What's missing, and is it a Chapter 9 problem or a Chapter 10 problem—or both? Explain the overlap (caption interprets / alt-text conveys the point).

M4. You're redesigning a status report. You group the items under headings (Ch 10), but you also notice each team reports in a different order and format. Which earlier chapter's principle fixes the inconsistency, and what is it called? (Hint: Ch 4, document-level parallel structure.)

M5. An email is short, has good white space and one bold deadline—well designed. But the actual request is in the last sentence. Which principle from which chapter does it still violate, and how would you fix the order (not the design)? (Ch 4, BLUF.)

M6. A README has perfect design but the install instructions, when followed by a newcomer, fail at step 4 because a dependency was never mentioned. Is the remaining problem design, structure, or something else—and which later chapter owns it? (Hint: testable instructions, the curse of knowledge—Ch 22/26.)

Part E — Extension ⭐⭐⭐⭐

For motivated readers and the Deep Dive track.

E1. Redesign a real document. Find a real document you've received that you found hard to read (a dense report, a cramped form, a wall-of-text email). Without rewriting a single word, produce a redesign specification: every typographic, white-space, hierarchy, emphasis, and accessibility change you'd make, each tied to a chapter principle. Then estimate, honestly, how much of the "hard to read" was design versus writing. (This separates the two skills the book teaches.)

E2. Audit a template for accessibility. Take a template you use (a company slide master, a report template, a documentation theme). Audit it against §10.6: Are the headings real/semantic? Does the body text meet 4.5:1 contrast? Is any default styling color-dependent? Are placeholder images given alt-text guidance? Write a short findings memo (using Chapter 4 structure—bottom line first) recommending fixes, and decide whether the template is usable as-is or needs changes.

E3. The contrast experiment. Using a free online contrast checker, test five color pairs you've seen used for text (e.g., light gray on white, dark blue on black, white on a brand color). Record each ratio and whether it passes 4.5:1 for body text. Write one paragraph on what surprised you and what "looks fine to me" got wrong—connecting to why we don't eyeball contrast (§10.6).

Selected solutions and rubrics: see appendices/answers-to-selected.md. For open-ended redesign and production tasks (Parts B, C, E), use the self-assessment rubric below.

Self-assessment rubric (for redesign/production tasks)

Score each dimension 0–2 (0 = absent, 1 = partial, 2 = solid):

• Typography: Did you address size, line length, and spacing where relevant—and avoid forced justification / tiny type / over-long lines?
• White space & hierarchy: Are headings made visibly distinct (size/weight/space)? Is white space used to group and separate (proximity)? Margins generous?
• Emphasis discipline: Is emphasis restricted to the one or two genuinely important elements? No rainbow, no over-bolding?
• Accessibility: Real (semantic) headings? Contrast sufficient? No color-only meaning (second cue added)? Alt-text/interpreting captions on figures?
• Right tool for the job (interleaving): Did you correctly distinguish a design fix from a structure (Ch 4) or clarity (Ch 3) fix, rather than reaching for design when the problem was elsewhere?
• Justification: Did you name the principle behind each change (not just "looks better")?

10–12: publishable design judgment. 7–9: solid; tighten emphasis and accessibility. 4–6: re-read §10.2–§10.3 and §10.6. 0–3: re-read the chapter and redo B1 and B3.

Back to: Chapter 10 · Quiz · Key Takeaways