Compose two styles

Rather than blending two styles into a middle, this assigns them roles: one carries the structure, the other appears as an accent. Where the two fight, it says so before you start.

How to divide the work

Composition
Follow Photo Essay: One dominant image per spread and never equal sizes
Type
Set in Photo Essay's manner (Write captions in a voice apart from the body text), and let Scrollytelling's lettering (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.) appear only where you want the eye to catch.
Material
Ground in Photo Essay's material (Full-page frames open and close, denser pages between); bring in exactly one thing from Scrollytelling (Build only changes that can run backwards, such as opacity crossfades and map moves, each tied one to one with scroll distance.).
Colour
Build on #e9e6dd, #67635d, #171615 and admit one accent from #000000, #FFFFFF, #4A4A4A.

Where they fight

These two are already listed as related, so the join should come easily.

Caution

  • Photo Essay 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.
  • Scrollytelling 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.

Image prompt

An original image that takes its structure from Photo Essay (Layout, 1936–1972) and its accent from Scrollytelling (Layout, 2012–). Structural cues: Sequenced narrative arcs; Size contrast across spreads; The full-page key image; Captions that narrate. Accent cues, used sparingly: 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. Composition: One dominant image per spread and never equal sizes. Type and lettering: Write captions in a voice apart from the body text. Let one material quality come from the second style: Build only changes that can run backwards, such as opacity crossfades and map moves, each tied one to one with scroll distance.. Mood: Intimacy, Exhilaration, Trust, Technology. Color: build on #e9e6dd, #67635d, #171615 with a single accent drawn from #000000, #FFFFFF, #4A4A4A. Constraints: do not imitate, reference or name any specific artist, studio, brand, character or copyrighted work. Produce an original composition in the general period languages described above.

Related entries

  • Photo Essay 1936–1972 / Layout / Publishing and Editing

    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 2012– / Layout / Reading on the Web

    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.

Share this pairing:
https://indexstyle.org/compose?ids=photo-essay+scrollytelling

Back to index position