TTRPG World Generator · UI design studies

Interactive prototypes of the same app with different layouts and interaction models: five first-round studies, three that recombine the pieces that worked, then a revision of the favourite. Every control works; the world is a deterministic mock, not a simulation. Compare how each one handles the three problems below, then mix and match.

1 · ClutterMountain hatching, tree scatter and same-weight labels buried towns and points of interest. Hexes covered the ocean.
2 · SelectionA thin dashed ink outline on an ink map. You could not tell what was selected or hovered.
3 · Drill-downDouble-click opened some region around the cursor with no preview of the boundary and no way to adjust it afterwards.

Round two · recombinations

Built from the parts that worked in round one (09 Lamplight is Lantern revised after Chad's first look): Vellum's open map and foldable cards, Expedition's stage rail, region chooser with an obvious Explore button and per-stage variables, Console's mini-map with a draggable frame that re-anchors the map, its find-an-element list and quick show/hide chips. The three designs arrange the same parts three different ways.

Lamplight

Lantern after the first look, with the cards regrouped. Where you are and Stages are one card (the rail is the breadcrumb); Show/hide holds the chips, the remaining layers, Ink/Symbol and GM/Player; Choices has tabs.

Choices tabs: Choose a region / destination / scene · Battle map (B) · Find (/)
The Menu keeps only undo/redo, Find, Export and About
A folded card is only ever pill-sized; Tab still clears the table

Lantern

Vellum taken further. The map is the window and every card folds to a tab: breadcrumb, Stages, This map, Legibility, Menu, show/hide chips, Choices, Mini-map. Tab clears the table.

Choices card: candidate regions with previews, size slider, Explore region; destinations, buildings, rooms further down
Select anything and the card becomes its inspector, with the variables behind that element
Mini-map bottom-right; Move (M) drags the frame to re-anchor

Ledger

The docked workbench. Stage rail on the left with the Position mini-map inside it; chips and a hover strip around the map; a Choices / Find / Refine tabbed column on the right. Both columns fold to strips.

Re-anchor from the rail: Move the frame on the parent map, release to regenerate
\ folds both columns; the folded rail keeps the numbered level dots
Refine tab: this stage's variables only, “All variables” one click away

Bridge

A paper map on a dark table with three floating instruments: the Ladder (stacked mini-maps of every level you came through), a Command bar (find anything, chips, tools) and a Dock (choices or inspector).

The Ladder is the level indicator and the mini-map in one; the parent's frame drags to re-anchor
/ then type: results echo hover on the map, Enter selects, Shift+Enter enters or descends
Refine drawer under the choices with the handful of variables that shape this map

Round one

Vellum

The cartographer's desk. The map fills the window; a few paper cards float over it. Ink rendering, focus-dim selection.

Frame tool: drop, drag and resize the region frame before opening (F or double-click)
Parent ghost thumbnail shows where you are; adjust and re-open from it
Legibility card: detail and label density sliders

Strata

The layers workbench. Dark GIS-style chrome, flat symbol rendering, layer opacity and solo, a live legend that doubles as a filter.

Region tile grid: hover a tile to see what is inside, click for a live preview card, nudge before opening
Elements list with search, synced hover, marching-ants selection
Position card to re-anchor the current map from the parent

Twin

Parent and child side by side. The parent always shows the current extent as an editable frame; dragging it regenerates the child live.

Live region preview follows the cursor over the atlas; click to pin
Selection leader line connects the element to its counterpart in the parent
Thumbnail-chain breadcrumb

Console

The table GM's console. Dark, high contrast, keyboard first. Categorical symbols with a legend and filter chips; a session panel with quick actions.

Reticle: the child extent follows the cursor; Shift+wheel resizes, click pins, Enter opens
Picture-in-picture mini-map of the parent; move the extent to re-anchor
Hover info strip instead of dimming

Expedition

Guided stages. A stage rail (World → Region → Settlement → Battle map / Dungeon) and a Choices panel that lists candidates with thumbnails.

Choose a region from cards with previews; hovering draws the extent, a slider sets its size
List-first selection: rows highlight, zoom and flash the element
Per-stage variables ("Refine") next to the choices

Harness

The plainest wiring of the shared widgets, used as the smoke test and as the baseline the designs depart from.

Everything, no styling decisions

Source: ~/code/TTRPG_World_Gen_UI/designs. Shared mock generator, SVG map view, store and widgets are documented in shared/README.md. Nothing is persisted beyond your browser's localStorage. Right-click any map for reroll and lock; Ctrl+Z undoes.