Für jeden der bereits veröffentlichten Anno-Titel produzierte das Studio hunderte von Icons – mehr als man auf den ersten Blick erwarten würde! Die Icon-Artists erstellten für Anno 117 die unglaubliche Anzahl von 1700 Icons (die ungenutzten Icon-Entwürfe hier nicht mitgerechnet). Am häufigsten benutzen wir zwei Gruppen von Icons: 2D- & 3D-Icons.

2D-Icons sind gestaltet, um auch in kleinster Größe zu wirken und klar unterscheidbar zu sein. Man findet sie an den verschiedensten Orten im Spiel wie den Infotipps, zur Ergänzung von Beschreibungen und Werten.

Im Gegensatz dazu sind unsere 3D-Icons kleine Gemälde von realen Objekten. Dieser Icon-Stil wird auch als Skeumorphismus bezeichnet. Wir verwenden diesen Stil zum Beispiel für Questgegenstände, Spezialisten, Schiffe, Gebäude (im Baumenü) und unsere Ressourcen.

2D-Icons (Glyphen)

• Glyphen sind vereinfachte, stilisierte und einfarbige Darstellungen.
• Vorteile dieses Icon-Typs:
  • Kann genutzt werden wenn wir sehr wenig Platz haben und das Icon klein angezeigt werden muss
  • Kann abstrakte Konzepte darstellen, z.B. „Schließen“, oder Kategorien wie „Schiffe“
• Nachteil:
  • Sehr ähnliche Objekte wie z.B. unsere zahlreichen Schiffstypen lassen sich schwer unterscheiden.
  • Emotional weniger ansprechend als ein detailreiches Bild

Skeuomorphische Icons sind detailreiche und möglichst naturgetreue Wiedergaben von einem Objekt.

• Vorteile dieses Icon-Typs:
  • Details und Farbe helfen dabei komplexere Objekte besser unterscheiden zu können wie z.B. die verschiedenen Schiffstypen
  • Durch Farbe und Material kann gut die Wertigkeit von Objekten kommuniziert werden.
• Nachteil:
  • Die vielen Details wirken am besten, wenn das Icon viel Platz hat. Wenn es klein skaliert wird, kann es durch die Menge an Details sogar unleserlich werden.
  • Die skeuomorphische Darstellung eignet sich am besten für reale Objekte im Gegensatz zu abstrakten Konzepten.

Planung und Ideenfindung

In unserem Team obliegt das Planen der Icons dem User-Interface-Team. Das heißt das UI-Team plant welche Icons gebraucht werden, welche von uns intern designt und welche outgesourct werden. Unser langjähriger Freelance-Kollege Sebastian Erb ist ein Meister seines Fachs und bereits seit Anno 2205 an Bord.

2D-Icons – Glyphen

Glyphen werden von uns vor allem für Kategorien und zur Visualisierung von abstrakten Konzepten verwendet. Für die Metapher verwenden wir echte Objekte oder bekannte Muster wie die altbewährte „Diskette“ als Symbol für Speichern oder „X“ für Schließen.

Piktogramm

Das Icon ähnelt oder referenziert ein reales Objekt.

Ideogramm

Das Icon besteht aus einer einfachen Form. Von der Form kann nicht auf einen Nutzen geschlossen werden. Der Sinn des Icons muss erlernt werden.

Mix von Piktogramm und Ideogramm

Häufig wird eine Kombination aus Piktogramm und Ideogramm verwendet um eine komplexe Idee zu vermitteln.

Ein 2D-Icon mag einfach erscheinen, aber trotzdem kann in es jede Menge Arbeit und Diskurs fließen bis es fertig ist: Sollte unser Icon für Speichern eine „Diskette“ sein, weil das leicht verständlich ist oder sollten wir uns etwas „Römischeres“ überlegen? Wie viel Detail wollen wir zeigen?

Während der Entwicklung designen wir eine Reihe von Vorschlägen für jedes Icon. Die Entscheidung, welchen wir übernehmen, wird zwischen UI-Designern und Game-Designern diskutiert, um das am besten passende, aber auch verständlichste Icon zu finden.

Da unsere 2D-Icons in der Regel klein dargestellt werden, halten wir die Menge an Details möglichst gering. Wir müssen sicherstellen, dass die Icons sich deutlich voneinander unterscheiden und nutzen vereinzelt römische Elemente. Mehr römische Design-Elemente haben wir für die größeren gemalten 3D-Icons verwendet, wo sie durch die größere Darstellung deutlicher erkennbar sind.

Für das Design der “Pfeile” haben wir uns entschieden das „A“ des Anno-Logos zu referenzieren. Das Icon links findet ihr im Spiel.

3D-Icons

Große detailreiche 3D-Icons geben uns viel Gestaltungfreiheit und Raum für das Erzählen einer Geschichte. Damit die Icons trotz der vielen unterschiedlichen Objekte vom Affen zum Zaunpfahl visuell stimmig erscheinen, achten wir auf konsistente Beleuchtung, Größe und Detailgrad.

Obwohl hier ausschließlich Schriftrollen gemalt wurden, wurde durch Arrangement, Form sowie Perspektivwechsel eine Reihe von Icons geschaffen, die sich schon auf den ersten Blick unterscheiden.

Wertigkeit und Seltenheit der Objekte wird durch die Auswahl von Materialien (von matt zu glänzend und von Papier zu Gold) und durch ein Intensiverwerden der Farben unterstrichen.

Produktionsketten und Gebäude

Da sich bei Anno im Kern alles um Produktionsketten dreht haben diese Icons für uns eine besonders hohe Priorität. Als Spieler interagiert man konstant mit den Waren und muss sie mit Leichtigkeit wiedererkennen und von anderen Produktionsketten unterscheiden können. Klarheit, Lesbarkeit und Ästhetik sind hier essenziell. Das führt dazu, das es einige Iterationen dauern kann bis jedes Icon unseren Ansprüchen genügt.

Schiffe

Ein weiteres Standbein eines jeden Anno-Spiels stellt das Erforschen und Handeln mit der ganzen Spielwelt dar. Eine Vielzahl von Schiffen steht dabei zur Verfügung, um die Weltmeere zu überqueren. Alle Schiffe werden zunächst vom Art Department designt und im Laufe der Entwicklung des Spiels immer wieder überarbeitet. Sobald wir wissen, dass es keine großen Änderungen am Design mehr geben wird, geben wir Bilder der Schiffe und an unseren Icon-Freelancer Sebastian weiter. Auf dieser Basis malt er wunderschöne 3D-Icons. Da die Icons auch recht klein angezeigt werden sind sie nicht 1:1-Kopien. Die herausragenden Details der Schiffe wie Rumpf, Geschütztürme oder Ruder werden hervorgehoben. Kleine Details wie Seile werden vergrößert und zusammengefasst, um deutlich erkennbar zu bleiben.

Spezialisten

Die Spezialisten, die die Villa bewohnen sind sehr unterschiedlich. Sie repräsentieren jeden Teil des weiten römischen Imperiums: von den Kelten zu den Ägyptern, die Diversität des Imperiums wird durch die Gesichter und Kleidung widergespiegelt. Da es nicht einfach ist, Informationen zum Kleidungsstil der Antike zu finden, greifen wir z.B. auf Fresken zurück, um uns inspirieren zu lassen. Von dem Narrativ-Team erhalten wir vorab eine Liste mit Namen, Herkunft, Geschlecht und manchmal auch eine Charakterisierung. Jeder einzelne Spezialist soll im Spiel durch sein Design eine Geschichte erzählen und zur lebendigen Welt von Anno 117 beitragen.

Für diesen Spezialisten haben wir uns von dem Fresko “Mycenaean Lady” inspirieren lassen.

Kleid und Haare dieser minoischen Frau wurden basieren auf dem Fresko „Dancing Lady“. Das Fresko wurde bei der Ausgrabung Heraklions freigelegt.

Zum Release hatten wir 400 Spezialisten zu gestalten. Diese alle einzeln zu malen wäre sehr viel Arbeit geworden, welche wir im Rahmen der Produktion für andere Icons brauchten. Deswegen hat Sebastian Erb wie bereits für Anno 1800 ein System mit austauschbaren Gesichtsmerkmalen, Kleidung und Accessoires geschaffen.

Wie bei dem Kinderspielzeug „Mr. Potato Head“ (einem Kartoffelkopf mit austauschbaren Gesichtsteilen auch bekannt aus dem Film Toy Story), können wir auf dieser Basis eine Vielzahl von Variationen erschaffen. Uns steht ein breites Repertoire an Augen, Bärten, Frisuren, Nasen, Mündern, Ohren und Narben für verschieden Hautfarben und Körperformen zur Verfügung sowie Kleidung, Rüstungen, Schmuck und Props, um eine Vielzahl unverwechselbarer Charaktere zu erschaffen.

Nachdem wir die “Grundelemente” für diesen alten Kelten zusammengesetzt hatten, haben wir die Illustration der Figuren mit kleinen Details wie Lichtanpassungen, Altersflecken und Körperbehaarung abgerundet.

Hier ist eine kleine Auswahl aus unserer Garderobe. Sie deckt die Bedürfnisse aller Einwohner ab, vom reichen Patrizier zum wattwandernden Kelten findet hier jeder etwas das zu ihm passt. Mit Details wie Flecken und Farbänderung erzeugen wir noch mehr Variation und Persönlichkeit.

Hier eine kleine Auswahl aus unserer Gesichtsmerkmalpalette: Ob verschmitztes Lächeln, angewidertes Lippenverziehen oder zufriedenes Grinsen, es stehen zahlreiche Gesichtsausdrücke zur Verfügung.

Spezielle Icons

Wer Anno sehr aufmerksam spielt wird dabei auf das eine oder andere „Easter Egg“ stoßen. Hier ist eines unserer „besonderen“ Icons. Viel Spaß bei der Suchen nach weiteren Überraschungen!

Dieses Icon ist unser Anno 117-Schaf, das am Gamecom-Stand 2025 Fans und Entwicklungsteam gleichermaßen begeistert hat. Im Spiel taucht Gaius Schafus III als “Easter Egg” auf.

Vielen Dank, dass ihr diesen Artikel gelesen habt! Unser Icon-Team besteht aus Farah Ain Mahadon, Benjamin Clendon & Eva Kaup. Unser Freelance-Icon-Experte, der die meisten Icons auf dieser Seite gemalt hat, ist Sebastian Erb (https://sebastian-erb.de/)

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.