# UNSW Newsroom — Longform Design Study No. 07

## Overview

UNSW Newsroom's feature articles are immersive, university-scale photo-journalism. The reference piece — "The most remote family in NSW are on a mission" — is a documentary long read: a full-bleed cinematic photo hero establishes the subject and mood before any body copy, then the layout narrows hard into a single quiet reading column. Emotion is carried by full-bleed photography, the argument is carried by a narrow Roboto column, and the brand is carried by one device: a sharp yellow angular flag. The whole page is long (~42,500px, 137 paragraphs) but never feels endless because it holds a strict photo/text/photo cadence.

Core idea: separate the two jobs of a story. Photography does the feeling; the column does the thinking; the yellow flag does the branding. Nothing competes for the same job.

## How it structures longform content

Reading order:

1. Utility strip (News, Events, myUNSW, Alumni & Giving, Contact Us) with external-link markers.
2. White primary nav — UNSW crest wordmark left, primary links, black search square hard right. A yellow angular flag sits behind the top-left corner.
3. Full-bleed photo hero filling the viewport, with a short bold headline set low and centred over a dark scrim.
4. A hard narrowing into a ~540–560px reading column set in Roboto ~20px / 1.7.
5. Repeating cadence: photo, text, photo, text. Full-bleed images break the column at regular intervals.

Hierarchy devices, in order of loudness:

- Photography (loudest) — full-bleed, edge-to-edge, given room to breathe.
- Archivo/Clancy display headlines — heavy and tight, used sparingly at section breaks.
- Light pull-quotes (Roboto 300, large) — lift one sentence without shouting.
- Captions (small, grey) — the quietest, factual layer.
- Colour — reserved almost entirely for one accent (UNSW yellow), so it always reads as a deliberate signal.

Imagery strategy: 7 of the roughly 32 images run full width. The reader keeps returning to the landscape between reading passages, which paces the long document.

## Desktop treatment

- Hero H1: Clancy (humanist sans) 63px / weight 400, white, centred over the photo.
- Section H2: Clancy 48px / weight 700, near-black on white.
- Pull-quote: Clancy/light 300, 22px, #333, generous margins.
- Body: Roboto ~20px, line-height 34 (~1.7), #333, in a ~540px column (~75 CPL).
- Full-bleed photo interludes between text blocks; 7 full-bleed of 32 total.
- Yellow angular brand flag (#FFDB00) top-left; black search square on the nav's right edge.
- Document ~42,500px tall, 137 paragraphs.

## Mobile treatment

- Captured at a 390px viewport.
- Hero H1 drops to ~30px, still white and centred over the photo.
- Body: Roboto 17px, line-height 28.9 (~1.7).
- Measure tightens to ~340px (~40 CPL).
- Photos go edge-to-edge; the photo/text/photo rhythm is preserved.
- Nav collapses to a hamburger; crest centres; the black search square remains.
- The rules are proportional, not fixed, so the character survives the smaller frame: same single accent, same cadence.

## Design system (tokens with real values)

Type:
- Display: Clancy (humanist sans). Homage stand-in: Archivo 700–800.
- Body: Roboto 300 / 400 / 700.
- Google Fonts (homage): `Archivo:wght@600;700;800` + `Roboto:wght@300;400;700`.
- Scale: Hero H1 clamp(2rem, 6vw, 4rem) white centred; body 20px / 1.7; pull-quote Roboto 300 clamp(1.4rem, 3vw, 2rem); captions ~0.9rem.

Colour:
- Hero near-black: `#131313`
- UNSW yellow (accent): `#FFDB00`
- Body ink: `#333333`
- Reading paper: `#FFFFFF`
- Hairline: `#E6E6E6`
- Caption gray: `#666666`

Layout:
- Reading measure ~540–560px desktop (~75 CPL); ~340px mobile (~40 CPL).
- Leading ~1.7 at both sizes.
- Full-bleed photo interludes; narrow centred white reading column.
- Clean white nav; black search square; one yellow accent only.

## Signature techniques

- Documentary long read: full-bleed cinematic imagery carries emotion; a narrow Roboto column carries the reading.
- Editorial voice from type: bold Archivo/Clancy headlines against light Roboto 300 pull-quotes.
- One sharp brand gesture: the yellow angular clip-path flag top-left is the whole identity in a single shape.
- Strict photo/text/photo cadence to pace a very long scroll.
- Accent discipline: yellow is the only chromatic accent; everything else is black, white, and grey.
- Dark scrim under the hero headline for legible white text over photography.

## What to steal

1. Split the two jobs of a story — let imagery carry emotion and a narrow column carry the reading, so neither competes.
2. Set a cadence and hold it — photo, text, photo makes a 42,500px document feel paced, not endless.
3. Ration your accent colour — one yellow, everything else neutral, so the accent always means something.
4. Keep the measure honest — ~540px desktop, ~340px mobile, both at ~1.7 leading; line length beats font choice for readability.
5. Give the brand one sharp gesture — a single confident device (the angular flag) beats a busy header.

## Visual references

- Desktop: ../assets/screenshots/07-unsw-desktop.jpeg
- Mobile (390px): ../assets/screenshots/07-unsw-mobile.jpeg

## Source URL

https://news.unsw.edu.au/en/meet-the-family-on-a-mission-to-restore-the-desert-ecosystem