Client: Vicarious Visions

Role: UI Designer

Art Direction: Lawrence Basso and Matt Nathan

Project Type: PC Game Main Menu

Hardware: PC

As part of a conceptual design push, I was tasked with creating two menu variations for a hypothetical game by the name of ‘Moonwalker’ based on two set design aesthetics. As part of a proof-of-concept, this menu UI was a quick project that let me play around with the quirks of fantasy and science fiction visual design to create and contrast modern game aesthetics.

As UI designer, it was my role to craft the conceptual menus from scratch and present them for review, capturing all of the project requirements and executing them in a new and exciting way. I also was given free rein to craft the narrative of the UI and the visual direction/brand as to best achieve my goals.

UI Contents & Requirements

A Quest for Contrast

As outlined by Lawrence and Matt, a menu was needed to showcase two possible variations of a game menu in order to highlight the differences and similarities between genres. They gave me a great starting point by summarizing the two, and gave me a great angle of attack on designing the two systems.

1. Fantasy, which is organic, tactile, hand-crafted, and weathered

2. Sci-Fi, which is futuristic, digital, geometric, clean, and military

Given the short window for the creation of the UI designs, the contents were limited to three key functionalities:

1. 3 modes of gameplay: campaign, co-op, and multiplayer.

2. Players can access their profile and game options.

3. Ability to view the game credits and exit the game.

Research

Contemporary Game UI Analysis

Before concepting out what the UI could look like, it was important to first get to know the modern gaming landscape. What language is currently used to communicate to players? What are users expecting? What makes a UI feel right to players when it’s released, neither too alien nor dated? Looking at a breadth of contemporary games and their menu screens allowed for the analysis of what design trends are prevailing in modern gaming and set the stage for design choices later in the process.

Noted trends included:

• Large, custom typographic game titles.

• Plain-text, non-boxed menu items.

• Generally side-aligned menu items in a singular space.

• Animated, character-focused or environmental backgrounds.

• Special graphics & call-outs related to online play.

• Lack of icons that don’t add additional information to the user’s experience, instead using mostly text.

• Free-form UI that had little to no boxes except when navigating to an entirely new screen of content.

• Menus felt like a ‘portal’ into the game itself.

Bottom Line: Make it evocative, but keep it simple.

Visual Design & Art Selection

Creating a Logo That Speaks to the Genre

Given the importance of highlighting brand through a typographic logo in my research, I thought it important that the final mock-ups have a similar treatment to go with them. It was important the name of the game alone carried the sci-fi or fantasy vibe, and would read well at both large and small sizes.

Aesthetically, it was absolutely necessary to frame the games as a complete concept that spoke to their genre in order to help inform the visual design. With the given name “Moonwalker”, I created two concepts that would form the general base of the UI:

1. A fantasy game where you play as a spirit who can only go out in moonlight. You’re new to the spirit world, and must use clues from old journals and speaking to other spirits in your environment to uncover a great mystery and solve it.

2. A sci-fi game where you’re trapped on a lunar base, akin to the movie/book “The Martian”. You must survive and craft a way home with what’s available on your base. However, there’s something lurking out in the darkness of space…

The fantasy game was practically begging for a logo that had an icon for visual accompaniment, while the sci-fi one wanted to be no-frills and very modern with subtle hints that it was more than just se t type. I opted for giving the fantasy UI a Celtic vibe, going with the ‘natural’ world idea of woodlands, cairns, and holy stones. I latched onto the idea of a Celtic knot early on, and created my own rendition of folklore ‘Celtic moon’ iconography.

For the sci-fi menu, I crafted a logoform to look like an illustrated angel referencing style choices in contemporary games Destiny and Halo. The main goal of this was to appear abstracted enough to go unnoticed at first, and once noticed it would change in perception throughout the game. Perhaps the player assumes it references their character as the only humanoid on the lunar base, only to later wonder if it’s actually a visual cue for the monsters that lurk behind the airlock.

Wireframing

Function Before Form

Because I needed to highlight the differences between the two genres, the base UI needed to be very similar in terms of its skeletal construction. An established, minimal wireframe base that would work for both designs was essential. I started with sketching out rough ideas quickly and laid out a base that would let artwork selected for the design be at the front-and-center of the design. Ideally these would be animated, and work as the first look/feel the user gets when opening the game. I followed direction from my initial analysis of contemporary games in the creation of the minimal interface.

Stylistically, as I began to flesh out the more high-fidelity visuals, I kept the initial task and descriptors in the forefront of my mind. The fantasy game wanted to emulate an RPG, and show the idea of the spirit world with pale blue colors, hopefully lit by moonlight. It wanted to feel like it had history, and was hewn by hand. For the sci-fi UI I wanted to showcase the vast, cold reaches of space and the exciting and yet isolating nature of a lunar base. Capturing the earth rising in the background was the perfect result.

Thematic Rendering

The Visual Design of a Genre

With the UIs complete, I took time to reflect on the success of my work and the final visual direction I would pass on to the team.

The goal of the fantasy UI was one of feeling eerie and mysterious; like a sneak peek beyond the veil. Animated with rising smoke and set to a wind instrument melody, I felt it captured the vibe of a modern fantasy game very well. Stylistically, key characters would fading in and out of the background, showing different actions or searching for clues as a hint to the story. The side menu items would evaporate when selected before transitioning the user to the next screen, as if the entire UI is made of mist and moonlight.

The goal of the sci-fi UI (try saying that five times fast!) was to capture space itself: a cold, isolated moon base that seems cool and powerful, but really highlighting how far away from help the player is. It needed to speak to it being epic yet intimate, a moon walker alone out in the vastness of space. Interactions would be similar to a crisp, rigid military UI, with select glow effects and high-contrast text. The user’s view of the base and moon would shift based on the selected menu item, each selection like a different 'security camera view of the environment the player is about to enter.