Synesthesia to Synthesis
A method for designing abstract visuals (backgrounds, motion, brand graphics, generative art) that carry the right feeling instead of arbitrary decoration.
Premise, after Wassily Kandinsky's Point and Line to Plane: every abstract form carries inherent emotional weight. A dot, the slope of a line, a color, a position on the page, none are neutral. Good visual design is the disciplined translation of meaning into form. The anthropological lens helps: what did people feel, across cultures and history, looking at these shapes? Tap that primal response. Don't depict it literally.
Core rule: if two surfaces say different things, they must look different. Never reuse a concept just because it was convenient last time.
Step 1 - Emotional parse
Read whatever the visual sits behind or beside (a headline, a section, a product moment) and name the emotion it must evoke, not the topic. "Security" is a topic; the emotions might be safety, containment, vigilance, trust. "Pricing" is a topic; the feeling might be calm, fairness, stability. Pick the dominant one or two.
Ask: what is this moment doing to the viewer? Reassuring them? Asserting primacy? Conveying breadth? Inviting motion? Slowing them down?
Step 2 - Synesthesia (translate emotion into sensory form)
Map the emotion onto concrete visual primitives. Colors and forms have shared, near-universal emotional readings you can lean on:
Color. Blue reads as trust, calm, distance. Red reads as alarm, urgency, appetite. Green reads as safety, growth, permission. Amber and gold read as energy, value, caution, the industrial edge. Purple reads as esoteric, transgressive, premium. White reads as clarity and space. When a brand palette is fixed, shift temperature and density rather than hue to color an emotion.
Form and position (Kandinsky):
- Dot: presence, focus, a unit, a beginning. Many dots become a population or a surface.
- Line: tension and direction. Horizontal = rest, stability, the ground. Vertical = aspiration, dignity, height. Diagonal = motion, energy, instability.
- Slope: rising reads as optimism and ascent; falling reads as decline and subordination.
- Position: top = primacy, superiority, lightness; bottom = grounding, weight, subordination; center = focus and confrontation.
- Curve vs straight: curves feel organic, alive, aerodynamic; straight lines feel mechanical, deliberate, controlled.
- Density and rhythm: sparse feels calm and considered; dense feels intense and scrutinizing.
- Motion: slow feels controlled and intelligent; fast or erratic feels chaotic (usually to avoid).
Step 3 - Synthesis (compose one cohesive concept)
Combine the primitives into ONE concept that (a) evokes the named emotion, (b) fits the brand's register and constraints, and (c) is distinct from every other surface in the system. Name it in a word or two ("rings," "strata," "ascent"). Then build it.
Constraints keep a system cohesive even as concepts vary: hold the palette, keep effects subtle and behind a tint, prefer slow and controlled motion, and remember that restraint is part of the language. Not every surface needs motion. Text-forward and still is a legitimate choice when the content carries the weight.
Worked example
A page section whose headline promises calm, flat, predictable pricing.
- Emotional parse: the feeling is stability and fairness, not "money."
- Synesthesia: stability lives in horizontal lines at rest, low contrast, slow drift, sparse rhythm.
- Synthesis: "strata" - a few steady horizontal layers, barely moving, sitting low in the frame. It reads as level and settled before a word is read, and it looks nothing like the radial, energetic, or dense concepts used elsewhere.
Run the same three steps for every surface and you get a family of visuals that are individually meaningful and collectively coherent, with no accidental repeats.
Practical notes for motion and web
When these concepts become animated backgrounds, treat performance and accessibility as part of the craft:
- Mount heavy visuals lazily, only when they approach the viewport.
- Pause animation when offscreen or when the tab is hidden.
- Respect reduced-motion preferences with a static render.
- Provide a graceful no-op for low-end devices and missing hardware acceleration.
- Cap pixel ratio and prefer low-power rendering paths.
The method is medium-agnostic: it applies equally to a static poster, a motion system, a generative piece, or an illustration style. The discipline is the same, parse the emotion, translate it into form, synthesize one distinct concept.