DevBlog: Das User Interface Team und ein tiefer Einblick ins visuelle Design

Anno 117: Pax Romana ist ein Spiel mit zahlreichen miteinander verbundenen Spielsystemen, die seine Welt zum Leben erwecken. All dies erfordert Benutzeroberflächen (engl.: User Interfaces), und unser User Interface Team (kurz: UI-Team) erkannte frühzeitig, dass die Bewältigung dieser Komplexität von Anfang an einen gut durchdachten Ansatz erfordern würde. Aus diesem Grund haben wir während der Entwicklung verschiedene Gruppen innerhalb unseres Teams gebildet. Jede Gruppe konzentrierte sich auf bestimmte Bereiche der Benutzeroberfläche, darunter das visuelle Design, das Interaktionsdesign, die technische Umsetzung und die Barrierefreiheit (engl.: Accessibility), um nur einige zu nennen. Dieser neue Ansatz half dabei, die Arbeit auf mehrere Schultern zu verteilen, und ermöglichte es den einzelnen Teammitgliedern, ihre individuellen Stärken einzubringen. Der neue Prozess trug wesentlich dazu bei, den Ambitionen des Spiels gerecht zu werden.

Wir wollten nicht nur sicherstellen, dass die Benutzeroberfläche mit den Anforderungen des Projekts mitwachsen konnte, sondern waren auch entschlossen, das Spiel vom ersten Tag an sowohl für PC als auch für Konsolen zu veröffentlichen, was an sich schon eine Herausforderung war. Um ein Erlebnis zu schaffen, das sich auf zwei sehr unterschiedlichen Eingabegeräten intuitiv und natürlich anfühlt, sind ein sorgfältiges Interaktionsdesign, klare UX-Richtlinien (UX = User Experience also Nutzererfahrung) und zahlreiche Iterationen erforderlich, damit das Erlebnis reibungslos und konsistent bleibt. In diesem Blog hier können wir auch dazu einige Erkenntnisse mit euch teilen.

Lernt das Team kennen!

Mein Name ist Alex Gibson und ich bin einer der beiden UI-Leads von Anno 117: Pax Romana. Das UI-Team ist deutlich größer als beim letzten Projekt und vereint eine Mischung aus Branchenveteranen und Neulingen – eine Kombination aus Erfahrung und frischen Perspektiven.

Ich möchte dem Team ganz herzlich für sein Engagement, seinen Einsatz und seine Ausdauer bei der Gestaltung der Benutzeroberfläche von Anno 117: Pax Romana danken. Seine harte Arbeit hat dazu beigetragen, dass die Benutzeroberfläche des Spiels sowohl funktional als auch ansprechend ist:

Jan Wawrzik (UI-Lead), Benjamin Clendon, Christoph Weber, Elisabetta Andreini, Eva Kaup, Hong Nhung Hoang, Khajag Jabaghchourian, Max Pellegrino, Nur Farah Ain Mahadon, Angus Jewkes, Carlos Cervantes und Bien Thuy Tran.

Ihre Leidenschaft und ihre gemeinsamen Anstrengungen haben die Benutzeroberfläche wirklich zum Leben erweckt und sorgen dafür, dass sie mit jedem Update weiter gestaltet und verbessert wird.

Ihr fragt euch vielleicht: Mit welchem Thema beginnen wir heute? Ich möchte mit der visuellen Ausrichtung beginnen und erklären, warum wir uns für diese Version entschieden haben. In diesem Abschnitt werden wir uns mit frühen Konzeptentwürfen befassen, wie unser Ansatz mit dem Gesamtbranding für Anno 117: Pax Romana übereinstimmt und welche Innovationen das UI-Team entwickelt hat, um die Benutzeroberfläche unverwechselbar und funktional zu gestalten und dabei gleichzeitig die verfügbare Entwicklungszeit im Blick zu behalten.

Visuelle Ideenfindung und Konzepte

Gehen wir drei Jahre zurück, als wir begannen, die Benutzeroberfläche zu konzipieren. Zu diesem Zeitpunkt war die künstlerische Ausrichtung (engl.: Art Direction) noch nicht festgelegt, sodass alle Möglichkeiten offen standen. Dies bot einigen Teammitgliedern die Gelegenheit, verschiedene Ideen für den visuellen Stil der Benutzeroberfläche des Spiels zu entwickeln. Damit legten sie den Grundstein für das spätere visuelle Team innerhalb des UI-Teams und schufen eine solide Grundlage für die Stile, die wir weiterverfolgen wollten.

Benjamin Clendon, Christoph Weber, Eva Kaup, Angus Jewkes und ich sind die Hauptverantwortlichen für die Gestaltung der ursprünglichen Vision und die Ausrichtung der gesamten visuellen Gestaltung der Benutzeroberfläche. In der kurzen Vorproduktionsphase haben wir eine Vielzahl unterschiedlicher visueller Stile untersucht und entworfen und schnell herausgefunden, was gut ankam und was nicht. Während des gesamten Prozesses haben wir eng mit dem Creative Director (Manuel Reinher) und Game Director (Jan Dungel) zusammengearbeitet, um sicherzustellen, dass sich die Benutzeroberfläche im Einklang mit ihrer Vision entwickelte, und um eine klare kreative Grundlage für den Rest der Oberfläche zu schaffen.

Ein Screenshot eines Miro Boards mit einigen frühen Ideen und Konzepten.

Nach monatelanger Überarbeitung und Verfeinerung kristallisierte sich das Wort „Eleganz” als einer der Grundpfeiler heraus, der unsere Designentscheidungen leitete. Ergänzende Begriffe wie „polished”, „delikat” und „veredelt” wurden ebenfalls zu zentralen Elementen der visuellen Ausrichtung. Das Ziel war es, eine Benutzeroberfläche zu schaffen, die authentisch und zeitgemäß wirkt und alles vermeidet, was in der Welt von Anno 117: Pax Romana alt, abgenutzt oder deplatziert wirkt.

Außerdem mussten wir technische Einschränkungen und allgemeine Projektanforderungen sorgfältig berücksichtigen. Dazu gehörten Überlegungen wie beispielsweise zur Texturauflösung zur Unterstützung der plattformübergreifenden Entwicklung, der Gewährleistung einer nahtlosen Kachelung der Texturen (d. h. Wiederholbarkeit ohne sichtbare „Naht“) und die Einhaltung von Barrierefreiheitsrichtlinien. Infolgedessen mussten während des gesamten Prozesses viele Faktoren sorgfältig abgewogen werden. Ein unterhaltsames und kompliziertes Puzzle, das immer eine Herausforderung darstellt!

Auswahl von Farben und Stilen

Wir haben uns frühzeitig für eine dunklere statt einer helleren Benutzeroberfläche entschieden. Diese Entscheidung beruhte zwar auf mehreren praktischen Überlegungen, aber der Hauptgrund war, dass ein dunklerer Stil besser zur Spielwelt passte.

Frühe visuelle Konzepte, in denen noch viele Mechaniken und Features fehlen.

Dadurch kann sich die Benutzeroberfläche eher wie ein integraler Bestandteil anstatt wie eine separates Overlay anfühlen, sodass sie das Spielerlebnis unterstützt, ohne den Spieler abzulenken oder aus dem Spiel zu reißen… Aber warum gerade Blau, fragt ihr euch vielleicht?

Das Römische Reich nutzte eine breite Palette von Farben, wobei einige aufgrund ihres Preises und ihrer Verfügbarkeit weitaus seltener waren als andere und oft bestimmten sozialen Schichten vorbehalten waren. Eine der prestigeträchtigsten Farben war Purpur, das stark mit Macht und Status assoziiert wurde. Aufgrund ihrer Seltenheit und ihres hohen Preises war diese Farbe weitgehend Politikern, hochrangigen Beamten und Kaisern vorbehalten und symbolisierte Autorität und imperiales Prestige.

Da Purpur als selten und mächtig empfunden werden sollte, haben wir es ausschließlich für bedeutende Momente innerhalb des Spielerlebnisses reserviert, insbesondere für den “ausgewählt”-Status für Schaltflächen. Dadurch wurde sichergestellt, dass die Farbe ihre Bedeutung und visuelle Wirkung behielt, was in unseren frühen und endgültigen Schaltflächenkonzepten unten zu sehen ist.

Frühe Konzepte für Schaltflächen, als wir verschiedene Stile und Farben ausprobiert haben.

Die finalen Hauptbutton Status und Stile.

In-engine Übersicht.

Blau, insbesondere ein dunkles Blau, erwies sich als die am besten geeignete und bevorzugte Grundfarbe für die Benutzeroberfläche. Die gewählten Farbtöne vermitteln Eleganz und Klarheit und bieten gleichzeitig einen starken Kontrast zu wichtigen Elementen wie Weiß, Grün, Rot und Gelb, wodurch sowohl die Lesbarkeit als auch die funktionale Klarheit der gesamten Benutzeroberfläche gewährleistet sind.

Um zu verhindern, dass die Benutzeroberfläche zu flach wirkt, haben wir eine dezente Stofftextur eingeführt. Diese sorgt für zusätzliche Tiefe, ohne das Design zu überladen, da der Hintergrund zurückhaltend bleiben musste, um eine Vielzahl von Inhalten zu unterstützen, die alle darauf platziert werden. Das Ziel war es, visuelle Vielfalt zu schaffen und gleichzeitig Klarheit und Flexibilität zu bewahren.

Wir haben verschiedene Farbtöne für die Stofftexture eingeführt, um ein stärkeres Gefühl von Hierarchie und Tiefe zu erzeugen.

Auf dieser Grundlage haben wir uns später entschlossen, eine zweite Textur in die Benutzeroberfläche einzufügen. Marmor, ein in der römischen Architektur häufig verwendetes Material, war eine naheliegende Wahl. Da Marmor in verschiedenen Farben und Maserungsintensitäten erhältlich ist, haben wir einen blau getönten Marmor als Basis gewählt, ergänzt durch purpurfarbene Maserungen, die auf die seltene und prestigeträchtige Farbe verweisen und die Textur wieder in die Bildsprache der Benutzeroberfläche einbinden.

Drei verschiedene Marmortexturen wurden erstellt, un verschiedene Auflösungen um Speichernutzung optimieren zu können.

Dekor, Details und Verfeinerung

Nachdem der Kern unserer UI-Style-Richtlinien feststand, stand uns der spaßige Teil bevor – das Feinschliff. Wir begannen damit, Muster zu verfeinern, visuelle Details anzupassen und Elemente einzufügen, die dazu beitrugen, dass sich die Benutzeroberfläche besser in die gewählte Zeitperiode einfügt.

Ein Schwerpunkt lag auf der Erstellung ikonischer Formen und ornamentaler Motive, die auf intelligente Weise wiederverwendet werden konnten. Wir haben sie modular aufgebaut, sodass Designer die Elemente mit wenigen Klicks kombinieren und zu einzigartigen Dekoren für verschiedene Features zusammenstellen konnten. So haben wir das Beste aus beiden Welten erhalten: eine Benutzeroberfläche, die insgesamt einheitlich wirkt, aber dennoch Raum für Individualität und Variationen lässt, wo es darauf ankommt.

Ein gutes Beispiel für unseren modularen Ansatz sind die Mosaikmuster, die ihr überall in der Benutzeroberfläche seht. Wir haben die Muster zunächst in einer klaren Vektorform entworfen und sie dann in Mosaikvarianten umgewandelt, die zur Ästhetik des Spiels passen. Da das System flexibel aufgebaut ist, konnten wir schnell einzigartige dekorative Elemente generieren, ohne jedes Mal von vorne anfangen zu müssen. Das Ergebnis? Eine starke visuelle Konsistenz über die gesamte Benutzeroberfläche hinweg und ein Produktionsprozess, der dem Team viel Zeit gespart hat.

Wie haben wir es geschafft, so viele Szenen zu erstellen und dabei den Zeitplan einzuhalten?

Als die UI-Grafiken in eine weitgehend finale Phase eintraten, begann das UI-Grafikteam mit der Erstellung von Bausteinen, die im gesamten Spiel konsistent verwendet werden konnten. Dieses Dokument war zwar keineswegs vollständig, da zahlreiche Mechaniken und Systeme maßgeschneiderte visuelle Lösungen erforderten, aber es lieferte eine grundlegende Farbpalette und Referenzmaterialien, auf die sich das UI-Team stützen konnte. Die folgenden Beispiele zeigen viele der visuellen Elemente, auf die Designer über die gemeinsam genutzte Adobe Creative Cloud zugreifen konnten.

Ein Beispiel einer einer Reihe von separaten Elementen, die für das Team via Adobe Creative Cloud verfügbar waren.

Wir haben Asset-Listen mit allen Schaltflächen-Status, Texturen, Dekorationen, generischen Assets und Grundformen geführt, um dem Team gebrauchsfertige Bausteine zur Optimierung des visuellen Feature-Designs zur Verfügung zu stellen. Diese Listen umfassten zwar wiederverwendbare Elemente, dennoch mussten viele einzigartige Assets erstellt werden – eine Aufgabe, die das visuelle Team während der gesamten Entwicklung aktiv unterstützt hat.

Wie konstruieren wir also Elemente?

Im Laufe des Projekts wurde die Erstellung neuer Elemente immer effizienter, da immer mehr Referenzen und Vorlagen zur Verfügung standen. Unterhalb findet ihr eine kurze Übersicht über den Prozess, der zeigt, wie ein Element generiert und für die Implementierung in die Engine vorbereitet wird.

Ein Beispiel, wie das UI in einzelne Elemente hinuntergebrochen wird, bzw. werden kann.

Fazit

Dies ist zwar nur ein kleiner Einblick in die Entwicklung des visuellen Stils der Benutzeroberfläche, aber ich hoffe, dass es euch einen Eindruck davon vermittelt, warum wir uns für die heutige Ausrichtung entschieden haben. Wir verfeinern und verbessern den Stil mit jedem größeren Update weiter (inklusive des kommenden Updates 1.5), um sicherzustellen, dass er sowohl visuell einheitlich bleibt als auch den Anforderungen des Spiels gerecht wird.