{"id":22665,"date":"2026-03-17T17:06:39","date_gmt":"2026-03-17T16:06:39","guid":{"rendered":"https:\/\/www.anno-union.com\/?p=22665"},"modified":"2026-03-17T17:26:01","modified_gmt":"2026-03-17T16:26:01","slug":"devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design","status":"publish","type":"post","link":"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/","title":{"rendered":"DevBlog: Das User Interface Team und ein tiefer Einblick ins visuelle Design"},"content":{"rendered":"

[vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]Anno 117: Pax Romana<\/em> ist ein Spiel mit zahlreichen miteinander verbundenen Spielsystemen, die seine Welt zum Leben erwecken. All dies erfordert Benutzeroberfl\u00e4chen (engl.: User Interfaces), und unser User Interface Team (kurz: UI-Team) erkannte fr\u00fchzeitig, dass die Bew\u00e4ltigung dieser Komplexit\u00e4t von Anfang an einen gut durchdachten Ansatz erfordern w\u00fcrde. Aus diesem Grund haben wir w\u00e4hrend der Entwicklung verschiedene Gruppen innerhalb unseres Teams gebildet.<\/strong> Jede Gruppe konzentrierte sich auf bestimmte Bereiche der Benutzeroberfl\u00e4che, 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\u00f6glichte es den einzelnen Teammitgliedern, ihre individuellen St\u00e4rken einzubringen. Der neue Prozess trug wesentlich dazu bei, den Ambitionen des Spiels gerecht zu werden.<\/p>\n

Wir wollten nicht nur sicherstellen, dass die Benutzeroberfl\u00e4che mit den Anforderungen des Projekts mitwachsen konnte, sondern waren auch entschlossen, das Spiel vom ersten Tag an sowohl f\u00fcr PC als auch f\u00fcr Konsolen zu ver\u00f6ffentlichen, was an sich schon eine Herausforderung war. Um ein Erlebnis zu schaffen, das sich auf zwei sehr unterschiedlichen Eingabeger\u00e4ten intuitiv und nat\u00fcrlich anf\u00fchlt, sind ein sorgf\u00e4ltiges Interaktionsdesign, klare UX-Richtlinien (UX = User Experience also Nutzererfahrung) und zahlreiche Iterationen<\/strong> erforderlich, damit das Erlebnis reibungslos und konsistent bleibt. In diesem Blog hier k\u00f6nnen wir auch dazu einige Erkenntnisse mit euch teilen.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]<\/p>\n

Lernt das Team kennen!<\/h2>\n

Mein Name ist Alex Gibson und ich bin einer der beiden UI-Leads von Anno 117: Pax Romana<\/em>. Das UI-Team ist deutlich gr\u00f6\u00dfer als beim letzten Projekt und vereint eine Mischung aus Branchenveteranen und Neulingen \u2013 eine Kombination aus Erfahrung und frischen Perspektiven.<\/strong><\/p>\n

Ich m\u00f6chte dem Team ganz herzlich f\u00fcr sein Engagement, seinen Einsatz und seine Ausdauer bei der Gestaltung der Benutzeroberfl\u00e4che von Anno 117: Pax Romana<\/em> danken. Seine harte Arbeit hat dazu beigetragen, dass die Benutzeroberfl\u00e4che des Spiels sowohl funktional als auch ansprechend ist:<\/p>\n

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.<\/p>\n

Ihre Leidenschaft und ihre gemeinsamen Anstrengungen haben die Benutzeroberfl\u00e4che wirklich zum Leben erweckt und sorgen daf\u00fcr, dass sie mit jedem Update weiter gestaltet und verbessert wird.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]Ihr fragt euch vielleicht: Mit welchem Thema beginnen wir heute? Ich m\u00f6chte mit der visuellen Ausrichtung beginnen und erkl\u00e4ren, warum wir uns f\u00fcr diese Version entschieden haben.<\/strong> In diesem Abschnitt werden wir uns mit fr\u00fchen Konzeptentw\u00fcrfen befassen, wie unser Ansatz mit dem Gesamtbranding f\u00fcr Anno 117: Pax Romana<\/em> \u00fcbereinstimmt und welche Innovationen das UI-Team entwickelt hat, um die Benutzeroberfl\u00e4che unverwechselbar und funktional zu gestalten und dabei gleichzeitig die verf\u00fcgbare Entwicklungszeit im Blick zu behalten.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]<\/p>\n

Visuelle Ideenfindung und Konzepte<\/h2>\n

Gehen wir drei Jahre zur\u00fcck, als wir begannen, die Benutzeroberfl\u00e4che zu konzipieren. Zu diesem Zeitpunkt war die k\u00fcnstlerische Ausrichtung (engl.: Art Direction) noch nicht festgelegt, sodass alle M\u00f6glichkeiten offen standen. Dies bot einigen Teammitgliedern die Gelegenheit, verschiedene Ideen f\u00fcr den visuellen Stil der Benutzeroberfl\u00e4che des Spiels zu entwickeln<\/strong>. Damit legten sie den Grundstein f\u00fcr das sp\u00e4tere visuelle Team innerhalb des UI-Teams und schufen eine solide Grundlage f\u00fcr die Stile, die wir weiterverfolgen wollten.<\/p>\n

Benjamin Clendon, Christoph Weber, Eva Kaup, Angus Jewkes und ich sind die Hauptverantwortlichen f\u00fcr die Gestaltung der urspr\u00fcnglichen Vision und die Ausrichtung der gesamten visuellen Gestaltung der Benutzeroberfl\u00e4che. In der kurzen Vorproduktionsphase haben wir eine Vielzahl unterschiedlicher visueller Stile untersucht und entworfen und schnell herausgefunden, was gut ankam und was nicht. W\u00e4hrend des gesamten Prozesses haben wir eng mit dem Creative Director (Manuel Reinher) und Game Director (Jan Dungel) zusammengearbeitet, um sicherzustellen, dass sich die Benutzeroberfl\u00e4che im Einklang mit ihrer Vision entwickelte, und um eine klare kreative Grundlage f\u00fcr den Rest der Oberfl\u00e4che zu schaffen.<\/strong>[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]<\/p>\n

\"\"<\/a>Ein Screenshot eines Miro Boards mit einigen fr\u00fchen Ideen und Konzepten.<\/em><\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]Nach monatelanger \u00dcberarbeitung und Verfeinerung kristallisierte sich das Wort \u201eEleganz<\/strong>\u201d als einer der Grundpfeiler heraus, der unsere Designentscheidungen leitete. Erg\u00e4nzende Begriffe wie \u201epolished<\/strong>\u201d, \u201edelikat<\/strong>\u201d und \u201everedelt<\/strong>\u201d wurden ebenfalls zu zentralen Elementen der visuellen Ausrichtung. Das Ziel war es, eine Benutzeroberfl\u00e4che zu schaffen, die authentisch und zeitgem\u00e4\u00df wirkt und alles vermeidet, was in der Welt von Anno 117: Pax Romana<\/em> alt, abgenutzt oder deplatziert wirkt.<\/p>\n

Au\u00dferdem mussten wir technische Einschr\u00e4nkungen und allgemeine Projektanforderungen sorgf\u00e4ltig ber\u00fccksichtigen. Dazu geh\u00f6rten \u00dcberlegungen wie beispielsweise zur Texturaufl\u00f6sung zur Unterst\u00fctzung der plattform\u00fcbergreifenden Entwicklung, der Gew\u00e4hrleistung einer nahtlosen Kachelung der Texturen <\/strong>(d. h. Wiederholbarkeit ohne sichtbare \u201eNaht\u201c) und die Einhaltung von Barrierefreiheitsrichtlinien<\/strong>. Infolgedessen mussten w\u00e4hrend des gesamten Prozesses viele Faktoren sorgf\u00e4ltig abgewogen werden. Ein unterhaltsames und kompliziertes Puzzle, das immer eine Herausforderung darstellt![\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]<\/p>\n

Auswahl von Farben und Stilen<\/h2>\n

Wir haben uns fr\u00fchzeitig f\u00fcr eine dunklere statt einer helleren Benutzeroberfl\u00e4che entschieden. Diese Entscheidung beruhte zwar auf mehreren praktischen \u00dcberlegungen, aber der Hauptgrund war, dass ein dunklerer Stil besser zur Spielwelt passte.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/2″][vc_column_text css=””]\"\"<\/a>[\/vc_column_text][\/vc_column][vc_column width=”1\/2″][vc_column_text css=””]\"\"<\/a>[\/vc_column_text][\/vc_column][vc_column][vc_column_text css=””]<\/p>\n

Fr\u00fche visuelle Konzepte, in denen noch viele Mechaniken und Features fehlen.<\/em><\/p>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]Dadurch kann sich die Benutzeroberfl\u00e4che eher wie ein integraler Bestandteil anstatt wie eine separates Overlay anf\u00fchlen, sodass sie das Spielerlebnis unterst\u00fctzt, ohne den Spieler abzulenken oder aus dem Spiel zu rei\u00dfen… Aber warum gerade Blau, fragt ihr euch vielleicht?<\/strong><\/p>\n

Das R\u00f6mische Reich nutzte eine breite Palette von Farben, wobei einige aufgrund ihres Preises und ihrer Verf\u00fcgbarkeit weitaus seltener waren als andere und oft bestimmten sozialen Schichten vorbehalten waren. Eine der prestigetr\u00e4chtigsten Farben war Purpur<\/strong>, 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\u00e4t und imperiales Prestige.<\/p>\n

Da Purpur als selten und m\u00e4chtig empfunden werden sollte, haben wir es ausschlie\u00dflich f\u00fcr bedeutende Momente innerhalb des Spielerlebnisses reserviert<\/strong>, insbesondere f\u00fcr den “ausgew\u00e4hlt”-Status f\u00fcr Schaltfl\u00e4chen. Dadurch wurde sichergestellt, dass die Farbe ihre Bedeutung und visuelle Wirkung behielt, was in unseren fr\u00fchen und endg\u00fcltigen Schaltfl\u00e4chenkonzepten unten zu sehen ist.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]\"\"<\/a><\/em><\/p>\n

\"\"<\/a><\/em><\/p>\n

Fr\u00fche Konzepte f\u00fcr Schaltfl\u00e4chen, als wir verschiedene Stile und Farben ausprobiert haben.<\/em><\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]\"\"<\/a><\/em><\/p>\n

Die finalen Hauptbutton Status und Stile.<\/em><\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]\"\"<\/a><\/em><\/p>\n

In-engine \u00dcbersicht.<\/em><\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]Blau, insbesondere ein dunkles Blau, erwies sich als die am besten geeignete und bevorzugte Grundfarbe f\u00fcr die Benutzeroberfl\u00e4che. Die gew\u00e4hlten Farbt\u00f6ne vermitteln Eleganz und Klarheit und bieten gleichzeitig einen starken Kontrast zu wichtigen Elementen wie Wei\u00df, Gr\u00fcn, Rot und Gelb, wodurch sowohl die Lesbarkeit als auch die funktionale Klarheit der gesamten Benutzeroberfl\u00e4che gew\u00e4hrleistet sind.<\/strong><\/p>\n

Um zu verhindern, dass die Benutzeroberfl\u00e4che zu flach wirkt, haben wir eine dezente Stofftextur eingef\u00fchrt. Diese sorgt f\u00fcr zus\u00e4tzliche Tiefe, ohne das Design zu \u00fcberladen, da der Hintergrund zur\u00fcckhaltend bleiben musste, um eine Vielzahl von Inhalten zu unterst\u00fctzen, die alle darauf platziert werden. Das Ziel war es, visuelle Vielfalt zu schaffen und gleichzeitig Klarheit und Flexibilit\u00e4t zu bewahren.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]\"\"<\/a><\/em><\/p>\n

Wir haben verschiedene Farbt\u00f6ne f\u00fcr die Stofftexture eingef\u00fchrt, um ein st\u00e4rkeres Gef\u00fchl von Hierarchie und Tiefe zu erzeugen.<\/em><\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]Auf dieser Grundlage haben wir uns sp\u00e4ter entschlossen, eine zweite Textur in die Benutzeroberfl\u00e4che einzuf\u00fcgen. Marmor, ein in der r\u00f6mischen Architektur h\u00e4ufig verwendetes Material, war eine naheliegende Wahl<\/strong>. Da Marmor in verschiedenen Farben und Maserungsintensit\u00e4ten erh\u00e4ltlich ist, haben wir einen blau get\u00f6nten Marmor als Basis gew\u00e4hlt, erg\u00e4nzt durch purpurfarbene Maserungen, die auf die seltene und prestigetr\u00e4chtige Farbe verweisen und die Textur wieder in die Bildsprache der Benutzeroberfl\u00e4che einbinden.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]\"\"<\/a><\/em><\/p>\n

Drei verschiedene Marmortexturen wurden erstellt, un verschiedene Aufl\u00f6sungen um Speichernutzung optimieren zu k\u00f6nnen.<\/em><\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]<\/p>\n

Dekor, Details und Verfeinerung<\/h2>\n

Nachdem der Kern unserer UI-Style-Richtlinien feststand, stand uns der spa\u00dfige Teil bevor \u2013 das Feinschliff. Wir begannen damit, Muster zu verfeinern, visuelle Details anzupassen und Elemente einzuf\u00fcgen, die dazu beitrugen, dass sich die Benutzeroberfl\u00e4che besser in die gew\u00e4hlte Zeitperiode einf\u00fcgt.<\/p>\n

Ein Schwerpunkt lag auf der Erstellung ikonischer Formen und ornamentaler Motive<\/strong>, 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\u00fcr verschiedene Features zusammenstellen konnten. So haben wir das Beste aus beiden Welten erhalten: eine Benutzeroberfl\u00e4che, die insgesamt einheitlich wirkt, aber dennoch Raum f\u00fcr Individualit\u00e4t und Variationen l\u00e4sst<\/strong>, wo es darauf ankommt.<\/p>\n

Ein gutes Beispiel f\u00fcr unseren modularen Ansatz sind die Mosaikmuster, die ihr \u00fcberall in der Benutzeroberfl\u00e4che seht. Wir haben die Muster zun\u00e4chst in einer klaren Vektorform entworfen und sie dann in Mosaikvarianten umgewandelt, die zur \u00c4sthetik des Spiels passen. Da das System flexibel aufgebaut ist, konnten wir schnell einzigartige dekorative Elemente generieren, ohne jedes Mal von vorne anfangen zu m\u00fcssen. Das Ergebnis? Eine starke visuelle Konsistenz \u00fcber die gesamte Benutzeroberfl\u00e4che hinweg und ein Produktionsprozess, der dem Team viel Zeit gespart hat.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]\"\"<\/a>[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]<\/p>\n

Wie haben wir es geschafft, so viele Szenen zu erstellen und dabei den Zeitplan einzuhalten?<\/h2>\n

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<\/strong>. Dieses Dokument war zwar keineswegs vollst\u00e4ndig, da zahlreiche Mechaniken und Systeme ma\u00dfgeschneiderte visuelle L\u00f6sungen erforderten, aber es lieferte eine grundlegende Farbpalette und Referenzmaterialien, auf die sich das UI-Team st\u00fctzen konnte. Die folgenden Beispiele zeigen viele der visuellen Elemente, auf die Designer \u00fcber die gemeinsam genutzte Adobe Creative Cloud zugreifen konnten.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]\"\"<\/a><\/em><\/p>\n

Ein Beispiel einer einer Reihe von separaten Elementen, die f\u00fcr das Team via Adobe Creative Cloud verf\u00fcgbar waren.<\/em><\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]Wir haben Asset-Listen mit allen Schaltfl\u00e4chen-Status, Texturen, Dekorationen, generischen Assets und Grundformen gef\u00fchrt, um dem Team gebrauchsfertige Bausteine zur Optimierung des visuellen Feature-Designs zur Verf\u00fcgung zu stellen. Diese Listen umfassten zwar wiederverwendbare Elemente, dennoch mussten viele einzigartige Assets erstellt werden \u2013 eine Aufgabe, die das visuelle Team w\u00e4hrend der gesamten Entwicklung aktiv unterst\u00fctzt hat.<\/p>\n

 <\/p>\n

Wie konstruieren wir also Elemente?<\/h2>\n

Im Laufe des Projekts wurde die Erstellung neuer Elemente immer effizienter, da immer mehr Referenzen und Vorlagen zur Verf\u00fcgung standen. Unterhalb findet ihr eine kurze \u00dcbersicht \u00fcber den Prozess, der zeigt, wie ein Element generiert und f\u00fcr die Implementierung in die Engine vorbereitet wird.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]\"\"<\/a><\/p>\n

Ein Beispiel, wie das UI in einzelne Elemente hinuntergebrochen wird, bzw. werden kann.<\/em><\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text css=””]<\/p>\n

Fazit<\/h2>\n

Dies ist zwar nur ein kleiner Einblick in die Entwicklung des visuellen Stils der Benutzeroberfl\u00e4che, aber ich hoffe, dass es euch einen Eindruck davon vermittelt, warum wir uns f\u00fcr die heutige Ausrichtung entschieden haben. Wir verfeinern und verbessern den Stil mit jedem gr\u00f6\u00dferen Update weiter (inklusive des kommenden Updates 1.5), um sicherzustellen, dass er sowohl visuell einheitlich bleibt als auch den Anforderungen des Spiels gerecht wird.[\/vc_column_text][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Wer ist Teil des UI-Teams and wie haben sie den visuellen Style des UIs entwickelt? Das erfahrt ihr im heutigen Blog.<\/p>\n","protected":false},"author":34684,"featured_media":22717,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5872,2341],"tags":[5871,94],"acf":[],"yoast_head":"\nDevBlog: Das User Interface Team und ein tiefer Einblick ins visuelle Design - Anno Union<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DevBlog: Das User Interface Team und ein tiefer Einblick ins visuelle Design\" \/>\n<meta property=\"og:description\" content=\"Wer ist Teil des UI-Teams and wie haben sie den visuellen Style des UIs entwickelt? Das erfahrt ihr im heutigen Blog.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Anno Union\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-17T16:06:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-17T16:26:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anno-union.com\/wp\/wp-content\/uploads\/2026\/03\/Artboard-1-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"520\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ubi-Thorlof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ubi-Thorlof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/\",\"url\":\"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/\",\"name\":\"DevBlog: Das User Interface Team und ein tiefer Einblick ins visuelle Design - Anno Union\",\"isPartOf\":{\"@id\":\"https:\/\/www.anno-union.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anno-union.com\/wp\/wp-content\/uploads\/2026\/03\/Artboard-1-1.jpg\",\"datePublished\":\"2026-03-17T16:06:39+00:00\",\"dateModified\":\"2026-03-17T16:26:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.anno-union.com\/#\/schema\/person\/02731b2f57d0c6b570090be573f5d27b\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/#primaryimage\",\"url\":\"https:\/\/www.anno-union.com\/wp\/wp-content\/uploads\/2026\/03\/Artboard-1-1.jpg\",\"contentUrl\":\"https:\/\/www.anno-union.com\/wp\/wp-content\/uploads\/2026\/03\/Artboard-1-1.jpg\",\"width\":1440,\"height\":520},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/www.anno-union.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DevBlog: Das User Interface Team und ein tiefer Einblick ins visuelle Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anno-union.com\/#website\",\"url\":\"https:\/\/www.anno-union.com\/\",\"name\":\"Anno Union\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anno-union.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anno-union.com\/#\/schema\/person\/02731b2f57d0c6b570090be573f5d27b\",\"name\":\"Ubi-Thorlof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/www.anno-union.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9fe8b0a94270ac45ef7398bfae7b1558?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9fe8b0a94270ac45ef7398bfae7b1558?s=96&d=blank&r=g\",\"caption\":\"Ubi-Thorlof\"},\"description\":\"8d630372-d167-4e4a-8961-0226c7ceeddc\",\"url\":\"https:\/\/www.anno-union.com\/de\/author\/ubi-thorlof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"DevBlog: Das User Interface Team und ein tiefer Einblick ins visuelle Design - Anno Union","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/","og_locale":"de_DE","og_type":"article","og_title":"DevBlog: Das User Interface Team und ein tiefer Einblick ins visuelle Design","og_description":"Wer ist Teil des UI-Teams and wie haben sie den visuellen Style des UIs entwickelt? Das erfahrt ihr im heutigen Blog.","og_url":"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/","og_site_name":"Anno Union","article_published_time":"2026-03-17T16:06:39+00:00","article_modified_time":"2026-03-17T16:26:01+00:00","og_image":[{"width":1440,"height":520,"url":"https:\/\/www.anno-union.com\/wp\/wp-content\/uploads\/2026\/03\/Artboard-1-1.jpg","type":"image\/jpeg"}],"author":"Ubi-Thorlof","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ubi-Thorlof","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/","url":"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/","name":"DevBlog: Das User Interface Team und ein tiefer Einblick ins visuelle Design - Anno Union","isPartOf":{"@id":"https:\/\/www.anno-union.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/#primaryimage"},"image":{"@id":"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anno-union.com\/wp\/wp-content\/uploads\/2026\/03\/Artboard-1-1.jpg","datePublished":"2026-03-17T16:06:39+00:00","dateModified":"2026-03-17T16:26:01+00:00","author":{"@id":"https:\/\/www.anno-union.com\/#\/schema\/person\/02731b2f57d0c6b570090be573f5d27b"},"breadcrumb":{"@id":"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/#primaryimage","url":"https:\/\/www.anno-union.com\/wp\/wp-content\/uploads\/2026\/03\/Artboard-1-1.jpg","contentUrl":"https:\/\/www.anno-union.com\/wp\/wp-content\/uploads\/2026\/03\/Artboard-1-1.jpg","width":1440,"height":520},{"@type":"BreadcrumbList","@id":"https:\/\/www.anno-union.com\/de\/devblog-das-user-interface-team-und-ein-tiefer-einblick-ins-visuelle-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.anno-union.com\/de\/"},{"@type":"ListItem","position":2,"name":"DevBlog: Das User Interface Team und ein tiefer Einblick ins visuelle Design"}]},{"@type":"WebSite","@id":"https:\/\/www.anno-union.com\/#website","url":"https:\/\/www.anno-union.com\/","name":"Anno Union","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anno-union.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/www.anno-union.com\/#\/schema\/person\/02731b2f57d0c6b570090be573f5d27b","name":"Ubi-Thorlof","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/www.anno-union.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9fe8b0a94270ac45ef7398bfae7b1558?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9fe8b0a94270ac45ef7398bfae7b1558?s=96&d=blank&r=g","caption":"Ubi-Thorlof"},"description":"8d630372-d167-4e4a-8961-0226c7ceeddc","url":"https:\/\/www.anno-union.com\/de\/author\/ubi-thorlof\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/posts\/22665"}],"collection":[{"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/users\/34684"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/comments?post=22665"}],"version-history":[{"count":12,"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/posts\/22665\/revisions"}],"predecessor-version":[{"id":22727,"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/posts\/22665\/revisions\/22727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/media\/22717"}],"wp:attachment":[{"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/media?parent=22665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/categories?post=22665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anno-union.com\/de\/wp-json\/wp\/v2\/tags?post=22665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}