# Session 10 — The AI Aesthetic

59 minutes of planned teaching after removing the audit slide. Arrow keys / Page Up / Page Down / Space navigate; Home / End jump. N opens the current slide’s notes. Interactive controls keep their own keyboard behavior.

## Timing

- Slides 1–6: 00:00–10:00 · Recognising the aesthetic
- Slides 7–13: 10:00–25:00 · Five rules + mobile
- Slides 14–17: 25:00–35:00 · Real journalism
- Slides 18–20: 35:00–45:00 · Live redesign
- Slides 21–23: 45:00–59:00 · Exercise, sharing, closing

If running late, shorten discussion of the publication examples. Protect the redesign and ten-minute student exercise.

## 01 · The AI Aesthetic

00:00–00:30 (0.5 min)

**Teaching point:** Design judgment remains the journalist’s job.

**Demonstrate:** Connect to Session 9: students have a working HTML/CSS story; today they will edit the reader’s experience. Keep reporting and analysis their own.

## 02 · The problem

00:30–01:30 (1 min)

**Teaching point:** Recognise recurring defaults without claiming authorship from appearance.

**Demonstrate:** Ask for patterns students have noticed. Appearance cannot prove a page was made with AI. “AI aesthetic” is shorthand for familiar defaults, not a detection method.

**Ask:** What do you see repeatedly?

## 03 · Spot the AI website

01:30–03:30 (2 min)

**Teaching point:** A page can be functional while giving the reader no clear priority.

**Demonstrate:** Let students look silently for 15 seconds, then name the headline, cards, badges, icons, gradient and shadows. All data on this mock page are invented.

**Ask:** Which element is asking for your attention?

## 04 · What's wrong with this?

03:30–05:30 (2 min)

**Teaching point:** Critique a design decision by its effect on understanding.

**Demonstrate:** Use the reveal button to discuss one problem at a time. Ask what to remove before suggesting more styling. The chart is not false; the page makes it hard to find a point.

**Ask:** Which decision would you change first?

## 05 · Compare two approaches

05:30–08:30 (3 min)

**Teaching point:** Hold evidence constant while comparing design.

**Demonstrate:** Ask for a five-second reading of each. The edited headline is a restatement of the displayed figures; it adds no reporting. Note that both charts use the same scale and six annual values.

**Ask:** What can you explain from B that took longer in A?

## 06 · The real problem

08:30–10:00 (1.5 min)

**Teaching point:** No particular visual style is inherently bad.

**Demonstrate:** Point to the dark Reuters illustration later in the deck: it provides spatial context. Ask students to defend a card or gradient with a concrete reader need.

**Ask:** What would be a useful editorial reason for using a dark background?

## 07 · Five rules

10:00–10:45 (0.75 min)

**Teaching point:** Use these as a critique framework, not a style checklist.

**Demonstrate:** Introduce the five lenses quickly. Each rule should answer: how does this help the reader understand the reporting?

## 08 · Hierarchy

10:45–12:45 (2 min)

**Teaching point:** Hierarchy establishes the reader’s entry point.

**Demonstrate:** Ask one student to read each version aloud in the order their eyes choose. Show that type size, weight and whitespace can establish order without adding a box.

**Ask:** What should be first, second and third?

## 09 · Restraint

12:45–14:45 (2 min)

**Teaching point:** Remove elements that do not encode meaning or support navigation.

**Demonstrate:** Compare the exact same three values. Explain that a card is useful when it groups something meaningful; shadows and badges should not be automatic.

**Ask:** Which removed element do you actually miss?

## 10 · Typography

14:45–17:45 (3 min)

**Teaching point:** Typography is a system of roles and reading comfort.

**Demonstrate:** Read a line in the cramped version. Point to line length, line height and contrast between headline and body in the edited version. Two families are an example, not a rule; one family can work. The exact size must be checked on the actual device.

**Ask:** Which paragraph would you choose to read for five minutes?

## 11 · Charts belong to the story

17:45–20:45 (3 min)

**Teaching point:** The chart needs a takeaway, clear encoding and enough context to verify it.

**Demonstrate:** Identify direct labels, a single highlighted series, the annotation, units, period and source. Do not silently alter scales or drop inconvenient evidence when redesigning.

**Ask:** What does “140” mean here? What does it not mean?

## 12 · Reading experience

20:45–23:00 (2.25 min)

**Teaching point:** A story has a reading sequence, not a collection of containers.

**Demonstrate:** Walk down each column. Explain how a narrow chart can become unreadable even if the page is technically responsive. The after version shows an excerpt to demonstrate pacing, not an instruction to delete reporting.

**Ask:** Where would you put the chart if it supports the first finding?

## 13 · Mobile is not optional

23:00–25:00 (2 min)

**Teaching point:** A narrow screen changes layout and interaction, not the reporting.

**Demonstrate:** Use the slide 19 Mobile button for a true 375px webpage. These two mock frames are schematic comparisons. Check body text at natural size, chart labels, overflow and a roughly 44px target for touch controls.

**Ask:** Which desktop decision stops working on a phone?

## 14 · Learn from actual journalism

25:00–26:00 (1 min)

**Teaching point:** Study editorial choices, not a publication’s surface style.

**Demonstrate:** Ask students to borrow a decision, not a font or a full layout. Each following slide has an authentic image and a link to the original.

**Ask:** What should we look for beyond whether we like the design?

## 15 · Reuters Graphics

26:00–29:00 (3 min)

**Teaching point:** A dark palette and illustration can have a clear editorial reason.

**Demonstrate:** Open the story if time allows. Scroll from the opening question to the seabed explanation. Discuss the screenshot as an annotation example; do not teach its 2023 industry status as current news.

**Ask:** What would be lost if this text were only in a distant caption?

## 16 · Our World in Data

29:00–32:00 (3 min)

**Teaching point:** Context and provenance are part of the visual, not afterthoughts.

**Demonstrate:** Open the chart and point to years, period, direct labels, source line and download options. Ask what life expectancy measures rather than inferring a new finding. The screenshot preserves the chart state at capture.

**Ask:** Can you find the unit and the original data providers?

## 17 · The Pudding

32:00–35:00 (3 min)

**Teaching point:** Editorial restraint does not require visual sameness.

**Demonstrate:** Open the original and scroll through a word comparison. Discuss how prose and visual emphasis work together. Distinguish frequency from the more interpretive bias measures later in the piece; those are not today’s lesson.

**Ask:** Would this design make equal sense for a story about bus times?

## 18 · Let’s fix a data story

35:00–37:00 (2 min)

**Teaching point:** Diagnose before prompting or changing code.

**Demonstrate:** Ask students to identify the lead, the strongest chart and a reading-width problem. This is constructed work, not a student submission. The frame scrolls like a real page; arrow keys inside it scroll the example.

**Ask:** Which change would improve understanding most?

## 19 · Six edits, one better story

37:00–43:00 (6 min)

**Teaching point:** A design edit must preserve the evidence and the meaning of the reporting.

**Demonstrate:** Spend one minute diagnosing and four minutes toggling and explaining edits. Both pages use the identical chart SVG, reporting paragraph, limitations, source and data link. Only headline wording, hierarchy and CSS change. Toggle Mobile and show that the before page overflows while the after page reflows. On an actual phone the available frame is narrower than 375px; open the full page to inspect it. Finish by checking the numbers and caveat.

**Ask:** What changed in the reader’s path? What evidence stayed the same?

## 20 · AI is your implementer, not your editor

43:00–45:00 (2 min)

**Teaching point:** The journalist sets constraints and approves changes; AI can implement them.

**Demonstrate:** Read the better prompt. Remind students that reporting, analysis and story writing remain theirs. If a headline needs rewriting, the student writes or approves it; the tool must not invent a conclusion.

**Ask:** Which phrase stops an attractive redesign from changing your evidence?

## 21 · Your turn

45:00–55:00 (10 min)

**Teaching point:** Apply judgment to the student’s own work.

**Demonstrate:** Set a ten-minute timer. At two minutes, ask students to stop diagnosing and start implementing. At eight minutes, prompt the mobile and evidence check. If time is tight, fix one high-impact problem rather than changing the whole page.

**Ask:** What is the specific reader problem you are solving?


## 22 · Share your before/after

55:00–58:00 (3 min)

**Teaching point:** Critique a change by its effect, not visual impressiveness.

**Demonstrate:** Invite two students for about 75 seconds each, with 30 seconds for transition; or three at 50 seconds each. Ask the class for one observation about clarity rather than a beauty vote.

**Ask:** What can you understand now that you couldn’t understand before?

## 23 · Closing

58:00–59:00 (1 min)

**Teaching point:** Design decisions are editorial decisions.

**Demonstrate:** Return to the central thesis. Ask students to carry one intentional choice into their next project. Finish at minute 59.

## Sources and image provenance

- Course visual reference: https://areenaarora.com/computational-journalism#01 and local Sessions 8–9. Session 10 follows the latest session’s typography, palette, HTML route pattern and scroll navigation.
- Reuters: https://www.reuters.com/graphics/MINING-DEEPSEA/CLIMATE/zjpqezqzlpx/ — The promise and risks of deep-sea mining, Daisy Chung, Ernest Scheyder and Clare Trainor (2023). Verified in the browser on 15 October 2026. Image copied unchanged from the existing course’s `static/viz-slides/reuters-deepsea-1.jpg`. The screenshot is a source image, not a reconstruction. Discuss its design, not its dated industry status as current news.
- Our World in Data: https://ourworldindata.org/grapher/life-expectancy — authentic chart screenshot captured in the browser on 15 October 2026. CC BY. The chart labels Riley (2005), Zijdeman et al. (2015), HMD (2025), UN WPP (2024); major processing by Our World in Data. Screenshot retains units, years, direct labels and source line. Values and time range reflect the displayed chart at capture.
- The Pudding: https://pudding.cool/2022/02/women-in-headlines/ — When Women Make Headlines, Leonardo Nicoletti and Sahiti Sarva (2022). Verified on 15 October 2026. Image copied unchanged from `static/viz-slides/pudding-headlines-1.png`.

## Live example

The before and after HTML pages are constructed fictional student work. The commuter chart, reporting paragraph, byline, source, data link and limitations are identical in both. Only the headline presentation and CSS differ. The headline edit states the same comparison already in the reporting. All values are illustrative; none describe a real city or student. The intentionally fixed-width before page overflows on phones; the edited page reflows.

Open `before.html` and `after.html` from the deck’s buttons for independent inspection. Both use `story.css`. `classroom-data.csv` includes all invented chart values and disclosure fields. No network connection is required for the slide examples; external source stories and the optional Google font load require internet. Font fallbacks preserve the layout offline.