Design Lab Export

für Cherry · Stand: 2026-06-02 · Quelle: dispatcher/cockpit/design_lab_*.html + lexikon/

Quellen

DateiInhalt
design_lab_rams.htmlDieter Rams — 10 Prinzipien, Braun-Ästhetik
design_lab_tufte.htmlEdward Tufte — Data-Ink, Chartjunk, Small Multiples
design_lab_farrow.htmlMark Farrow — Stille, Weißraum, Schwarz als Methode
design_lab_mccandless.htmlDavid McCandless — Informations-Viereck, Farbe als Sprache
design_lab_interactive.htmlTouch-UI, Fitts's Law, Affordances, Feedback
design_lab_buchdruckerkunst.htmlGutenberg, Satzspiegel, Marginalien, Initialen
lexikon/design_feedback.jsonl49 Victors eigene Kommentare
lexikon/design_eval.jsonl63 Bewertungen: implement / discuss

5 Kernprinzipien

1. Rams — Weniger, aber besser

Nicht weniger als nötig — sondern so wenig wie möglich ohne etwas zu verlieren das zählt. Das Interface tritt zurück, der Inhalt spricht.

→ Voice/Mikrofon: Ein einziger großer Knopf. Keine Navigationsleiste. Kein Overhead.

2. Tufte — Jeder Pixel muss verdient sein

Data-Ink Ratio: alles was keine Information trägt, darf nicht da sein. Kein Chartjunk, keine Schatten, keine Rahmen um Rahmen.

Victor: „SO WICHTIG!!!!" (1+1=3 — zwei Elemente erzeugen immer einen dritten ungewollten Effekt)
Victor: „Intelligenter Kontext. Immer relativ zum Umfeld der Information."

3. Farrow — Stille als Statement

Weißraum ist keine leere Fläche — er ist aktives Gestaltungsmittel. Schwarz absorbiert, schafft Fokus. Schrift ist das Bild.

→ Voice: #111111 Hintergrund ist keine Sparmaßnahme — es ist Farrows Methode. Richtig so.

4. McCandless — Farbe ist Sprache

Farbe trägt Information oder sie ist falsch eingesetzt. Victor bewertet alle 4 McCandless-Sektionen: „implementieren".

→ Voice: #00d4aa nur wenn aktiv/aufnehmend. Sonst nichts.

5. Interactive / Touch-UI

Fitts's Law: Mikrofon-Button groß, Thumb-Zone unten mittig. Touch Targets min. 44px. Reaktion unter 100ms.

→ Voice: Der Aufnahme-Button muss so groß sein dass man ihn blind findet.

Aktuelles Farbsystem (voice_v2.html)

VariableWertBedeutung
--bg#111111Farrow-kompatibel: Schwarz als Methode ✓
--accent#00d4aaMcCandless: Farbe = Information (aktiv)
--red#ff4444Fehler / Stop
--text#e8e8e8Lesbar auf Dunkel

Bewertung: Konsistent mit allen Design-Lab-Prinzipien.

4 Designräume für Mikrofon V2

Richtung 1: „Rams Schwarz" EMPFEHLUNG

AspektBeschreibung
StimmungBraun SK4 Plattenspieler. Schweigen vor dem Ton.
TypografieHelvetica Neue, 18px, nur Versalien für Labels
Farbe#0a0a0a Hintergrund, #f0f0f0 Text, #00d4aa nur aktiv
LayoutKnopf 88px, Thumb-Zone unten. Transcript oben. Nichts sonst.
Waveform5 dünne Balken, zentriert, nur während Aufnahme
Bewertung★★★★★ — konsequenteste Umsetzung

Bauauftrag: BUILD_MIKROFON_V2_RAMS_PROTOTYP → Route /mikrofon-v2, V1 bleibt unberührt

Richtung 2: „Farrow Silence"

AspektBeschreibung
StimmungPet Shop Boys Plattencover. Weißraum als Argument.
TypografieGroßer Zustandstext 48px. Versalien. Schrift ist das Bild.
Farbe#111111 + #eeeeee. KEINE weiteren Farben außer Fehler.
WaveformEine einzige Linie, pulsiert bei Aufnahme
Bewertung★★★★☆ — mutig, hoher Wiedererkennungswert

Richtung 3: „Tufte Signal"

AspektBeschreibung
StimmungDashboard. Jedes Element verdient seinen Platz.
Waveform26-Balken + History-Canvas — Tufte Small Multiples in Echtzeit
LayoutWaveform prominent, Knopf darunter, Transcript darunter
Bewertung★★★★☆ — evolutionär, nah an V1

Richtung 4: „Buchdruck"

AspektBeschreibung
StimmungSatzkasten, Bleibuchstaben, Papier das atmet.
TypografieEB Garamond 20px, Transcript als Buchseite, Initialen
Farbe#fafaf7 (Papier), #1a1a1a, #8b4513 Akzent
WaveformKein — pulsierender Punkt als Interpunktion
Bewertung★★★☆☆ — poetisch, für Voice-App evtl. zu warm

Empfehlung

Richtung 1 (Rams Schwarz) als /mikrofon-v2 Prototyp — weil es die konsequenteste Umsetzung aller Prinzipien ist, die Victor mit „implement" bewertet hat. Ein Knopf. Rams würde nicken.