Author: Ubi-Thorlof

All Anno games feature a substantial number of icons, more than most might expect! For 117, we made an incredible amount of 1700 icons (not counting discarded variations). Our icons come in a variety of styles. The ones we use the most can be split into 2D & 3D icons.

2D icons are simple graphic images designed to remain readable even on a small scale. You can find them throughout the game: info-tips, in descriptions, or next to values.

Our 3D icons are small life-like paintings (also called skeuomorphic). These are commonly used for items and specialists as well as for buildings, ships, and resource icons.

2D Icons (Glyphs)

• Simplified and stylized drawings in a single color
• What we use it for:
  • Works for small icons
  • Works with a single color
  • Abstract concept
  • Categories
• Limitations:
  • Similar objects can be difficult to differentiate by shape alone.

3D Icons (Skeuomorphic Icons)

• Realistic depiction of an object
• What we use it for:
  • Great for differentiating similar objects, e.g., between the several types of ships.
  • Color can be used to distinguish the rarity of objects.
• Limitations:
  • Requires a bigger size due to the high amount of detail
  • Best for objects rather than concepts.

The Planning and Ideation Phase

Icons are part of the UI team’s responsibilities, with multiple team members contributing to their creation, export, and ongoing management. One UI team member oversees the overall planning and coordination, working closely with the team to define icon needs and determine which icons are produced in-house and which are created by our long-term freelance icon specialist, Sebastian Erb, who has been part of the team since Anno 2205.

2D Icons – Glyphs

Glyphs are used to represent abstract concepts or categories. To make them easily recognizable, we reference real world objects or rely on established visual concepts conveyed through ideograms or mix of both.

Pictogram

This icon resembles a real-world object.

Ideogram

The meaning of this type of icon must be learned.

Mix

Often pictograms and ideograms are combined to help clarify meaning.

2D icons might appear simple, but a great deal of discussion often goes into the creation of even a single icon. We must balance the “Roman” of the icons with clarity and recognizability. The “floppy disk” is still the go to symbol for saving but maybe we should go with something more roman? How detailed do we want to be?

To find the right design we create several alternatives. The variations are then discussed with the requesting designer and the icon team to pick the variation that works best

Since 2D icons are usually displayed at a small size, we have to keep the level of detail fairly low. We have to ensures that icons remain easy to tell apart at a glance, usability is our most important criteria. Because of this, our 2D icons mix roman and more modern elements. More detailed roman elements are mainly used on larger painted 3D icons, where they can be easier to see and read.

We decided to reference the Anno “A” from 117 for the arrow icon. The left hand icon was chosen for the game.

3D Icons

Painting detailed 3D icons allows us to add a lot more flavor and tell a story within each icon.

To keep our 3D icons consistent, we pay close attention to lighting direction, proportion, and level of detail.

Even though the scrolls are similar objects, they are made to look distinct through arrangement, shape, and angle.

The rarity and value of these scrolls is communicated through materials from dull to shining, paper to gold, and an increase in intensity and variation of colors.

Production Chains & Buildings

Production chain and building icons have a high priority in the game, as players interact with them constantly. These icons are most often seen in the construction menu, where many options are displayed side by side while players browse, compare, and plan their layouts.

Because players spend a long time looking at and working with these icons, we pay extra attention to readability, clarity, and visual balance. Icons need to be easy to recognize and distinguish at a glance, while remaining comfortable to look at over extended periods. This often takes multiple iterations to ensure each icon stays clear, consistent, and recognizable even at a small scale. We try to visually relate the input goods to the final good by keeping colors similar.

Ships

At the core of every Anno game is the exploration and trade with the outside world. Ships are the vehicle to achieve the dream of endless expansion and naval domination. Our ships are first created by the art department. They evolve quite a lot during the game’s production. Once the finish line was on the horizon, we collected renders (screenshots) of the game’s ships to hand them over to our icon specialists to create beautiful 3D paintings of each. Since these icons have to work on a small scale, they are not just a simple copy of the original 3D object but highlight the unique features of each ship. Emphasizing details such as railing and ropes to make them distinguishable.

Specialists

The wise residents of the villa are quite a colorful bunch. They represent all residents which were part of the Roman empire: from the Celts to the Egyptians, the vast diversity of the Roman empire is represented though their faces and clothing. Though it can be a challenge to find information on historical dress, we look for sources like frescos to create clothing that might resemble what was worn back in the time of the empire. When working on the specialists, we had a list with name, ethnicity, and sometimes a little description about them. With each specialist, we try to tell a story through their design.

This specialist was inspired by the fresco “Mycenaean Lady.”

For the dress and hair of this Minoan woman we referenced the fresco “Dancing Lady” which was discovered in the excavations of Heraklion.

The base game features about 400 specialists! It would have been a huge effort to hand paint all of them individually and taken many months of work time which we needed to create other icons as well. Therefore, we adopted an approach that has already proven successful in Anno 1800.

We developed a system similar to the toy ” Mr. Potato Head”. Interchangeable parts are utilized so we can mix and match based on the need of each specialist. Sebastian Erb also built a modular library of eyes, beards, hairstyles, noses, brows, clothes, scars, and items. The base bodies come in a variety of skin colors and shapes that help us create a huge library of specialists in the same style and in a short amount of time.

After the elements are chosen making up our specialist, we add a few finishing touches such as shadows, age spots, and body hair.

From posh patrician to rugged wetland walker, these outfits cover a range of the attire worn by the empire’s population. By adding dust and adjusting color, we can further add depth to the characters. This is only a small selection of the clothing created for our specialists.

A witty smirk, a disgusted frown, a content smile. This small selection of face parts hints at the variety of faces that can be created from this base.

Special Icons

If you pay close attention to our icons, you might encounter Easter eggs and references. Happy hunting for these little surprises in the game.

This is the Anno sheep that was on display during Gamescom 2025 and has found its way into the players’ and team’s hearts alike. You can encounter Gaius Schafus III. as an easter egg.

Thank you for reading this article! The Icon Team on Anno 117 are Farah Mahadon, Benjamin Clendon & Eva Kaup. Our freelance artist who created most of the wonderful icons featured on this blog is Sebastian Erb (https://sebastian-erb.de/).

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.