DevBlog: The User Interface Team and a deeper dive into the visuals

Anno 117: Pax Romana is a game packed with numerous interconnected game systems that bring its world to life. All these require interfaces of some sort, and early on our User Interface Team (short: UI Team) realized that managing this complexity would require a smart approach from the start. For this reason, we formed different groups (“sub-teams”) during development. Each group focused on specific areas of the UI, the visual design, interaction design, technical implementation, and accessibility to name a few. This new approach helped to spread the work across several shoulders and allowed the team members to play to their unique strengths. The new process greatly helped to match the game’s growing ambitions.

Beyond ensuring the UI could scale with the project’s needs, we were committed to launching on both PC and console from day one, which was a challenge in itself. Creating an experience that feels intuitive and natural on two very different input devices requires careful interaction design, strong UX guidelines, and plenty of iteration to ensure the experience remains smooth and consistent. Here, we can share a few insights from that process as well.

Meet the team!

My name is Alex Gibson, and I’m one of the two UI Leads on Anno 117: Pax Romana. The UI team is significantly larger than in the previous installment, bringing together a mix of industry veterans and newcomers — a combination of experience and fresh perspectives.

In no particular order, I want to give a huge shout-out to the team for their commitment, dedication, and resilience in shaping the UI of Anno 117: Pax Romana. Their hard work is what makes the game’s interface both functional and engaging:

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, and Bien Thuy Tran.

Their passion and collective efforts truly brought the UI to life and continue to shape and improve it with every update.

So, you might be wondering: what topic are we starting with today? I’d like to kick things off with the visual direction and why we chose it. This section will explore early concept designs, how our approach aligns with overall branding, and the innovations the UI team developed to make the interface both distinctive and functional whilst being conscious of time.

Visual Ideations and Concepts

Let’s go back three years, to when we first began conceptualizing the UI. At that time, the art direction was still undefined, leaving all avenues open for exploration. This created an opportunity for a few team members to start developing ideas for the game’s UI visual style, laying the groundwork for what would later become the dedicated visual team inside the UI department and providing a strong foundation for the styles we wanted to pursue.

Benjamin Clendon, Christoph Weber, Eva Kaup, Angus Jewkes and I are the key contributors in shaping the initial vision and guiding the overall visual direction of the UI. In the short pre-production phase, we explored and designed a diverse range of visual styles, quickly identifying what resonated and what didn’t. Throughout the process, we worked closely with the Creative Director and Game Director to ensure the UI evolved in alignment with their vision, establishing a clear creative foundation for the rest of the interface.

Early Miro board snapshot showcasing initial concepts and ideation.

After months of iteration and refinement, the word “Elegance” emerged as one of the foundational pillars guiding our design decisions. Complementary words such as polished, delicate, and refined also became central to the visual direction. The goal was to create a UI that felt authentic and relevant to the time period, avoiding anything that appeared aged, worn, or out of place within the world of Anno 117: Pax Romana.

We also had to remain highly mindful of technical constraints and broader project requirements. This included considerations such as texture resolution to support multi-platform development, ensuring textures could tile seamlessly (i.e. repeatable without a visual “seam”), and meeting accessibility guidelines. As a result, many factors had to be carefully balanced throughout the process. A fun and complicated puzzle which is always a challenge!

Choosing Colours and Styles

Early on, we decided to pursue a darker UI direction rather than a lighter one. While there were several practical considerations behind this choice, the primary reason was that a darker style better complemented the in-game world.

Early visual concept, missing a lot of mechanics and features.

It allowed the interface to feel integrated rather than appearing as a separate overlay, ensuring it supported the experience without distracting from or pulling the player out of the game…but why blue you may be asking?

The Roman Empire made use of a wide range of colours, though some were far rarer than others and often restricted to specific social classes due to wealth and availability. One of the most prestigious was Tyrian purple, a colour strongly associated with power and status. Because of its rarity and cost, it was largely reserved for politicians, high-ranking officials, and emperors, symbolizing authority and imperial prestige.

Because Tyrian purple was intended to feel rare and powerful, we reserved it exclusively for significant moments within the experience, specifically as the selected state for buttons. This ensured the colour retained its sense of importance and visual impact and which can be seen in our early and final button concepts below.

Early button concepts exploring different styles and colour directions.

Final primary button states and styles.

In-engine breakdown and structure.

Blue, particularly a dark blue, proved to be the most suitable and preferred foundation colour for the UI. The chosen tones convey elegance and clarity while providing strong contrast for key elements such as whites, greens, reds, and yellows, ensuring both readability and functional clarity throughout the interface.

To prevent the interface from feeling overly flat, we introduced a subtle fabric texture. This added depth without overwhelming the design, as the background needed to remain understated to support a wide range of content layered on top of it. The goal was to create visual richness while maintaining clarity and flexibility.

We introduced variations in fabric tones to create a stronger sense of hierarchy and depth.

On top of these foundations, we later decided to introduce a secondary texture to the UI. Marble, a prominent material in Roman architecture, was a natural choice to explore. Since marble comes in a variety of colours and vein intensities, we selected a blue-tinted marble for the base, complemented by Tyrian purple veins to reference the rare and prestigious Tyrian colour, tying the texture back into the visual language of the UI.

Three different marble textures were created at varying sizes to optimize memory usage.

Decals, Details and Refining

Once the core of our UI style guide was locked in, we had the fun part ahead of us – polishing. We started refining patterns, tweaking visual details, and layering in elements that helped the interface feel more grounded to the time period.

A big focus was creating iconic shapes and ornamental motifs that could be reused in smart ways. We built them to be modular, so designers could mix and match pieces to create unique decals for different features in just a few clicks. This gave us the best of both worlds: a UI that feels cohesive overall but still has room for personality and variation where it matters.

A great example of our modular approach is the mosaic patterns you’ll see throughout the UI. We first designed the patterns in clean vector form, then transformed them into mosaic variations that fit the game’s aesthetic. Because the system was built to be flexible, we could quickly generate unique decorative elements without starting from scratch each time. The result? Strong visual consistency across the interface and a production process that saved the team a significant amount of time.

So how did we create so many scenes, and do it all on time?

As the UI visuals entered a more refined phase, the UI visual team began creating building blocks that could be used consistently throughout the game. While this document was by no means complete, given the numerous mechanics and systems that required bespoke visual solutions, it provided a foundational colour palette and reference materials that the UI department could rely on. The examples below showcase many of the visual elements that designers could access through the shared Adobe Creative Cloud.

Example asset sheet available in Adobe Creative Cloud as separate elements.

We maintained asset sheets containing all button states, textures, decorations, generic assets, and basic shapes, giving the team ready-to-use building blocks to streamline visual feature design. While these sheets covered reusable elements, many unique assets still needed to be created, a task that the visual sub-team actively supported throughout development.

So how do we construct elements?

Over the course of the project, creating new elements became increasingly efficient as more references and templates became available. Below is a brief breakdown of the process, showing how an element is generated and prepared for implementation into the engine.

Element examples to demonstrate how the UI can, and is, broken down.

Conclusion

While this only scratches the surface of the UI’s visual style evolution, I hope it provides some insight into why we chose the direction we have today. We continue to refine and enhance the style with every major update (including the upcoming update 1.5), ensuring it remains both visually cohesive and responsive to the game’s needs.