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 Explorable Explanations: Hold the text to a single column of roughly 600px and place each figure beside or directly after the paragraph it belongs to, close enough that the handle and its effect share one field of view.
- Type
- Set in Explorable Explanations's manner (Set the prose like ordinary reading matter; mark only the live numbers, with an underline and a color, and never with a different typeface.), and let Isotype's lettering (Short labels and clear figures; prose stays outside the chart) appear only where you want the eye to catch.
- Material
- Ground in Explorable Explanations's material (Limit the interaction to grabbing and dragging, with no input fields and no submit buttons, and always ship default values that already say something.); bring in exactly one thing from Isotype (Few meaningful colors, equal line weights, aligned baselines).
- Colour
- Build on #FFFFFF, #0000FF, #FDFFE9 and admit one accent from #eee7d3, #b9362c, #2c4e72.
Where they fight
- Roughly 91 years apart. Keep one of them recognisably period rather than letting both drift into the middle.
Caution
- Explorable Explanations If the content only shows up once the reader touches something, everyone who does not touch it gets a blank article.
- Isotype Never scale one big symbol to show a difference. Always show unit, base and source.
Image prompt
An original image that takes its structure from Explorable Explanations (Technique, 2011–) and its accent from Isotype (Layout, 1920s–1940s). Structural cues: Numbers inside the running text sit on a dotted underline and turn blue when touched; Dragging one of those numbers rewrites the following sentence and the neighboring figure at once; Figures are not quarantined in a separate sandbox but sit continuous with the paragraphs around them; Untouched, the piece still reads, because the default values already make the figures meaningful. Accent cues, used sparingly: Unified pictograms; Repetition of signs; Axes of comparison; Restricted color. Composition: Hold the text to a single column of roughly 600px and place each figure beside or directly after the paragraph it belongs to, close enough that the handle and its effect share one field of view.. Type and lettering: Set the prose like ordinary reading matter; mark only the live numbers, with an underline and a color, and never with a different typeface.. Let one material quality come from the second style: Few meaningful colors, equal line weights, aligned baselines. Mood: Technology, Play, Trust, Intimacy. Color: build on #FFFFFF, #0000FF, #FDFFE9 with a single accent drawn from #eee7d3, #b9362c, #2c4e72. 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
- Explorable Explanations 2011– / Technique / Reading on the Web
The name Bret Victor gave, in a March 2011 essay of the same title, to writing that embeds a running model inside the prose. Numbers in the body text carry a dotted underline and can be dragged, and pulling one rewrites the rest of the sentence and the figure beside it at the same time. He described the result as a written argument whose assertions are backed by explorable computational models.
- Isotype 1920s–1940s / Layout / Information Design
Translates quantity into repeated same-size symbols, making comparison readable before language.
Share this pairing:https://indexstyle.org/compose?ids=explorable-explanations+isotype