Compose styles
Rather than blending styles toward a middle, this gives them roles. The first one carries the structure, the next comes in as the accent, and anything after that shows up in a single detail. Where they fight each other, it says so before you start.
How to divide the work
- Composition
- Follow Isotype: Fix the unit per symbol; show change by count, never by size
- Type
- Set in Isotype's manner (Short labels and clear figures; prose stays outside the chart), 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 Isotype's material (Few meaningful colors, equal line weights, aligned baselines); 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 #eee7d3, #b9362c, #2c4e72 and admit one accent from #000000, #FFFFFF, #4A4A4A.
Where they fight
- Isotype and Scrollytelling stand roughly 92 years apart. Keep one of them recognisably period rather than letting both drift into the middle.
Caution
- Isotype Never scale one big symbol to show a difference. Always show unit, base and source.
- 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
Produce four original images that take their structure from Isotype (layout, 1920s–1940s) and their accent from Scrollytelling (layout, 2012–). ## What to make Make the kind of thing Isotype exists for: statistics comparable without expertise, or basic guidance and education across languages. Choose one subject and hold it across all four. ## Structure comes from Isotype - Unified pictograms - Repetition of signs - Axes of comparison - Restricted color Composition: Fix the unit per symbol; show change by count, never by size. Type and lettering: Short labels and clear figures; prose stays outside the chart. ## Accent comes from Scrollytelling, 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 Let one material quality come from it: Build only changes that can run backwards, such as opacity crossfades and map moves, each tied one to one with scroll distance. ## Colour and feeling Build the ground on #eee7d3, carry the structure in #b9362c and #2c4e72, and let a single accent come from #4A4A4A. These are read off real works, so a direction rather than a fixed palette. Feeling to carry: trust, technique, intimacy. ## Where they fight - Isotype and Scrollytelling stand roughly 92 years apart. Keep one of them recognisably period rather than letting both drift into the middle. ## What goes wrong - Isotype: Never scale one big symbol to show a difference. Always show unit, base and source. - 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. ## Across the four Keep the roles fixed in all four. Vary the framing, the scale and the arrangement so the set shows what this pairing can do rather than four versions of one picture. ## Constraints - Do not imitate, reference or name any specific artist, studio, brand, character or copyrighted work. - Do not reproduce the composition of an existing work. - Produce original compositions in the general period languages described above.
Related entries
- Isotype 1920s–1940s / Layout / Information Design
Translates quantity into repeated same-size symbols, making comparison readable before language.
- 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 composition:https://indexstyle.org/compose?ids=isotype+scrollytelling