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 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 Flowchart's lettering (A question inside every diamond, a verb first sentence in rectangles) 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 Flowchart (Each branch labeled with its answer, terminals only at both ends).
- Colour
- Build on #FFFFFF, #0000FF, #FDFFE9 and admit one accent from #ffffff, #86b11d, #40591e.
Where they fight
- Explorable Explanations and Flowchart stand roughly 90 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.
- Flowchart Mixing diamonds and rectangles without respecting their meanings erases the line between decision and process, and readers guess.
Image prompt
Produce four original images that take their structure from Explorable Explanations (technique, 2011–) and their accent from Flowchart (layout, 1921–). ## What to make Make the kind of thing Explorable Explanations exists for: publishing an explanation built on a model, where readers should be able to change the assumptions themselves, or teaching material that has to show not just the conclusion but the conditions under which it flips. Choose one subject and hold it across all four. ## Structure comes from Explorable Explanations - 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 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. ## Accent comes from Flowchart, used sparingly - A grammar of shapes - The decision diamond - Arrows of flow - Start and end terminals Let one material quality come from it: Each branch labeled with its answer, terminals only at both ends. ## Colour and feeling Build the ground on #FFFFFF, carry the structure in #FDFFE9 and #0000FF, and let a single accent come from #86b11d. These are read off real works, so a direction rather than a fixed palette. Feeling to carry: technique, play, trust. ## Where they fight - Explorable Explanations and Flowchart stand roughly 90 years apart. Keep one of them recognisably period rather than letting both drift into the middle. ## What goes wrong - Explorable Explanations: If the content only shows up once the reader touches something, everyone who does not touch it gets a blank article. - Flowchart: Mixing diamonds and rectangles without respecting their meanings erases the line between decision and process, and readers guess. ## 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
- 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.
- Flowchart 1921– / Layout / Diagrammatic Expression
The Gilbreths invented this process diagram for work analysis. Its grammar of shapes gives a diamond to every decision and a rectangle to every process, and by way of programming it became the common language for thinking in steps.
Share this composition:https://indexstyle.org/compose?ids=explorable-explanations+flowchart