Designed for Broadcast – Ein neues Overlay-Konzept für den professionellen LoL-Esport
Der professionelle League-of-Legends-Esport begeistert Millionen von Zuschauenden weltweit. Doch während die Spielqualität auf höchstem Niveau ist, wirkt das Broadcast-Overlay – das sogenannte Spectator-HUD – oft überladen und unübersichtlich. Zu viele Informationen, zu wenig Struktur. Genau hier setzt dieses Projekt an.
Recherche
Als Ausgangspunkt wurden die Overlays der drei grössten professionellen Ligen analysiert. Die LEC (League of Legends EMEA Championship, die europäische Liga) überzeugt mit einem klaren Farbkonzept, wirkt aber stellenweise überladen. Die LCK (League of Legends Champions Korea) besticht durch Zurückhaltung weniger Elemente, mehr Übersicht. Die LPL (League of Legends Pro League, die chinesische Liga) setzt auf maximale Datendichte.
Das neue Konzept kombiniert das Farbkonzept und die Vollständigkeit der LEC mit der ruhigeren Informationshierarchie der LCK.
Konzept
Das überarbeitete HUD gliedert sich in drei Hauptbereiche. Die Top-Bar zeigt Score, Gold, Kills und Türme sowie den Fortschritt der sogenannten Role-Quests; spielinterne Ziele pro Rolle werden als kreisförmige Fortschrittsringe angezeigt. Abgeschlossene Quests leuchten gold.
Das Scoreboard am unteren Bildschirmrand listet alle zehn Spielenden mit Champion, Summoner Spells, Items, KDA und CS übersichtlich auf. Runen und XP-Balken wurden in die seitlichen Side Panels ausgelagert, welche pro Spieler kompakt Champion-Porträt, Level sowie HP-, Mana- und EXP-Balken anzeigen.
Ergebnis
Das Resultat ist ein sauberes, modernes Broadcast-Konzept, das Spielinformationen klar strukturiert und dem Spiel selbst mehr Raum lässt. Umgesetzt als Figma-Mockup im Format 1920 × 1080 Pixel, mit Assets direkt aus den offiziellen Riot-Quellen.
(mbi)
Das Projekt verlief insgesamt gut und ich bin zufrieden mit dem Resultat.
Besonders interessant war die Recherchephase. Die drei grossen Ligen unterscheiden sich in ihrer Overlay-Gestaltung stärker als erwartet. Jede Liga verfolgt eine klar erkennbare Designphilosophie, was die vergleichende Analyse sehr aufschlussreich machte.
Eine der grössten Herausforderungen war das Zusammentragen aller benötigten Assets. Obwohl Riot Games mit Data Dragon und Community Dragon öffentliche APIs bereitstellt, sind die Dateistrukturen nicht immer dokumentiert, und die korrekten Pfade müssen oft manuell ermittelt werden. Besonders bei neueren Champions fehlte eine einheitliche Namenskonvention, was zusätzlichen Aufwand bedeutete.
Erschwerend kam hinzu, dass die offiziellen Broadcast-Overlays der Ligen proprietär sind. Da keine öffentliche Schnittstelle zur Verfügung steht, musste das Mockup als statisches Objekt umgesetzt werden, bei dem alle Icons und Spielerdaten manuell eingepflegt wurden.
Der nächste Schritt wäre, das Overlay funktionsfähig zu machen.