Designing Visual Essays
Visual essays are designed, not decorated. This document establishes the philosophy, constraints, and patterns that govern how Esy approaches interactive narrative design.
Core Philosophy
Esy visual essays exist to serve thinking. Every design decision must answer to this principle.
Visual elements—motion, interaction, layout—are not ornaments. They are instruments of clarity. When a visual choice does not advance understanding, it is removed.
A visual essay succeeds when the reader forgets they are interacting and remembers only what they learned.
Design Principles
Content Before Interaction
The essay must function as a readable document before any interactivity is added. If removing all JavaScript leaves an incoherent page, the design has failed. Interaction enhances; it does not constitute.
Earned Complexity
Interactive elements are introduced only after the reader has demonstrated intent through engagement. The opening of an essay establishes credibility and clarity; complexity follows.
Bounded Interactions
Every interactive sequence has a visible beginning, a predictable duration, and a clear end. Readers should never wonder how long an interaction will last or whether they can exit.
Progressive Disclosure
Information is revealed in service of narrative, not spectacle. Each reveal must advance the reader's understanding. Reveals that exist purely for visual effect are removed.
Device-Appropriate Design
Mobile and desktop are different media. Interactions that work on desktop may fail on mobile. Each device receives a design appropriate to its input modality and screen constraints.
Interaction Patterns
Visual essays employ a vocabulary of interaction patterns. Each pattern has appropriate uses and inherent costs.
Scroll-Reactive (Preferred)
Elements respond to scroll position without restricting navigation. Animations trigger, sticky elements persist, parallax effects create depth—all while the reader maintains full control.
Use for: Visual emphasis, transitions, progressive reveals, ambient motion.
Hover and Focus States
Interactive elements reveal additional information or visual states on hover (desktop) or focus. These are reversible and non-blocking.
Use for: Annotations, definitions, visual comparisons, optional depth.
Click/Tap Interactions
User-initiated actions that change state or reveal content. Require clear affordances and should produce immediate, visible results.
Use for: Expanding sections, toggling views, triggering animations, navigating steps.
Scroll-Locking (Constrained)
Temporarily intercepts scroll to drive a sequence. High-impact but high-risk. Governed by strict rules detailed below.
Use for: Rare narrative moments, symbolic transitions, conceptual synthesis.
Scroll-Locking Philosophy & Patterns
Scroll-locking is one of the most powerful—and most dangerous—interaction tools available. Used correctly, it elevates an essay into a memorable experience. Used incorrectly, it breaks trust, blocks reading, and alienates serious readers.
Core Principle
The Trust Model
Scroll-locking consumes reader trust. Trust accumulates through reading and is spent through interaction friction.
Trust is Lowest
- • On first page load
- • Above the fold
- • On mobile devices
- • For research content
Trust is Highest
- • After meaningful reading
- • Near essay end
- • When intent is demonstrated
- • When interaction is declared
Hard Rules
Scroll-Lock Budget
Each essay has a limited budget for scroll-locking. Readers experience total friction, not isolated interactions.
If everything is interactive, nothing is special.
Duration & Constraints
Each scroll-lock sequence must be short, predictable, and finite.
- 1–2 scroll gestures preferred
- 3 gestures maximum per sequence
- 5 gestures only if declared in advance, late in essay, and optional
Required Elements
Declaration
Announce that an interactive sequence is starting, its purpose, and approximate duration.
Progress Visibility
Show where the reader is, how much remains, and that control will be returned.
Escape Hatch
Provide a visible exit: “Skip interactive,” “Continue reading,” or auto-release on completion.
Appropriate & Inappropriate Uses
Appropriate
- • Single conceptual transition
- • Historical compression/expansion
- • Symbolic synthesis
- • Final interactive epilogue
Inappropriate
- • Definitions or lists
- • Citations or arguments
- • Core explanatory content
- • Decorative transitions
The Esy Scroll-Lock Rule
Scroll-locking is a rare, intentional narrative tool. An essay may contain no more than two mandatory sequences, never above the fold, never on mobile, and only after reader intent is established. All sequences must be declared, bounded, short, and escapable.
Prefer Scroll-Reactive Design
When interaction is desired but control is unnecessary, scroll-reactive patterns achieve visual impact without restricting navigation:
- Scroll-triggered animations
- Sticky elements that persist through sections
- Parallax motion and depth effects
- Progressive reveals tied to scroll position
Most visual impact can be achieved without scroll-locking. The question to ask: does this interaction do something text alone cannot? If not, remove the lock.
The Design Heuristic
Does this interaction do something text alone cannot?
If the answer is no, the interaction should be removed or simplified.
Scroll-locking should feel like a reward for attention, not a test of patience. When used sparingly and intentionally, it elevates Esy essays. When overused, it undermines the thinking Esy is built to support.
Design for trust first. Interaction comes second.