Savage Realm 2023
Mobile Game UI:
Savage Realm:
Rise of the Warrior
Project Overview
This project focuses on designing a mobile exploration RPG set in an open world of ancient magic and warrior’s destiny. It emphasized a combat gameplay with an ability system to provide temporary boosts to PC performance. Each enablement of ability will cost a resource called Fury. Abilities can be selected and equipped to the gameplay HUD.
My Contribution
My role aimed to create a user-friendly, visually appealing UI that enhances the player's experience based on the provided game concept and mechanics design. The design involved HUD layout, design system and hi-fi prototyping.
1. Research and Analysis
Analyzed existing mobile RPGs games to identify common UI patterns and studied player expectations in similar game genres to tailor the UI design to their needs, examined touch interface trends to enhance user interaction and responsiveness.
This phase aligned the game's mechanics and narrative with a user-centered design approach. The insights gained from trend research, player preferences, and technological considerations were instrumental in crafting a UI design strategy that would exceed player expectations for a mobile RPG experience.
2. Wireframing
In the wireframe phase, I focused on two key screens: the Gameplay HUD and the Ability Equipment Menu.
Gameplay HUD: I designed a layout that includes a minimap and quest indicators in the top left, a health and Fury gauge in the top right, an Attack Panel comprising a base attack and three ability slots on the bottom right, and a D-pad on the bottom left.
The Ability Equipment Menu: It featured a left display of the ability menu with descriptions on the top right corresponding to the currently selected ability, and an ability slots panel on the bottom right allowing for equipping the current ability.
3. UI design system
The design decisions, from color palette to typography, aim to resonate with the game's dark and mythical context, enhancing the player's experience and connection to the game world.
Color Scheme:
Primary Colors (Red and Black): Evokes the bloodshed and brutality of the game's combative milieu.
Metallic Gold and Silver: Symbolizes the clashing of steel in battle and the allure of plundered treasures.
Light Yellow: Represents hope and victory, aligning with themes of myth and legend.
Typography:
Roboto Serif: The primary typeface for major in-game text, bringing an antique flair suitable for the game's historical ambiance.
Roboto Sans-Serif: Chosen for smaller text to ensure legibility, facilitating ease of reading and content differentiation.
Contrast Ratio: Enhancing readability for ordinary groups and ensuring accessibility compliance is met for the users with visual impairments. This phase used the help of WCAG and contrast ratio tool.
4. Specification and
Visual Elements
Specification:
The process involved mapping out the specification and placement of crucial elements like gauges, combat controls and D-pad, ensuring they were easily readable and reachable yet unobtrusive to the gameplay view.
Creation of Visual Elements:
The visual elements were crafted to resonate with the game's fantasy setting. This involved designing unique icons for each ability, reflecting their attributes and function, and incorporating thematic decorative elements to enhance the game's immersive experience.
5. Final UI and Prototyping
The phase involved merging aesthetic elements with functional usability while creating the prototype for the key systems to test the functionality and user experience. Special attention was paid to the combat controls and ability selection mechanics, ensuring these elements were responsive and intuitive, especially during fast-paced gameplay.
Clickable Prototype:
Add new ability to slot - unlock new ability - Equip new ability - Swap ability - Enable ability
6. Conclusion and Challenge
The development of the UI for a mobile RPG game has been a journey marked by innovation and creative problem-solving. The design intricately weaves each element into the game's narrative, creating an immersive experience that is linked with the core mechanics.
Throughout the project, several significant challenges were encountered: Achieving comprehensive design within the limited screen space of a mobile device required a meticulous balance between aesthetics and usability. Another significant challenge was effectively communicating the various states of ability slots and finding the rational mechanics of equipping abilities. This required multiple iterations and a deep understanding of user interaction to ensure a smooth experience.