Skip to content
Carry Lewis

Lab / Kinetic Typography

HTML Design Lab

Choose the form from the structure of the information, not from what looks sophisticated.

Experiments are filed by information structure. Select a row to open its record — the same index → entity path as Projects and Research.

Open source galleryLab guideProject record

Visualization protocol

  1. 01

    Structure

    Hierarchy in language

    Name what the information is made of — relationship, sequence, process, comparison, space.

  2. 02

    Form

    Syntactic entrance

    Pick the visual system that matches that structure. Style is a later language, not the decision.

  3. 03

    Specimen

    Kinetic Typography

    Test whether interaction makes the mechanism visible. Display without understanding is failure.

fig.lab — structure → form → specimen · 10 experiments · j/k to step

Field

Information structures

Can the order type appears encode the argument itself?

Relationship → GraphRelationshipGraphSequence → TimelineSequenceTimelineProcess → FlowProcessFlowMechanism → SimulationMechanismSimulationComparison → Shared axisComparisonShared axisSpatial relation → MapSpatial relationMapOverview → detail → Zoomable canvasOverview → detailZoomable canvasEmergence → Progressive constructionEmergenceProgressive constructionStructure in image → In-situ annotationStructure in imageIn-situ annotationHierarchy in language → Syntactic entranceHierarchy in languageSyntactic entrance

fig.field — neighborhood emphasis; distance is relatedness

Index

Structure → form → specimen

Filter by the kind of product work you are iterating, then open a specimen record.

Demo · Hierarchy in language → Syntactic entrance

Kinetic Typographyv01

Open fullscreen ↗Source lab shell