Sci-Fi Game UI/UX Design

Affinity Designer

FPS

Sci-Fi

Project Overview

As a lifelong Star Wars fan, I’ve always been drawn to the visual storytelling of the galaxy far, far away. For this project, I set out to design a full UI/UX concept for a modern, story-driven action-adventure game. I challenged myself to strike a balance between staying true to the iconic Star Wars aesthetic—gritty, tech-heavy, cinematic—and using clean, modern design techniques like minimalist layouts and bold, readable type. It was important to me that it felt like something new, but still instantly recognizable to fans..

My Goal: Cinematic Feel, Effortless Function

I wanted this UI to be cinematic and immersive, but also incredibly clean and out of the way. The interface should support the epic scale of the Star Wars universe, not distract from it.

My main goals were to:

Be Authentic: Capture the modern, utilitarian sci-fi aesthetic seen in recent films and games.
Prioritize Clarity: Use a minimalist approach so that menus are easy to read and navigate instantly.
Feel Seamless: Create a cohesive experience, from the moment you start the game to when you're upgrading your character.

The main menu immediately sets a serious and epic tone, using the iconic wreckage of the Death Star as a backdrop. The menu itself is intentionally minimal, with clean lines and angular highlights that give it a futuristic, HUD-like feel. It's designed to be cinematic and immersive from the very first second.

For all the functional screens—like brightness, audio settings, or control mapping—consistency was my top priority. I used a simple and intuitive two-panel layout with vertical tabs on the left. This is a familiar pattern for players and makes it incredibly easy to find what you're looking for. The use of generous negative space and a high-contrast color scheme ensures everything is perfectly legible on any screen.

To show how the UI works within the game itself, I designed a skill-unlock screen. It presents all the necessary information clearly: the skill's name, its function, and the cost. The prominent call-to-action tells the player exactly what to do next. Including an iconic image, like Darth Vader, makes the screen more visually engaging and ties it directly to the rich lore of the universe.

Typography

The font choice was critical to getting the right feel.

Headings (Azonix): This font is geometric, wide, and technical. It feels futuristic and perfectly fits the sci-fi theme without being a direct copy of existing Star Wars fonts.
Body Text (Manrope): For everything else, I used an extremely clean and modern sans-serif. Its high readability is essential for a user-friendly experience, ensuring instructions and descriptions are always easy to understand.

Color & Shape

The color palette is strictly monochromatic (black, white, grays) with a single, sharp blue-white accent color. This gives the UI a mature, sophisticated look and makes important information pop. The thin lines and angular, geometric shapes used for highlights and containers create a cohesive and technical feel that runs through every single screen.

Final Thoughts

I had a lot of fun with this project. My main goal was to capture that iconic Star Wars vibe but give it a really modern and clean twist. It was a fun challenge to make something feel authentic without just rehashing designs we've all seen before.

In the end, it really came down to a 'less is more' approach. I found that using simple typography and a minimal color scheme actually made the whole experience feel more cinematic and immersive, as it lets the epic visuals of the game world be the real star. I’m happy with the result—a UI that’s clean, functional, and still feels like it belongs in a galaxy far, far away.