When I embarked on my career as a UI Artist, the process of developing a visual style seemed like an insurmountable challenge. Often, UI designers find themselves grasping at straws, working with just a few abstract ideas from the art director or game designer. However, this approach is neither effective nor efficient. Over time, I’ve developed a systematic pipeline for UI Artists, which I’m excited to share with my colleagues in the field.

Creating an immersive UI that seamlessly integrates with a game’s universe and setting is crucial. The solution lies in developing a semantic core and drawing inspiration from in-game art created by concept artists, 3D artists, and illustrators on your team.

Why is immersion critical for game interfaces?

• It ensures visual development aligns meaningfully with the game’s setting and universe;
• Each design choice — from color coding to element hierarchy and visual effects — serves a specific purpose;
• The User Interface becomes an integral part of the game universe rather than a separate entity.

Starting with Game Narrative

To initiate visual development, we must first identify our available resources and sources of inspiration.

I always begin by exploring the game’s universe, narrative, and lore. Even in the absence of existing art assets, game designers typically include descriptions of the world and setting in design documents. This information forms the basis for identifying keywords that will help define the project’s aesthetics and visual style, creating a semantic core.

To illustrate this pipeline and interface development process, let’s use the rich universe of XCOM as an example. While XCOM: Enemy Unknown and XCOM 2 already boast impressive interfaces, there’s always room for experimentation and innovation.

Creating a Semantic Core

Let’s extract key terms from a description of the XCOM universe, taken directly from website :

Twenty years have passed since world leaders offered an unconditional surrender to alien forces and XCOM, the planet’s last line of defense, was left decimated and scattered. Now the aliens rule Earth, building shining cities that promise a brilliant future for humanity on the surface, while concealing a sinister agenda below and eliminating all who dissent from their new order.
‍
Take command of the Avenger, an alien supply craft converted to XCOM’s mobile headquarters. Guide your strike force around the world, build popular support and expose the aliens’ sinister plans.

RECRUIT RESISTANCE FIGHTERS
Five soldier classes, each with its own skill tree including new class abilities like Momentum, let you create specific soldiers for your tactical plan.

TACTICAL GUERRILLA COMBAT
New gameplay systems offer more tactical flexibility in combat. The state of the world affects each combat mission’s environment. Use concealment to ambush enemy patrols. Loot enemies for precious gear and artifacts. Rescue VIPs and save fallen comrades by carrying them to the extraction point.

RESEARCH, DEVELOP AND UPGRADE
Configure and build rooms on the Avenger to give XCOM new capabilities on the battlefield. Use your Scientists and Engineers to research, develop and upgrade weapons and armor to fit your preferred tactics.

As you can see, I've highlighted words that define the core UI aesthetic.

Developing a semantic core provides direction and narrows our search for references. Instead of creating countless UI visual iterations, we can focus on developing a cohesive and appropriate design.

Asking the Right Questions

If you find yourself at a stage of development where narrative texts haven’t been written, concept art hasn’t been created, and the team has only a vague idea of the UI’s appearance, or if you simply want to expand your keyword list, don’t worry.

Engage with the game designer or narrative designer by asking “right” questions from an interface perspective. Using XCOM as an example, these might include:

• Could the interface be alien technology?
• If soldiers use the interface, what purpose does it serve?
• How would people in the XCOM universe use this graphic overlay?
• What technologies could create this graphic overlay? Maybe it’s a projection in a helmet, or a monitor in central headquarters, and so on.

The answers you receive will guide you in the right direction, enrich your semantic core, and help create a clearer vision.

Utilizing Game Art

After working with the narrative and collecting keywords, the next step is to reference existing art created by your team.

Personally, I find key art and concept art, especially interiors and costumes, to be invaluable sources of inspiration. Why? Because they embody design principles that could theoretically be used by creatures within the game universe, offering insight into their design thinking.

Let’s examine concept art by Piero Macgowan for XCOM 2 as an example.

Or maybe the graphical overlay was created mostly for tactical combat with Advent? Then you can find inspiration in the setting of the XCOM headquarters or soldier’s armor.

As UI designers, we should pay close attention to the shapes of objects, scales, color palettes, and try to understand the design principles of the game universe. For instance, after analyzing the XCOM artwork, words that come to mind include: tactical, militaristic, utilitarian, functional, standardized, war, clean, minimalistic, military overlay.

Using Internet References

While I’m not a strong advocate for using internet references, they can be valuable in certain circumstances, such as when in-game art is unavailable. I believe that true creativity comes from seeking inspiration “inside, not outside.” Overreliance on internet references can result in an interface that feels disconnected from the game universe, potentially leading to a generic sci-fi interface in the case of XCOM 2 — which is not our goal.

However, I do endorse the use of real-life examples as non-game references. Given that the XCOM 2 interface leans towards a militarized and tactical aesthetic, let’s examine some real-life examples:

‍

These examples can inform typography, font usage, and the spatial arrangement of interface elements.

Real-life examples help us understand how the human eye perceives and interprets certain aesthetics, bridging the gap between the virtual world and our own.

UI Moodboard

Let’s create a concise moodboard to summarize our analysis. I typically create an image that incorporates the semantic core and references. From this comprehensive view, I try to distill the interface aesthetics into a single, guiding sentence.

The result of this process is a concise description:

“Military combat user interface with tactical overlay influenced by alien technology.”

Keep this sentence in mind as it will serve as your guiding principle when designing the visuals and aesthetics of your interface.

Defining Colors & Shapes

Colors

A crucial step in visual development is establishing a color scheme. This can be achieved efficiently by using the Eyedropper tool to extract colors directly from the moodboard.

When constructing a color scheme, it’s important to remember the 60–30–10 rule, which helps create a balanced UI.

Let’s apply this rule to our research and the XCOM 2 User Interface:

I’ve decided to include an additional accent color to better align with the complementary color scheme and provide more diversity in the UI if needed.

Shapes

Game interfaces are unique entities where even the shape of windows can communicate specific ideas. Details that contribute to aesthetics and atmosphere are crucial when creating a GUI, as they help players immerse themselves in the game universe.

That’s why I dedicate time to exploring shapes and details that can be applied to the interface. Ideally, you should understand the design thinking of creatures in the particular game universe. Using XCOM 2 as an example, let’s examine the moodboard and try to identify certain trends in form and detail.

We observe numerous geometric shapes, thin bright lines, mating surfaces, holographic projections, and sharp edges. Utility and functionality are key themes.

Creating Previews

With the color scheme and shapes established for the UI, we move from theory to practice.

My next step is to create small previews or windows for the project. I prefer to work from specific to general, starting with a small element or popup and progressing to a full menu or HUD. This approach is time-efficient, as it’s easier to refine the aesthetics of a small window than to create a large menu where each iteration requires redesigning the entire layout and details.

I explored various options: cooler colors, more angular shapes, and their opposites. I settled on the bottom right option as it appeared more futuristic and contrasting. While XCOM 2 already has an excellent interface with cool colors, I decided to experiment with a warm and cool color combination.

I’d like to share another example from a project I worked on. The task was to design an interface in a casual Art Deco style, and I also began with small elements that could inspire thoughts about the overall aesthetic.

Each choice in the development of a graphical interface must be reasonable, conscious, and relevant to the game universe.

From Specific to General

Once you’ve developed the previews and established an approximate style for your future design system, it’s time to expand.

I applied the design style from the preview to a larger layout — in this case, the character menu.

With the style of buttons, fonts, and even scroll elements thoughtfully developed, applying the style to other windows becomes straightforward. I simply adapted the style to larger screens.

Below is an example of adapting the style of a small element in the Art Deco style to a level completion popup. While a life bar alone may not fully convey the entire UI style, it serves as inspiration and prompts further exploration.

Enhancing Immersion

I admire interface artists who go beyond simple solutions, delving deeper into the subject matter to create interfaces that are as immersive as possible, when conditions allow. Diegetic interfaces — those that exist within the game world — always leave a strong impression.

While there are many examples of such immersive interfaces online, I’d like to focus on some of my favorite and most striking examples:

‍

Returning to our XCOM 2 example, the game features an excellent immersive hacking interface. Rather than being a separate screen or layout, it’s presented as a complete hacking device. The interface also incorporates the developed UI style for consistency.

Don’t be afraid to experiment — the user interface is as much a part of the game universe as the characters or environment.

Conclusion

To summarize, here are the key steps that guided us in creating the UI style:

1. Analyzing the game narrative
2. Creating a semantic core
3. Using game art for inspiration
4. Developing a UI moodboard
5. Defining colors and shapes
6. Creating previews
7. Establishing an overall style and considering immersion

Additionally, exploring fonts and considering visual effects can be included in these steps.

‍