Short Facts
- Branding im Stream ist dein visuelles und akustisches Wiedererkennungsmerkmal.
- Alerts: kurz, klar, lustig – aber nie lauter als du.
- Overlays: minimalistisches Layout, gute Lesbarkeit, klare Hierarchie.
- Widgets: nur die, die wirklich helfen – der Rest kommt in den „Mach’s hübsch“-Karton.
- Mach dir ein kleines Brand‑Kit (Farben, Schrift, Logo, Sound) und bau alles darauf auf.
- Teste, iteriere, bleib du selbst. Humor ja. HUD vom Kampfjet nein.
Warum Branding? Weil niemand „Streamer Nummer 3487“ googelt
Erinnerbarkeit schlägt Zufall. Ein gutes Stream‑Branding:
- sorgt für Wiedererkennung (Farben, Fonts, Sounds),
- lenkt den Blick (Overlay-Hierarchie),
- spart kognitive Last (wenige, nützliche Widgets),
- macht dich „clip‑barer“ (Alerts mit Punchline),
- und klingt gut (Audio‑Branding, keine Ohrenschmerzen).
Klingt nach Arbeit? Ist es. Aber wir machen’s spaßig.
Das Mini‑Brand‑Kit (dein Fundament)
- Farben: 1 Primärfarbe, 1 Akzent, 1 neutrale Oberfläche
Beispielpaletten:- Elektro: #7C3AED (Violett), #22D3EE (Cyan), #0F172A (Navy)
- Neon Noir: #10B981 (Grün), #F59E0B (Amber), #111827 (Anthrazit)
- Cozy: #D97706 (Kupfer), #60A5FA (Blau), #1F2937 (Dunkelgrau)
- Fonts: Eine Schriftenfamilie mit zwei Schnitten (z. B. Inter Bold für Headline, Inter Regular für Fließtext).
- Logo/Marke: Wortmarke + vereinfachtes Icon als Bildmarke.
- Ton: Ein kurzer „Sonic Logo“ (1–2 Sekunden), plus ein freundlicher Alert‑Sound.
- Stil: 3 Adjektive (z. B. „nerdig, freundlich, frech“) – als Filter für alle Designentscheidungen.
Pro‑Tipp: Schreib’s auf. Das ist dein Kompass, wenn du nachts um 2 Uhr „nur kurz“ an den Overlays schraubst.
Alerts: Bling mit Sinn
Deine Alerts sind die Mini‑Shows für Momente: Follow, Sub, Tip/Donation, Raid. Designziele:
- Dauer: 2–3 Sekunden visuell, Sound ≤ 1.5 Sekunden
- Position: oben rechts oder unten links – außerhalb der Spiel‑HUD
- Lesbarkeit: großer Namenstext, klarer Kontrast
- Ton: freundlich, nicht erschreckend (keine Feuerwehrsirene – außer du bist tatsächlich Feuerwehr)
| Alert-Typ | Inhalt | Ton | Animation |
|---|---|---|---|
| Follow | „Neuer Follow: Name“ | leicht, fröhlich | kurzer Pop/Bounce |
| Sub | „Danke für den Sub!“ | etwas kräftiger | Glow + Sparkles |
| Tip/Donation | Betrag + Name | dezent | Count‑Up / progress |
| Raid | Anzahl + Kanalname | festlich | Konfetti / Particle Burst |
Humorideen für Alert‑Text
- Follow: „[Name] hat uns gefunden. Wir tun so, als wären wir nicht überrascht.“
- Sub: „[Name] hat subbed. Das Herz ist jetzt zwei Pixel größer.“
- Raid: „[Name] bringt [X] Leute mit. Stühle sind aus, Stehen ist eh gesünder.“
Overlays: Bühne, nicht Messestand
Die besten Overlays sind zurückhaltend. Regeln, die nerven – aber funktionieren:
- Minimalismus: weniger Boxen, mehr Luft.
- Z‑Ordnung: Game/Camera > Alerts > Infos > Deko.
- Kontrast: WCAG‑freundlich, keine Neon‑Gelb auf Weiß.
- Safe Areas: 60–80 px Rand, damit nichts abgeschnitten wirkt.
- Kamera: 16:9 oder 4:3, die Form passt zur Szene (Just Chatting ≠ FPS).
Typische Szenen:
- Starting Soon: Timer, Musik, Chat sichtbar
- Just Chatting: große Cam, Chatbox, Event List
- Gameplay: kleine Cam, minimal Info (Goals, Event Toasts)
- BRB: „Kaffee‑Quest aktiv“ + dezente Musik
- Ending: kurze Outro mit Credits/Top Supportern
Widgets: Deine Roboter‑Sidekicks
Nur mitnehmen, was wirklich hilft. Der Rest bleibt im Inventar.
| Widget | Nutzen | Wo platzieren | Dos & Don’ts |
|---|---|---|---|
| Chatbox | Chat im VOD sichtbar | Just Chatting groß, Gameplay klein | klare Fonts, moderater Effekt |
| Event List | Letzte Follows/Subs | Randbereich | 3–5 Einträge, nicht scrollen lassen |
| Goal (Sub/Follow) | Motivation, Kontext | obere Ecke | Enddatum, kleine Skala |
| Now Playing | Musikinfo | optional unten | Nur wenn DMCA‑safe |
| Stream Timer | Struktur | Starting/BRB/Ending | Kein Count‑down Stress im Gameplay |
| Polls | Interaktion | Just Chatting | kurz halten, klare Optionen |
Audio‑Branding ohne Kopfschmerz
- Lautheit: Ziel −14 LUFS Integrated für Streams (Stichwort Streaming‑Standards).
- Stimme: Gate leicht, Kompressor 2:1–3:1, Limiter bei −1 dBFS.
- Spiel vs. Stimme: Stimme immer oben – Mischverhältnis ca. −6 bis −10 dB unter Stimme für Game‑Audio.
- Sounds: kurze, klare FX (kein Dauergeräusch).
- Musik: nur stream‑safe Tracks, klare Lizenz.
Umsetzung in OBS (+ StreamElements/Streamlabs)
Browser‑Source Alerts (Schnellstart)
- Erstelle Alerts in StreamElements oder Streamlabs (mit deinem Style).
- Kopiere die Alert‑URL als Browser Source in OBS.
- Setze eine CSS‑Maske, z. B. weicher Schatten und Glow.
css
/* OBS Browser Source CSS – dezenter Glow */
body { margin: 0; background: transparent; }
.alert {
font-family: Inter, system-ui, sans-serif;
color: #22D3EE; /* Akzentfarbe */
background: rgba(15,23,42,0.65); /* Navy mit Alpha */
padding: 12px 16px;
border-radius: 12px;
box-shadow: 0 6px 24px rgba(34,211,238,0.25);
backdrop-filter: blur(6px);
animation: pop 300ms ease-out;
}
@keyframes pop {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1.0); opacity: 1; }
}
/* OBS Browser Source CSS – dezenter Glow */
body { margin: 0; background: transparent; }
.alert {
font-family: Inter, system-ui, sans-serif;
color: #22D3EE; /* Akzentfarbe */
background: rgba(15,23,42,0.65); /* Navy mit Alpha */
padding: 12px 16px;
border-radius: 12px;
box-shadow: 0 6px 24px rgba(34,211,238,0.25);
backdrop-filter: blur(6px);
animation: pop 300ms ease-out;
}
@keyframes pop {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1.0); opacity: 1; }
}
Eigenes HTML‑Alert (für Custom Widgets)
html
<div class="alert">
<strong>Neuer Follow:</strong> <span id="name">Andreas</span>
</div>
<script>
// Simuliert einen Namen (ersetzbar durch StreamEvents-Daten)
document.getElementById('name').textContent = 'ChatFlüsterer42';
</script>
<div class="alert">
<strong>Neuer Follow:</strong> <span id="name">Andreas</span>
</div>
<script>
// Simuliert einen Namen (ersetzbar durch StreamEvents-Daten)
document.getElementById('name').textContent = 'ChatFlüsterer42';
</script>
Design‑Checkliste (30‑Minuten‑Quick‑Win)
- Brand‑Kit definiert (Farben, Fonts, Logo, Ton)
- Alerts: 4 Typen, 2–3s, klare Position
- Overlays: pro Szene 3–5 Elemente, hohe Lesbarkeit
- Widgets: nur das Nützliche, sauber ausgerichtet
- Audio: Stimme oben, −14 LUFS Ziel, kein Clipping
- Test: Off‑Stream, Aufzeichnung ansehen, Chat‑Feedback einholen
- Iteration: 1 Änderung pro Woche statt 12 pro Nacht
Häufige Fehler (und wie du sie charmant vermeidest)
- Zu viele Elemente: Wenn dein Overlay eine Excel‑Tabelle ist, bist du zu weit gegangen.
- Kaum Kontrast: Schön auf Retina, unlesbar bei Müdigkeit.
- Alert‑Spam: Kurz halten, keine langen Musik‑Jingles bei jedem Follow.
- Unklare Hierarchie: Kamera schwebt irgendwo, Text konkurriert mit HUD.
- Kein Test: Einmal Probeaufnehmen, dann live gehen. Bitte.
Beispiel: „N8walk Cozy“ Overlay‑Setup
- Farben: #D97706 (Kupfer), #60A5FA (Blau), #1F2937 (Dunkelgrau)
- Fonts: Inter Bold (Headlines), Inter Regular (Text)
- Starting Soon: ruhige Ambient‑Musik, Timer 3:00, Chat sichtbar
- Gameplay: Cam rechts unten, Alerts oben rechts, Event List links oben
- BRB: „Kaffee‑Quest: 2–3 Min“, Musik leiser
- Ending: 30‑Sekunden Outro mit Credits
Alt‑Text‑Vorschläge für Assets:
- „Starting‑Soon‑Overlay mit kupferblauem Rahmen und Timer“
- „Sub‑Alert mit glowendem Kupferton und Nameinblendung“
- „Event‑Liste minimalistisch in Blau mit drei Einträgen“
Mini‑Roadmap: Von „meh“ zu „merkbar“
- Brand‑Kit schreiben (15 Min).
- Alerts vereinheitlichen (30 Min).
- Gameplay‑Overlay vereinfachen (30 Min).
- Audio checken und auf −14 LUFS zielen (20 Min).
- Teststream mit 2–3 Freunden (30 Min).
- Woche später: kleine Iteration, nicht Komplettumbau.
Schlusswort (mit Augenzwinkern)
Branding ist kein „eine Nacht, dann perfekt“. Es ist „jede Woche 1% besser“.
Halte es leicht, klar und typisch du. Der Chat bleibt, wenn er dich erkennt – und deine Alerts nicht klingen wie ein ICE im Tunnel.