Website powered by

Genshin Impact Inspired MMO UX/UI Design [ HUD & Quest Menu ]

Briefing

-Type of Game: Sandbox MMOs
-Target audiences: Gen Z and Gen Alpha, players enjoying titles like Minecraft, Roblox, Stardew Valley, Fallguys, Genshin Impact, Brawl Stars, Fortnite and such.
-Device: 4:3 Ipad 3 [ 2048 x 1536 ] ; 16:9 IOS , Android [ 1920 x 1080 ] ; PC [1920 x 1080] .
-Type: F2P
-Art style:The art style is stylized and vibrant, with slightly exaggerated elements and a somewhat saturated color palette without going overly cartoony or childish. The visuals are optimized for readability and performance across mobile and PC platforms. The isometric camera angle facilitates grid-based building mechanics. The UI adopts a clean, sleek aesthetic with ageless appeal complimenting the stylised 3D level assets and player avatars. UI style steers away from strong thematic elements and skeuomorphic execution to maintain versatility across genres.

Creative Process

At first, I try to break down the elements by parts into a series of structures more designed for touch platforms since they will be the most complex to adapt.
Once the UX of the HUD was defined, I decided to make one specifically for mobile screens and check that the structure I had created was correct for all sizes.

The next step was to start with the UI design. At this point I iterated many times looking for a coherent, stylized and understandable style.Something that fits the target audience and the style of the game that we have mentioned previously.
Once I had the style defined, it was easier for me to continue with the Quest Menu.I paid a lot of attention to creating something unique but that was based on the principles of the typical quests of MMO games on both mobile and PC experience.
I experiment a little with the elements that already had created and come up with an original UI.

UI HUD- Mobile

UI HUD- Mobile

UI HUD- PC

UI HUD- PC

UX HUD

UX HUD

UX/UI Mockup

UI Quest Menu- PC

UI Quest Menu- PC

UI Quest Menu- Mobile

UI Quest Menu- Mobile

UI Quest Menu-Clan

UI Quest Menu-Clan