Dev Blog #4: Refining Key UI Elements and Selecting In-Game Typography
At this stage, my primary task was to organize the overall user interface (UI) flow for Elemental Echo and, with reference to similar games, create preliminary wireframes for each core interface. This would lay the groundwork for high-fidelity UI design and interactive implementation in later stages.
1. Efined the previous UI wireframes
To create a more cohesive visual style for Elemental Echo, I began by selecting appropriate fonts for the game. After browsing extensively on Dafont, I ultimately chose a typeface called “Lazer Game Zone.” Its bold, heavy strokes and rigid structure evoke the grandeur of medieval stone architecture, while its subtle cracked and fractured effects echo the high-stakes clashes of magic and elemental forces central to our game. This made it especially suitable for use in the game’s logo and main title.
However, this font was designed with uppercase letters only, lacking a lowercase set. To maintain a consistent visual language throughout the game—particularly in areas like player registration, nickname input, and the in-game chat—I selected a second typeface with a similar style that includes both uppercase and lowercase letters: “Gunplay.” This font retains the bold, industrial feel while offering better legibility, making it ideal for in-game text.
Additionally, to further emphasize the game’s identity, I customized the title lettering based on both “Lazer Game Zone” and “Gunplay.” Inspired by title designs from games like Valorant, I reconstructed and stylized certain strokes into geometric shapes and added a magical four-pointed star motif within the text. This approach helped preserve the mystical tone of a fantasy world while introducing a modern, distinctive visual signature for our title.
After that I sucessfully refined the previous UI wireframes, including“Start Game, Tutorial, Settings and Leaderboard :
Tutorial System: Offers guidance and animated demonstrations for new players, with the option to skip.
Lobby Interface: Displays teammate and opponent information, including chat window, readiness status, and character selection.
Room Settings Interface: Enables multiplayer room management, including room naming, password entry, game rule settings, and team adjustments.
In-Game Interface: Displays critical real-time battle data, such as skill cooldowns, health status, and score tracking.
Match Summary Interface: Shows player performance metrics like kills, deaths, and scores, with options to restart or return to the main menu.
competed UIs
2. In-Game UI Sketches
The match summary screen uses a table layout to compare player stats directly, supporting quick rematches and tactical analysis.
Throughout the wireframing process, I worked closely with the programmers, artists, and designers. We held regular meetings to discuss the feasibility and content of the wireframes. Key discussion points included:
Background handling: After discussions with the art team, we agreed on using static images instead of real-time environments to save resources and maintain stylistic consistency.
Room function trade-offs: The design team initially suggested features like round count and time limits, but we later removed them after identifying conflicts with the fast-paced nature of the game. Instead, we focused on implementing password-protected rooms, kick functionality, and team management.
Gamepad support: Based on conversations with the developers, I incorporated space in the layout to support future controller compatibility without introducing interaction issues.
Each iteration was evaluated for usability and player experience, with constant refinement to ensure the UI aligned with both aesthetic goals and interaction logic.
4.Current Progress and Next Steps
The following UI wireframes have been completed:
Main Menu
Room Setup / Team Matching Interface
In-Game HUD Layout
Match Summary Interface
Next, I plan to focus on:
Refining existing interfaces such as the main menu and character selection by adding clearer visual cues and interaction feedback.
Expanding the battle HUD with more detailed layers for skill cooldowns and score indicators.
Creating finalized versions of the tutorial and gameplay interfaces to close the UI loop.
评论
发表评论