Seelenblumen ist Riots erstes Event, das sich über mehrere Spiele erstreckt und das die Spieler in League of Legends und Legends of Runeterra erleben können. Bevor wir uns jedoch genauer ansehen, wie das geschehen ist, möchte ich kurz darüber sprechen, was Seelenblumen eigentlich ist.
Seelenblumen ist ein Geschichts-Event (das die Hintergrundgeschichte der „League of Legends“-IP vertieft), das das Aufblühen einer echten (fiktionalen) Seelenblume in Ionia signalisiert. Die Ionier nutzen die spirituellen Eigenschaften der Blume, um mit ihren Verstorbenen zu kommunizieren und entweder ihren friedvollen Übergang in das Jenseits zu feiern oder ihre Unfähigkeit, zur Ruhe zu kommen, zu betrauern.
Aber League und LoR sind zwei unterschiedliche Spiele – das eine ist ein MOBA und das andere ein Sammelkartenspiel. Sie haben eine unterschiedliche Ästhetik und unterschiedliche Spieler, also wie genau können wir sicherstellen, dass die Spieler in beiden Spielen eine zusammenhängende Erfahrung machen?
Hier kommt das visuelle Design ins Spiel
Bei Riot ist das visuelle Design in zwei Schlüsselbereiche unterteilt: Designer, die an Produkten arbeiten und einzelne Inhalte wie Symbole, Rahmen und Benutzeroberflächen in unseren Spielen erstellen, und Designer, die an Marken- und Publishing-Inhalten arbeiten und sicherstellen, dass die Spieler schon im Vorfeld genau wissen, was sie bekommen.
Wir werden erfahren, wie die visuellen Designer aus diesen beiden Bereichen zusammenarbeiten, um sicherzustellen, dass die Designsprache und der Stil in den unterschiedlichen Spielen einheitlich bleiben.
Beginnen wir als am Anfang – mit der Ausarbeitung einer visuellen Marke für Seelenblumen.
Die Entwicklung einer visuellen Identität für Seelenblumen
Mit Craig „Riot MrParkinson“ Parkinson, dem Grafikdesigner von League of Legends
Ich habe damit begonnen, das Team für Thematik-Entwicklung – die Künstler, Autoren und Produzenten, die mit der Entwicklung von Leagues Multiversum betraut sind – zu fragen, was Seelenblumen genau ist. Und als sie mir von der Thematik erzählten, gab es ein paar Schlüsselwörter wie skurril, spirituell, elegante, friedlich, abstrakt und verführerisch, die sie immer wieder wiederholten. Also habe ich ein Dokument mit diesen Wörtern erstellt und einfach … damit angefangen.
Seelenblumen konzentriert sich auf das Jenseits und die Geister, die dort leben. Sie sind grundsätzlich im Geisterreich miteinander verbunden und leben verhältnismäßig friedlich zusammen. Diese Tatsache fungierte als mein Nordstern, als ich damit begann, visuelle Referenzen zu suchen und Stimmungsmontagen zu erstellen, die die richtigen Gefühle heraufbeschwören.
Dann habe ich die Referenzen in die Schlüsselbereiche unterteilt, die ich mir genauer ansehen musste, und mir die Formen, Farben und Texturen angesehen. Das hat mir geholfen, zu entscheiden, in welche Richtung sich die Seelenblumen-Marke entwickeln sollte. Aber ich musste mich selbst fragen, wie wir alle Teile zusammenführen – vor allem die wichtigsten Inspirationsquellen aus Animes, der ostasiatischen Mythologie und League –– und zu einem stimmigen Gesamtbild vereinen können.
Formsprache
Ich wollte die Eleganz des Events in einer einzigartigen Formsprache einfangen. Es musste etwas Abstraktes und Weiches sein, das sich gleichzeitig frisch und unbekannt anfühlt. Mit diesem Leitfaden begann ich, mir die Arten von Formen anzusehen, nach denen ich suchte.
Dabei sprang mich die Geometrie fast sofort an. Ich konnte diese eleganten Formen benutzen, um eine Art Symbolismus zu entwickeln, der unterschiedliche Dinge des Seelenblumenfests repräsentiert. Dieser Symbolismus passte wirklich gut zur Gesamtthematik, da der Betrachter selbst entscheiden kann, was er in der Geometrie sehen will. Sie kann viele verschiedene Dinge und gleichzeitig nichts darstellen.
Ich habe mich an Bildern von ostasiatischer Kunst orientiert. Und während ich immer wieder neue Konzepte erstellte und darüber nachdachte, wie sie in die Benutzeroberfläche passen könnten, hatte ich das Gefühl, dass etwas fehlt: eine tiefere Verbindung mit der Arbeit des Teams für Thematik-Entwicklung. Was, wenn ich die Konzepte für die Skins für das Design selbst verwenden könnte?
Ich wollte die Spieler nicht mit zu vielen Dingen überfordern, weshalb ich stattdessen so etwas wie Rahmenkomponenten erstellte. Die Geometrie, an der ich arbeitete, wurde zum Folkloremuster auf Yasuos Hemd. Anschließend begann ich darüber nachzudenken, wie diese einzigartigen Folkloremuster und Formen die Markenelemente unterstützen könnten. Und das führte mich zum nächsten Teil: den Farben und Texturen.
Farben und Texturen
Das Team für die Thematik-Entwicklung hat eine wunderschöne Farbpalette für das Event erstellt, die auf Wasserfarben basiert. Alles sollte sich skurril und traumartig anfühlen. Als ich mir als Referenz Aquarellbilder anschaut, vielen mir sofort die unterschiedlichen Texturen auf, die sie hatten – selbst wie die Tinte auf ein Stück Pergament tropft.
Ich wollte das visuelle Design der Skins beibehalten, damit alles gut zusammenpasst. Aber ich brauchte noch ein paar einzigartige Texturen, um sicherzustellen, dass die Farben nicht kontrastlos wirkten. Ich ließ mich von Dingen wie Baumrinde, Pinselstrichen oder sogar den Venen der Blätter inspirieren und erstellte einen kleinen Teil des visuellen Designs des Events.
Nach diesen anfänglichen Konzepten – und einem ausdrücklichen Ja des Teams – begann ich, ein wenig durchzudrehen. Ich glaube, ich habe an die 90 Logos designt. Es war ziemlich verrückt. Und mit jeder Präsentation und jedem Feedback habe ich die Möglichkeiten eingegrenzt, bis wir zu dem Punkt gelangt sind, an dem wir uns heute befinden.
Als alles entschieden und festgelegt war, erstellte ich einen Leitfaden, den ich den restlichen Teams gab, die am Event arbeiteten. Und genau diesen Leitfaden hat das „Legends of Runeterra“-Team benutzt, um mit der Arbeit zu beginnen.
LoR blüht auf
Mit Tom „Riot Tomukus“ Sayer, dem leitenden Grafikdesigner von Legends of Runeterra
Ich arbeite am Design und der Implementierung von Objekten in Legends of Runeterra. Das bedeutet, dass ich mit Nutzungserlebnis-Designern, Technikern, Konzeptkünstlern und Autoren – im Grunde dem gesamten LoR-Team – zusammenarbeite, um sicherzustellen, dass die Spieler in unserem Spiel etwas zum Anschauen und Interagieren haben.
Meine Arbeit beginnt im Grunde dann, wenn wir ein Drahtgittermodell von den UX-Designern erhalten. Hierbei handelt es sich im Grunde um ein Set aus grauen, schwarzen und weißen Feldern, das uns einen Überblick darüber gibt, wo jeder Teil hingehört, den wir erstellen. Anschließend ist es meine Aufgabe, diese Dinge neu zu ordnen und die Hierarchie jedes einzelnen Elements festzulegen – im Grunde geht es darum, welche Dinge im Hintergrund oder im Vordergrund zu sehen sind. Und das hängt wiederum von den Informationen ab, die für die Spieler am wichtigsten sind.
Als wir den Client für Seelenblumen designten, entschieden wir uns für eine Übersicht, damit die Spieler ihren Fortschritt im Auge behalten können, während sie Belohnungen erhalten. Das funktioniert ähnlich wie die Regionsbelohnungen, die die Spieler eine Region auswählen lassen, in der sie Fortschritte machen können. Das visuelle Design musste all diese Informationen enthalten, um sicherzustellen, dass die Übersicht von Seelenblumen mit dem Stil von League übereinstimmt, sich gleichzeitig jedoch von den Regionsbelohnungen abhebt.
Um das zu erreichen, sah ich mir die Assets und den Leitfaden von Riot MrParkinson an und übersetzt sie in ein Format, das zu LoR passte. Obwohl League und LoR zur selben IP gehören (und vom selben Unternehmen entwickelt wurden), haben die Spiele einzigartige Kunst- und Designstile. Beim Client von League handelt es sich um eine moderne, flache Benutzeroberfläche – manche Stellen weisen zwar gewisse Dimensionen und Ausschmückung auf, dennoch ist der Unterschied zu LoR groß, da wir uns bei diesem Spiel für eine skeuomorphe Herangehensweise entschieden haben.
Skeuomorphes Design wirkt irgendwie real. Wenn man an die ursprünglichen Smartphones denkt, dann war ihr App-Design wirklich realistisch. Die Notizzettel hatten tatsächlich die Textur von Papier und die Schriftart bei der Eingabe sah so aus, als wären die Notizen mit Kulis oder Bleistiften geschrieben worden. Das lag daran, dass die Leute noch kaum Erfahrung damit hatten, sich auf einem Touchscreen Notizen zu machen. Wir haben für LoR denselben Ansatz gewählt – um die Spieler in die Welt von Runeterra eintauchen zu lassen. Alles, womit du interagierst, soll sich wie ein reales Objekt anfühlen. Als es also darum ging, das visuelle Design von Seelenblumen umzusetzen, mussten wir es für LoR ein wenig anpassen. Das ist auf der gesamten Benutzeroberfläche zu sehen, das beste Beispiel dafür ist aber die Wolke.
Als Riot MrParkinson uns den visuellen Leitfaden gab, bemerkte ich, dass darin Wolken als Inspiration angeführt waren. Sie haben einen ostasiatischen Stil, der gut zu LoR passt. Außerdem haben sie viele Wirbel und sehen im Allgemeinen ziemlich weich aus. Dennoch musste ich den Wolken Texturen hinzufügen und sie metallischer gestalten, um sie an unseren Client anzupassen.
Als ich mit der Arbeit an der Wolke begann, öffnete ich Adobe Illustrator, kopierte die visuellen Referenzen von Riot MrParkinson hinein und begann mit dem Zeichnen. Ich wusste, dass sie metallischer und sperriger aussehen sollte, weshalb ich mich nicht am Referenzmaterial orientieren konnte, sondern sie selbst zeichnete.
Ich persönlich beginne immer mit Zeichnung in Illustrator, weil ich dadurch einen klaren Vektor erhalte. Dann kann ich die Linien bearbeiten, um sie dicker oder dünner zu machen. Anschließend importiere ich den Vektor als Form in Photoshop.
Sobald der Vektor in Photoshop ist, benutze ich unterschiedliche Stile wie „Abgeflachte Kante und Relief“, „Verlaufsüberlagerung“, „Malstriche“, „Schlagschatten nach innen/außen“ oder „Schein nach innen/außen“. Und wenn ich finde, wonach ich suche, wende ich diese Stile auf den Vektor der Wolke an.
Zum Schluss fügte ich der Stilebene noch einen Schlagschatten hinzu, weil sich die Wolke im Vordergrund befinden und so aussehen sollte, als würde sie über dem Hintergrund schweben.
Und dann beginne ich zu malen.
Ich habe kleine Details aus Licht und Schatten hinzugefügt. Und dann fügte ich ein paar dunkle Linien hinzu, um sicherzustellen, dass die Wolke nicht wie ein flaches Metallstück aussieht, das auf den Client gesetzt wurde.
Als ich zufrieden war, zeigte ich dem Team meine Arbeit. Und dann machte ich mit jedem anderen Asset für das Event das Gleiche. Es waren insgesamt 40. Es ist wichtig, dass jedes Asset so aussieht, als wäre es von Hand erstellt worden – weil sie auch von Hand erstellt werden!
Ich hoffe einfach, dass alle Spieler, die sich zuerst bei League und dann bei LoR anmelden (oder andersherum), sofort sehen, was wir erschaffen haben und dass es sich um dasselbe Event handelt. Denn das bedeutet, dass wir gute Arbeit geleistet und den Spielern beider Spiele eine interessante und zusammenhängende Erfahrung geboten haben.
