erklaervideos-v2 · Designvorschläge · Stand 29.08.2026

Fünf Richtungen für die Produktionsoberfläche

Jede Detailseite zeigt dieselbe fiktive Oberfläche (Projekt „KI-Agenten erklärt", sechs Szenen, ein Render-Lauf bei 64 %), damit sich die Entwürfe direkt vergleichen lassen. Alle fünf sind dunkel und technisch angelegt, unterscheiden sich aber in Farbwelt, Schrift, Flächenlogik, Dichte und Stimmung.

Entscheidung: Entwurf 03 Regie wurde gewählt (29.08.2026) und um ein gedecktes Signal-Grün und einen Messing-Akzent ergänzt. Die übrigen vier Entwürfe bleiben unverändert als Referenz.
nur Dark Themeskein Aurora-/Nordlicht-Lookreines HTML + CSSSchriften von Google Fonts mit System-FallbackTokens auf jeder Seite dokumentiert
Entwurf 01

PhosphorAmber-Terminal, einfarbig, Scanlines

Eine einzige Leuchtfarbe auf Fast-Schwarz, alles in Monospace, Zustände nur über Helligkeit und Glyphen (■ ▲ ·). Panels tragen Box-Drawing-Titel, Buttons stehen in eckigen Klammern. Wirkt wie eine Konsole, die Wörter zählt statt Pixel.

#0B0A07
#12100A
#6A5218
#A98A45
#EACB8A
#FFB000
Schrift
JetBrains Mono (alles)
Stimmung
konzentriert, retro-technisch, ohne Ablenkung
Dichte
hoch
Entwurf 01 ansehen
Entwurf 02

BlaupauseTechnische Zeichnung, bemaßt

Preußischblauer Grund mit feinem Zeichenraster, weiße Linien, Szenen als bemaßte Bauteile mit Maßband und Schriftfeld im Fuß. Ein gelber Markerstift ist der einzige Akzent, ein Rotstift markiert Korrekturen. Ordnet die Produktion wie einen Bauplan.

#081833
#0B1F3F
#A9BEDC
#FFFFFF
#FFD84D
#FF7A59
Schrift
Barlow Condensed + Barlow + Overpass Mono
Stimmung
planvoll, ingenieurhaft, ruhig
Dichte
mittel
Entwurf 02 ansehen
Entwurf 03 gewählt

RegieBroadcast-Konsole, grünes Signal, Messing-Akzent

Graphit-Hardware-Panels mit Bezel-Kanten, ein großer Timecode, ein gedecktes Signal-Grün als Tally (REC, Playhead, Fokus, Primäraktion), Messing für Entwurf, Prüfung und Pegelspitze, VU-Meter in der Seitenleiste. Fühlt sich an wie ein Sendepult, an dem gerade aufgezeichnet wird.

#121416
#1A1D21
#33393F
#E8EAEC
#4CAF7A
#A98A45
Schrift
Chivo + Chivo Mono
Stimmung
live, kontrolliert, professionell
Dichte
mittel bis hoch
Entwurf 03 ansehen (gewählt)
Entwurf 04

MonolithSchwarz-Weiß, Hairlines, eine Akzentfarbe

Keine Boxen, nur Hairlines und Weißraum auf reinem Schwarz. Eine leichte Inter in großen Graden, Mono-Labels in Kapitälchen, und ein kühles Blau als einzige Farbe für Fokus, Aktion und die laufende Szene. Was nicht wichtig ist, ist grau.

#0A0A0A
#242424
#7A7A7A
#9A9A9A
#F2F2F2
#6B93FF
Schrift
Inter + IBM Plex Mono
Stimmung
still, präzise, editorial
Dichte
niedrig
Entwurf 04 ansehen
Entwurf 05

StahlwerkCyber-Industrial, gefaste Platten

Stahlgraue Platten mit abgeschrägten Ecken, Warnstreifen an Kopfleiste und Löschen-Button, Kennungen wie SZ-03 und JOB-2291 überall. Elektrisches Cyan als harter Akzent ohne Glow, Gelb nur als Warnung. Eine Maschine, die man bedienen darf.

#161A1F
#20262D
#3B4653
#9AA6B4
#22D3EE
#F2C200
Schrift
Chakra Petch + Saira + Space Mono
Stimmung
robust, betriebsam, industriell
Dichte
hoch
Entwurf 05 ansehen

Auf einen Blick

EntwurfFlächen und LinienSignaturAkzentlogikPasst, wenn
01 PhosphorRasterlinien, 1-px-Rahmen, Scanline-OverlayBox-Drawing-Panels, Zustände als Glypheneine Farbe, drei Helligkeitendie Oberfläche bewusst wie ein Werkzeug für Textarbeit wirken soll
02 BlaupauseZeichenraster, weiße Konturen, keine FüllflächenBemaßte Timeline mit Maßband und SchriftfeldMarker-Gelb für Aktion, Rotstift für KorrekturPlanung und Timing im Vordergrund stehen
03 Regie (gewählt)Hardware-Panels mit Bezel, weiche 6-px-RadienTimecode, Playhead, VU-MeterSignal-Grün für Aufnahme, Fokus, Aktion; Messing für Entwurf und Prüfung; gedecktes Rot nur für Fehler und LöschenVertonung und Schnitt der tägliche Kern sind
04 Monolithnur Hairlines, viel Weißraum, harte Kanten2-px-Fortschrittslinien, große leichte Headlineein Blau für Fokus, Aktion, laufende Szenedie UI lange und ruhig genutzt wird
05 Stahlwerkgefaste Platten, Warnstreifen, KennungenClip-Path-Fasen an Buttons, Badges, PanelsCyan für Aktion, Gelb für Warnung, Rot für LöschenJobs, Warteschlangen und Maschinenzustand sichtbar sein sollen