Conceptual Moving Diagram showcase for the fictional FLOW 3 public water-system explainer: a large educational screen revealing a city's water journey one relationship at a time with a matching printed diagram.
All styles

Design direction / assertive

Moving Diagram

Explain sequence, dependency, and transformation by making the diagram itself the primary experience.

Choose this style

01 / Overview

Feels technical, educational, clear, with a deliberate rather than generic personality.

Signature move

One token visibly travels through the system and changes state at every meaningful handoff.

Intensity
assertive
Versatility
5 / 5
ID
moving-diagram

02 / Example art

Moving Diagram

Original artwork establishes the direction's visual language before it is translated into an interface.

Conceptual Moving Diagram showcase for the fictional FLOW 3 public water-system explainer: a large educational screen revealing a city's water journey one relationship at a time with a matching printed diagram.
Explain sequence, dependency, and transformation by making the diagram itself the primary experience.

03 / Website example

Try the page as a working experience

Explore this responsive page directly inside the catalog. Its primary navigation, controls, and interactions are live; open it full screen to experience the original composition.

Examples are in production

The direction is available now. Its brand websites are being built as independent sites and will appear here during local production.

04 / Fit

Suitable for

Suitable for

technology / logistics / finance / education / consulting / healthcare

Business goals

explain / simulate / plan / debug

A strong choice when

Strong when technology, logistics, finance, education need to explain, simulate, plan through a memorable but repeatable visual system.

Avoid when

Avoid when the brief needs complete visual neutrality or when this direction would compete with essential information and actions.

05 / Design system

Design system

Rules that should remain coherent as content, devices, and business needs change.

01Composition
A primary flow occupies the main field; supporting text and controls attach directly to nodes and transitions.
02Hierarchy
Make the signature move the first organizing decision, then reveal supporting information through stable scale, alignment, and sequence.
03Typography
Compact labels, strong step numerals, and readable explanations outside congested paths.
04Color
State and path colors follow one legend with redundant symbols, patterns, or labels.
05Imagery
Use real components or simplified objects only when they clarify what travels or transforms.
06Material
Wires, tracks, pipes, routes, frames, or cells are selected from the domain rather than generic arrows.
07Motion
Causal motion has pause, step, scrub, and reduced-motion equivalents.

Adaptation

Keep the signature move invariant. Adapt imagery, material, language, and interaction to the actual technology, logistics, finance context rather than copying a finished reference.

Accessibility

Use progressive disclosure, stable alignment, and generous line spacing for dense information. Provide an equivalent reduced-motion state. Meet WCAG AA contrast, visible focus, 44px targets, and never encode meaning through color or style alone.

06 / Background

Background

These lineages are source-linked research doors, not permission to copy a particular work or brand.

  • 01flowchart
  • 02chronophotography
  • 03circuit diagram
  • 04explorable explanations

Guardrail

Distinguish illustrative simplification from actual system behavior and edge cases.

07 / Agent recipe

moving-diagram

Use the stable ID and recipe to give design agents the same context. Always adapt the output to the real business.

Prompt recipe

Use case: stylized-concept
Asset type: Aesthetic Directions Encyclopedia showcase, 3:2 landscape master
Primary request: Create one polished freeform showcase for Moving Diagram, applied to FLOW 3, a clearly fictional public water-system explainer.
Scene/backdrop: a large educational screen revealing a city's water journey one relationship at a time with a matching printed diagram.
Style/medium: A coherent contemporary design world, not a collage of references. Explain sequence, dependency, and transformation by making the diagram itself the primary experience.
Composition/framing: A primary flow occupies the main field; supporting text and controls attach directly to nodes and transitions. Keep all important content inside an 8 percent safe margin.
Typography: Compact labels, strong step numerals, and readable explanations outside congested paths.
Color palette: State and path colors follow one legend with redundant symbols, patterns, or labels.
Imagery: Use real components or simplified objects only when they clarify what travels or transforms.
Materials/textures: Wires, tracks, pipes, routes, frames, or cells are selected from the domain rather than generic arrows.
Text (verbatim): "FLOW 3". No other readable words.
Constraints: Original fictional concept; visibly applied to motion, data-viz, presentation; realistic production detail; no real company, client, result, claim, signature, or watermark; no imitation of a living artist or proprietary campaign.
Avoid: animated arrows without explanation, spaghetti flows, motion as the only way to understand sequence, real logos, watermarks, artist imitation, generic mood board, illegible filler text.
Pilot refinement: Make one dominant integrated real-world application readable at thumbnail scale. Secondary views may support it but must remain subordinate. Do not create an equal-weight tiled mood board or generic presentation collage unless sequencing is essential to the direction. Render the exact requested text correctly and do not invent other readable copy.

Working constraints

  • Use one coherent direction grammar, not a collage of style references.
  • Use only a fictional business and minimal exact text.
  • Do not imitate a living artist, real brand, client project, or proprietary campaign.
  • Preserve essential hierarchy, legibility, contrast, and reduced-motion equivalence.
  • Avoid: animated arrows without explanation.
  • Avoid: spaghetti flows.
  • Avoid: motion as the only way to understand sequence.

08 / Sources & rights

Sources & rights

Work ownerSol

Example licenseAll rights reserved

  1. 01

    ASME — American Society of Mechanical Engineers

    Role: lineage · Linked source retains its own rights; IndexStyle structured description is CC BY 4.0.

  2. 02

    Britannica — Chronophotography

    Role: lineage · Linked source retains its own rights; IndexStyle structured description is CC BY 4.0.

  3. 03

    The Institution of Engineering and Technology

    Role: lineage · Linked source retains its own rights; IndexStyle structured description is CC BY 4.0.

  4. 04

    Bret Victor — Explorable Explanations (2011, 一次資料)

    Role: lineage · Linked source retains its own rights; IndexStyle structured description is CC BY 4.0.

The choice will be carried into the Quick Brief and can still be removed before sending.

Choose this style