game menu design
diagetic ui/ux Project for the game feel course (des365)
Team Size: solo
Role: UI/UX Designer
Duration: 1 week
Software:
unity
Figma
This Game Menu Design project, “Gears in the Breeze”, involved designing a immersive and engaging menus with diagetic UI elements for a hypothetical, steampunk-inspired exploration game.
The goal was to create a menu that immediately engages players and sets the tone for the game's atmospheric world, utilizing dynamic interactions and thematic visuals.
MARKET RESEARCH
To ensure the menus was both engaging and thematically consistent, I began this project by conducting market research on three games known for their innovative UI/UX designs: BioShock Infinite, Dishonored, and Frostpunk. The goal was to analyze how these games utilize diegetic UI elements to create immersive experiences and to draw inspiration for my own design. (All images were taken from this site: Game UI Database.)
dishonored
Dishonored is an action-adventure game set in a steampunk-influenced city, renowned for its distinctive visual style. The game seamlessly integrates a minimalistic and immersive UI, with particular emphasis on subtle HUD elements and visual feedback for supernatural abilities.
bioshock infinite
Bioshock is a first-person shooter set in an underwater city with a distinctive mix of art deco and steampunk visuals. Its immersive storytelling and atmospheric design, including a preference for diegetic UI elements, caught my attention.
PROS
• Diegetic UI
• Animations & Camera Movement
• Immersion & Mechanics congruent with the content
• Color Palette & Steampunk theme
frostpunk
Frostpunk is a survival city-building game set in a frozen world. Its visual style is grim and steampunk-inspired. The UI is immersive, with easy animations and minimalism, making it straightforward and engaging. I chose it as a model because it blends seamlessly with the game's atmosphere, making the player experience both intuitive and immersive.
PROS
• Immersive
• Animations & Camera Movement
• Unique
• Fluid Transitions
CONS
• Could be very visually busy
• Accessibility issues
• Potential technical challenges
• Time-consuming to find the 3rd party
PROS
• Immersive
• Easy Animations & Camera Movement
• Minimalism
CONS
• Could be very visually busy
• May be difficult to design for accessibility
• Potential technical challenges
• Time-consuming to find the 3rd party
CONS
• Could be very visually busy
• Potential technical challenges
• Time-consuming to find the 3rd party
design process
About Gears in the Breeze
Gears in the Breeze is a hypothetical 3D exploration game set in a steampunk dystopia where windmills, the primary power source, drive both the narrative and gameplay. I aimed to hook players into this potential game starting from the main menu. The goal was to create a dynamic experience where clicking on buttons immediately immerses players into the atmospheric world, setting the tone for their adventure.
Sketching Phase
I began with basic sketches to conceptualize the main elements, such as the windmill, house, and buttons. This phase involved creating rough drafts to explore different design ideas and layout possibilities. These sketches were intentionally messy, allowing for quick iterations and experimentation without getting bogged down in details.
OVERVIEW: The main menu serves as the entrance to the steampunk adventure, providing players with a visual glimpse into the atmosphere of the game world. The windmill is the prominent element of the Main Menu symbolizing the central power source.
INTERACTION: Includes at least five interactable elements with at least three different methods of interaction. The elements include:
Three sliders (e.g., master, music, sfx)
One toggle (e.g., mute)
One difficulty changer option
DESIGN: The options menu integrates 2D UI elements “hanging off” of the 3D rusty pipe assets. They are on the side of the attached to the building.
INTERACTION: The credits slide into the water which is how they disappear. Players can scroll or click and drag to look through the credits.
DESIGN: The text is 2D and "slides off" the building. Positioned at the bottom part of the same building as the Options section, the credits menu allows players to see the 2D assets from above. This positioning balances the interaction of 2D and 3D elements
INTERACTION: Clicking "QUIT" sends the player underwater, revealing a floating plank with the confirmation message. The sounds and music mute, emphasizing the gravity of the decision to leave the game.
DESIGN: The plank, along with the 2D text, lightly moves and floats underwater. The bottom of the building is visible to the left, with various objects floating underwater, maintaining the aesthetic.
INTERACTION: Initially, I planned for the windmill to slide out from the left to reveal the pause menu. However, I decided to keep the options menu always visible, consistent with the main menu's design. This ensures that players can quickly access the options without additional animations.
DESIGN: The pause menu integrates 2D UI elements with 3D assets, maintaining thematic consistency. The 2D UI elements are attached to wooden planks, poles, and slabs, creating a stable framework. This approach kept the interface cohesive, without needing the rotating windmill mechanism.
wireframing process
1 // main menu
VISUAL WEIGHTING AND GOLDEN PATH: This wireframe includes a 3x3 grid overlay to showcase visual weighting and the Golden Path. The windmill is positioned in the left column of the screen. The Golden Path starts on the left side, moves onto the title name, and then onto the vista point, resembling the Fibonacci spiral.
^This .gif illustrates my thought process behind creating the main menu layout.
STYLE: Asymmetrical
NAVIGATION MODEL: Hub & Spoke
2 // OPTIONS
5 // pause menu
3 // credits
4 // Exit game or coda
reflection & EXECUTION
aN OPPORTUNITY TO GROW
Developing "Gears in the Breeze" allowed me to enhance my skills within the Unity editor. This included tasks such as:
Developing 21 animations to handle the interactions and transitions between different menus.
Implementing those animations using Unity's animation system to ensure smooth and responsive UI behavior.
Iterating the design and layout of elements based on user testing and feedback.
^ This in-engine video demonstrates how the camera dynamically reacts to each button press.
CLICK TO CYCLE THE VIEWS OF THE FINAL PRODUCT! →
implemented feedback
Added the game title to the main menu for clear identification and changed font and color to improve readability.
Implemented sound muting during the CODA sequence and added a blue panel to enhance the underwater effect.
Enhanced the steampunk aesthetic with additional materials like metal and brick on buildings and pipes.
Adjusted the water sounds to be less overpowering compared to the background music and sculpted out the ground for the scene to add depth and realism.
user testing & attention to detail
My favorite part of the project was playtesting with people. Their feedback brought important details to my attention that I might have otherwise missed. Adding these little details truly elevated the user experience. Unfortunately, due to time constraints, not all useful feedback could be implemented.
feedback not implemented
Suggested removing the panel behind the credits for better readability.
Critiqued the lack of a scrolling signifier for the credits, suggesting splashes or automatic text movement.
Noted the lack of feedback in the options menu.
Commented that the SFX and Music bars were unintuitive since you had to pull down to raise the volume.