Photo Essay vs Scrollytelling
フォトエッセイ / スクロールテリング
Photo Essay comes from Publishing and Editing and Scrollytelling from Reading on the Web. Both are read here as layout. They are reached for with some of the same intent, which is where they get confused.
Photo Essay
.jpg)
The page form LIFE perfected: photographs edited into narrative arcs. Spread-scale contrasts, opening and closing images and the voice of captions gave photography a story grammar.
Scrollytelling
A web page form in which the reader's scroll position is the clock of the story, with graphics, maps and video changing as the page moves and reversing when the reader scrolls back. Visualization researchers treat it as the web equivalent of long form journalism and describe its structure as either linear or elastic, the elastic kind letting a reader dive deeper on demand. News outlets including the New York Times, the BBC and The Economist built the form out.
| Photo Essay | Scrollytelling | |
|---|---|---|
| Era | 1936–1972 | 2012– |
| Family | Publishing and Editing | Reading on the Web |
| Kind | Layout | Layout |
| Cues | Sequenced narrative arcs / Size contrast across spreads / The full-page key image / Captions that narrate | A graphic that holds still on screen while a single narrow column of text passes over it / Changes made by opacity and by moving a map, so that scrolling back undoes them in the same order / Photography, video and data visualization sharing one article / A path that is either straight through or branches into an optional deeper detour and returns |
| Best used for | Long-form field reporting laid out to be read straight through in print or online · Annual reports that retell a business as the work of people | Laying out an investigation or a research explainer as one page where the graphic holds and only the text moves · Giving a long read on a phone a way to advance that needs no instructions |
| Type | Write captions in a voice apart from the body text | Keep the body in one column. The scroll sets the pace, not the page, so hold the measure narrow and place headings only at joints in the story. |
| Composition | One dominant image per spread and never equal sizes | Pin the graphic and let the text pass over it. How many paragraphs you assign to one graphic is the pacing. |
| Material | Full-page frames open and close, denser pages between | Build only changes that can run backwards, such as opacity crossfades and map moves, each tied one to one with scroll distance. |
| Caution | Good pictures get lined up without a sequence being designed, every spread arrives at the same pitch, and the reader loses any reason to turn the page. | Tying a one shot animation to the scroll leaves a reader who scrolls back looking at nothing, and makes the middle of the article impossible to reread. |