Capstone: Design an Editorial Spread

By the end of this lesson, you will be able to...

• turn a supplied body of content into a bounded two-page editorial spread using an explicit visual system;

• trace how type, grid, hierarchy, rhythm, imagery, captions, and a possible diagram guide different reading speeds;

• critique and revise the spread for meaning, accessibility, evidence boundaries, and justified variation.

Idea in one sentence: The finished spread is successful when its visual decisions make the supplied argument easier to enter, read, inspect, and remember without becoming a second, misleading argument.

Core Insight

Imagine an editor hands you a small packet about “The Last Night Train.” The packet contains a title, a 90-word introduction, four short sections, a route sketch, a portrait of a night-shift worker, two captions, one pull quote, an access note, and a conclusion. You have two pages and one visual system sheet. The article must feel calm enough for sustained reading, but a reader who opens the spread in the middle should still find an entry.

This is a capstone, not an invitation to invent a new magazine identity. The source wording and evidence are supplied. Your work is to decide what leads, what belongs together, where the reader pauses, and how an image or diagram changes the path. Lessons 001–006 gave you the components; lesson 007 gave you a way to state the rules and record exceptions. Now those decisions must survive contact with a complete, bounded artifact.

The central trade-off is direct: editorial design can make ideas memorable, but it must serve the text. A dramatic crop may help a first glance while hiding the route that makes the claim credible. A generous measure may feel elegant while making a long paragraph hard to resume. A diagram may reveal a dependency while making a possibility look like a fact. The capstone is complete only when you can name these costs and show why the final balance is acceptable.

The Brief

Design a two-page spread for a cultural magazine. The spread should introduce the article, support a ten-minute reading session, and include one explanatory visual element. Use the following supplied packet; do not rewrite its argument.

Content packet

• Title: The Last Night Train
• Introduction: 90 words that ask what a city owes to people whose work ends late.
• Sections: four sections of about 250 words each, moving from the route, to a worker's account, to the cost of ending service early, to a civic question.
• Images: a route sketch and a portrait of a night-shift worker.
• Captions: one caption explains the route; one gives context for the portrait.
• Pull quote: one sentence selected from the supplied text.
• Access note: free entry to the related library conversation; step-free access; doors open at 18:30.
• Conclusion: returns to the opening question without claiming that one service change solves every case.

Constraints

• Keep the supplied content order unless you document a reason for a local change.
• Use the type roles, grid logic, hierarchy, rhythm, and evidence distinctions from the track.
• Keep the access note discoverable and readable; it is secondary, not disposable.
• Do not turn the route sketch into a measured map or the worker's portrait into proof of a universal pattern.
• Do not solve a layout problem by adding new copy, invented numbers, or an unearned visual metaphor.

Your deliverable may be a high-fidelity layout, a clear wireframe with typographic specifications, or a hybrid. It must show enough detail for another designer to inspect the decisions.

Stage 1: Write the Design Contract

Before opening a layout tool, write three short sentences:

1. Claim: What should remain true after the reader leaves the spread?
2. Reading situation: What should happen in the first glance, during continuous reading, and after a pause?
3. Boundary: What must the design not imply?

For this packet, a reasonable contract is:

The spread presents late-night rail as shared civic infrastructure. The first glance finds the title and question; continuous reading follows four turns with calm pauses; the reader can resume after inspecting an image. The spread must not imply that one worker's route represents every worker or that the route sketch is to scale.

This contract is a test oracle for the rest of the project. If a later decision cannot be explained in relation to it, pause before polishing.

Stage 2: Inventory Content and Evidence

Create a table like the one below. The table keeps visual prominence from becoming accidental editorial emphasis.

Mark any item that is uncertain, conditional, or an example rather than a general claim. If you cannot state an item's evidence status, do not give it a louder visual role yet.

Stage 3: Reuse the System Sheet

Start from the system sheet in lesson 007. Adapt it only where the capstone's two-page reading situation requires a documented exception.

Type: display title, section heading, body, caption, support note, source note.
Grid: shared outer margins and alignment field; image spans may change at an argument turn.
Hierarchy: title/question for entry; body for sustained reading; captions and quote for bounded pauses.
Rhythm: entry -> section continuation -> image or quote pause -> return to body -> conclusion.
Evidence: caption and source note distinguish described, schematic, and interpretive material.
Exceptions: only when a role, reading speed, or evidence boundary would otherwise be hidden.

The sheet is deliberately small. You should be able to point to each rule on the page. If a rule never affects a decision, remove it from the capstone documentation.

Stage 4: Make Two Wireframes Before Polishing

Draw two rough spreads with the same content and grid.

Wireframe A: title-led entry

Place the title and introduction in the upper-left entry field. Let section A begin below, with the route sketch completing its geographic explanation. The portrait sits at the hinge before the civic section. This version gives the argument a quiet start and uses images as pauses after a related claim.

Wireframe B: image-led entry

Let the route sketch span the upper field and place the title across a clear portion of it. Keep the category label and question visible so the sketch does not become generic atmosphere. The body begins in a narrow but readable column, and the portrait remains a later pause.

Do not decide by taste alone. Walk each wireframe through three tests:

• First glance: Can you identify the feature and its question?
• Sustained reading: Can you read one full section without a decorative interruption breaking the syntax?
• Resume: After looking only at the image and caption, can you find where to continue?

Choose the wireframe whose costs fit the contract. If Wireframe B attracts attention but suggests a travel story, add or reposition an evidence cue before enlarging anything else.

Stage 5: Build the Spread Step by Step

Use the following production order. Each stage leaves an inspectable intermediate state.

1. Place the structural field

Set margins, columns, gutter, and the main body measure. Check the longest paragraph before adding images. If the body measure is already exhausting, a pull quote is not the first fix.

2. Place the reading spine

Add the title, introduction, section headings, and conclusion in content order. Trace a likely path with a pencil or temporary labels. The path should have an entry, continuation, pauses, and a return. Preserve an alternate entry for a reader who starts at the portrait or route sketch.

3. Add images with their captions

Place the route sketch after the passage it explains and the portrait at the shift from individual account to civic question. Keep each caption close enough to identify the image, but do not let it compete with the body heading. If an image is schematic, say so.

4. Add the pull quote last

Choose a sentence that opens or marks a turn rather than repeating the title. Place it where it creates a legitimate pause. If it splits a paragraph's logic, move it or remove it. The artifact is not required to use every supplied element at maximum prominence.

5. Tune hierarchy and rhythm

Adjust scale, weight, leading, and spacing as a system. Use contrast through more than color. Make a quiet support note readable without making it a competing headline. Check whether section gaps communicate real argument turns instead of a fixed visual quota.

6. Add evidence and access checks

Include source or scope notes where a relation could be overgeneralized. Confirm that the access note survives reduction and is not placed in the gutter, trim, or a low-contrast image area. The final page should be attractive because its decisions cooperate, not because its caveats were hidden.

Stage 6: Run the Meaning and Access Audit

Audit the spread in five modes and record findings rather than relying on a final feeling.

1. Content order: Read the text without looking at the visual styling. Does the layout preserve its meaningful sequence?
2. First glance: Look for three seconds, then write what the spread appears to be about. Compare it with the design contract.
3. Continuous read: Read one full section and the first paragraph after an image or pull quote. Note any interruption that breaks a syntactic or argumentative unit.
4. Evidence read: Cover the body and inspect only image, captions, quote, and notes. Which claims do they support? Which could be inferred too broadly?
5. Access read: Check body measure, contrast, caption size, line spacing, and the practical access note. Test without color and at a reduced scale.

For each problem, record the smallest change that addresses it and the cost that change introduces. This is the same bounded revision logic used in lessons 005–007.

Worked Revision Log

Suppose the first finished version has three visible issues:

After revision, the artifact is not “finished” because it has fewer visual events. It is stronger because each event has a role and a boundary. Keep this log with the deliverable. A reviewer should be able to see what changed and why.

Capstone Rubric

Score each criterion from 0 to 3. A score of 2 means the requirement is usable; a score of 3 means the decision is clear, tested, and transferable.

A capstone is ready when no criterion is below 2 and the revision log explains any remaining cost. The rubric is not a taste ranking. It is a way to decide whether the visual system serves the supplied content.

Checks Before Submission

Check: The spread looks coherent, but a reader says it argues that extending one train solves the entire civic problem. What should you inspect?

Think first, then reveal.

Answer: Inspect image scale, pull quote wording, captions, and diagram marks. A memorable composition may have erased the source's boundary. Add the smallest scope cue that restores the distinction.

Check: The title, body, and captions are readable, but the access note is tiny and low contrast. Can the spread pass?

Think first, then reveal.

Answer: No. Practical support information is part of the communication contract. Reassign space or contrast so it remains discoverable without becoming the main entry.

Check: The first-glance test fails, but the continuous reading test is excellent. Should you redesign the whole spread?

Think first, then reveal.

Answer: Start with the entry role: title, category, question, and image relation. Preserve the successful reading spine and make the smallest change that improves first-glance orientation.

Trade-offs and Common Failure Modes

• Memorability versus nuance: a sharp visual anchor helps recall but can flatten a conditional argument.
• Density versus continuity: fitting more text may preserve content, but insufficient measure or leading increases fatigue.
• Consistency versus adaptation: a shared system supports reuse, while a changed content role may require an exception.
• Image authority versus evidence: a powerful photograph can attract attention while implying more than its caption supports.
• Polish versus inspectability: visual effects can hide uncertainty or reading order; keep the structure testable.

Failure: designing the image before reading the argument

The image then becomes the hidden thesis. Return to the content inventory and write the image's exact job: entry, evidence, human instance, pause, or context. If it has no job, remove it.

Failure: treating the capstone as a poster

A spread needs sustained reading, not only impact. Test a full section, a resume after a pause, and the relation between image and paragraph. A successful first glance is only the door.

Failure: using every supplied element

Inclusion is not the same as service. A pull quote, second image, or decorative rule can be delayed, grouped, or omitted when it repeats another role. Document the choice rather than forcing equal visibility.

Failure: confusing a visual system with a tool preset

The deliverable is a set of explainable decisions, not a vendor-specific file structure or a CSS implementation. Another person should be able to reproduce the relationships with different tools.

Transfer Practice

After finishing the supplied brief, choose a second bounded article or public-program description. Keep the system sheet, but change the reading pressure: perhaps the second topic requires a quieter image, a stronger evidence note, or a different section rhythm.

1. Predict which rules will transfer unchanged.
2. Identify one rule that will need an exception.
3. Produce a small alternate spread or wireframe.
4. Compare the two revision logs. Did the system reduce unnecessary decisions without flattening the second topic?

This transfer is optional for the capstone score but valuable for proving that you learned a system rather than memorized one successful layout.

Connections and Completion

Lessons 001–003 built typography, grids, and hierarchy. Lesson 004 added sustained temporal rhythm. Lesson 005 tested bounded compression in posters and covers. Lesson 006 made relational structure and uncertainty visible. Lesson 007 turned those practices into reusable rules and exception traces. This capstone combines them in one spread and asks for evidence that the combined system works.

After this track, the next visual-thinking work can examine how historical practices, media, and cultural contexts shape what visual systems communicate. That continuation adds interpretation and history; it does not replace the production discipline practiced here.

Resources

• [BOOK/TUTORIAL] The Elements of Typographic Style Applied to the Web — Focus: scale, measure, spacing, alignment, and readable long-form typography.
• [ARTICLE] WCAG 2.2: Understanding Meaningful Sequence — Focus: preserve meaningful content order when visual hierarchy and columns rearrange prose.
• [ARTICLE] WCAG 2.2: Understanding Contrast Minimum — Focus: check body text, captions, access notes, and evidence marks across the final spread.

Key Takeaways

• A capstone spread begins with a content contract, not a visual effect.
• Use the track's system sheet to make type, grid, hierarchy, rhythm, imagery, captions, and evidence work together.
• Test first glance, sustained reading, resume, evidence boundaries, and access details separately.
• Keep a revision log that names the smallest fix and the cost it introduces.
• The final criterion is service: the spread should make the supplied argument easier to enter, read, inspect, and remember without becoming a misleading argument of its own.