66 lines
4.7 KiB
Markdown
66 lines
4.7 KiB
Markdown
---
|
|
status: approved
|
|
---
|
|
|
|
# 002 — The voyage app: design record
|
|
|
|
Approved by the user on 2026-10-30 ("Yes. But listen wit hthe lyrics and watch should probably both be
|
|
in the listen & lyrics tab. Threads on the sea toggle works nicely. If hide timeline is off, maybe just
|
|
put it into paths or something."). Full history and verbatim quotes: `002-direction-round-notes.md`.
|
|
Reference mockups: **17 Voyage with real content** (with **16** and **12** for details). This file is
|
|
written so the app can be built without opening the mockups.
|
|
|
|
## The chosen ideas
|
|
|
|
1. **A 3D sea voyage is the main experience.** The ship sails Odysseus' route; every song is a stop
|
|
along it, in album order. Moving between songs moves the ship.
|
|
2. **The Greek frieze is the curtain call between scenes.** A black-figure-on-terracotta frieze band
|
|
drops like a curtain at scene changes: at the start (Troy), when entering a new saga, and before a
|
|
landing. The frieze's ground line becomes the 3D horizon when it lifts.
|
|
3. **Landings are sublevels.** At three places the voyage goes ashore through the frieze into a small 3D
|
|
scene: the **Cyclops' cave** (Cyclops Saga), **Athena's fight in God Games** (Wisdom Saga), and
|
|
**Odysseus' Ithaca homecoming** (Ithaca Saga). "Back to sea" returns to the voyage.
|
|
4. **Look 2, "two worlds".** The world is bright and naturalistic in colour (blue sea, warm sky,
|
|
green-ochre islands); the frieze keeps terracotta and black. The UI ties them together with the
|
|
frieze's meander band as the top edge of every panel/card/bar and terracotta + black accents on
|
|
parchment. "The colors pop."
|
|
5. **Stylised, not realistic, 3D.** Toon/flat shading, ink outlines, flat colour-band water with drawn
|
|
wave strokes, a small flat sun, graphic silhouettes (ship, island, the black-figure giant).
|
|
6. **Readable type.** Inter for all UI and labels, nothing under 13px, panel body ≥15px, minimal
|
|
tracking. Cormorant Garamond only for large display titles, lyric lines and frieze inscriptions.
|
|
7. **A right-side panel stays open** throughout (collapsible to a tab), following the current song.
|
|
Tabs:
|
|
- **About**: track, saga, story time, facts, parts and singers, the Odyssey reference with a
|
|
"Read the passage" reading view (Greek names: Butcher & Lang).
|
|
- **Listen & lyrics**: the player (real audio, seek bar, cover art), the line-synced lyrics with the
|
|
current line highlighted and click-to-seek, and **Watch** (YouTube link cards). The "listen with the
|
|
lyrics" entry and Watch both live here.
|
|
- **Paths**: each of the song's motifs with where it was heard before and where it returns, the
|
|
thread detail, the chart; and **the motif strip when the timeline is hidden**.
|
|
- **Fan works**: credited, linked fan works per song.
|
|
A play button in the panel header starts the song and opens Listen & lyrics.
|
|
8. **Paths are always visible.** The **bottom timeline** (the "big horizontal line") shows the songs,
|
|
saga dividers, "you are here", and motif threads underneath with knots where a motif plays. It can be
|
|
hidden; then the strip lives in the Paths tab. **"Threads on the sea"** is a toggle that draws the
|
|
current song's motifs as ink-edged ribbons on the sea (behind the ship solid, ahead dashed, with
|
|
merged labels such as "Next: Survive").
|
|
9. **Motifs as threads** (chosen over pennants and ink-only in 12): soft coloured threads with knots,
|
|
one colour per motif, the same colour everywhere (timeline, panel, ribbons, lyric chips).
|
|
10. **Real content from the mounted folder** (spec 003): FLAC playback with seeking, `.lrc` synced
|
|
lyrics, the Odyssey passage (Butcher & Lang's translation, which keeps the Greek names). Never committed; the app works without it.
|
|
11. **Fan project, credited.** The fan notice and the thanks to Jorge Rivera-Herrans on every screen.
|
|
|
|
## Deselected, and why
|
|
|
|
- **02 Vertical story, 05 Score/waveform, 06 Constellation**: "too uninteresting".
|
|
- **08 Sea chart + log line, 09 Schematic sea chart**: "doesnt work too well".
|
|
- **11's metro-map lines inside plates**: "doesnt hit as well". 11's navigation survives as the idea of
|
|
places opening into sublevels; 10's vellum style survives in the chart.
|
|
- **Pennants (B) and ink-only (C)** motif treatments in 12: threads chosen "definetly".
|
|
- **Look 1 (vellum throughout)**: decent but the UI of 2 and 3 looked better.
|
|
- **Look 3 (frieze-led)**: made the site feel unified, but "im leaning a lot more towards 2. The colors
|
|
pop a lot more." Its cohesion (frieze accents on menus) was carried into look 2.
|
|
- **15's inscription-style labels** (small wide-tracked Cormorant capitals): "very hard to read".
|
|
- **Choosing one paths placement**: A/B/C "all have their strengths", so they were combined.
|
|
- **Simulated playback and placeholder lyrics**: replaced by the real content.
|