Dev Blog #3: UI Flow and Core Interfaces

In this stage, my main focus is to organize the overall user interface flow of Elemental Echo and, by referencing designs from similar games, to create preliminary wireframes for the core game interfaces. This will lay the foundation for high-fidelity UI design and interaction implementation in the future.


1. Global UI Flow Organization

I used Miro to create a game UI flowchart, starting from the main menu when the player opens the game and detailing the player’s navigation path and the functional relationships between each module. The flowchart covers the following key nodes:

    Main Menu: Displays player information, with entries for starting the game, tutorial, settings, and leaderboard;

    Tutorial: Provides text tips, operation demonstrations, and animations the first time the player enters the game, with an option to skip;

    Match Lobby: Displays teammates and opponents, chat system, countdown timer, character selection, and readiness status;

   Room Settings: Includes room naming, password input, rule settings, player management, and team distribution;

    Game Playing: Enter real-time battle after preparation is completed;

    Victory/Defeat: Displays individual and team performance, reward content, and supports rematch or return to the main menu.

Through this flowchart, I clearly defined the logical flow between each UI screen, ensuring that the development team can follow a unified interaction structure in the subsequent development process.

Miro screenshot: game flow

2. Core Interface Wireframe Concept

After confirming the interface structure, I referenced the UI designs of games like Super Smash Bros. and Overwatch, and sketched out the initial framework for the main menu, match lobby, and character selection screens suited for Elemental Echo. While these sketches don’t include artistic assets yet, the functional layout is already in place. My design approach aims to make operations clear and intuitive. For example, in the character selection screen, teammate information, character status, and the readiness button are placed in prominent positions to help players make decisions quickly. The sketches use box partitions and text annotations to emphasize the layout ratio and interaction flow between interface modules.

During the design process, our team held multiple discussions to refine details. For example, we debated whether to use a static image or 3D rendering for the main menu background. After considering multiple options, we decided on a static background image, as it saves performance and makes it easier to adjust the artistic style later. Similarly, the room settings screen originally only had time limits and round numbers, but based on team feedback, I added functionalities like "password-protected rooms," "kick players," and "team distribution."

Design Approach:

    Main Menu: Keep a minimalist style with clear menu item arrangements and leave space for background animations or promotional images;

    Lobby Screen: Combine character selection, teammate information, map preview, and readiness status into a single screen to avoid switching between different screens;

    Room Settings Screen: Design a room structure that supports multiple players, offering rule settings (such as time limits and score targets), room naming, player kicking, and team adjustments, to quickly accommodate the 2v2 game mode.

These sketches are built with grayscale blocks to help me quickly test spatial distribution and interface logic in the early stages. They also make it easier to communicate with programmers and other designers.

Miro screenshot: menu, lobby

3. Current UI Sketch Progress

So far, I have completed the following grayscale wireframes:

    ① Main Menu

    ② Room Settings / Team Selection Screen

All screens are designed based on a modular grid system, with consideration for compatibility with controller inputs. Additionally, I have also attempted to sketch the following:

    Team score prompt effect

    Two states of skill icons: Ready and Cooldown


4. Next Steps

The focus for the upcoming work includes:

    ① Refining the Main Menu / Room Settings / Team Selection UI Design: I will further optimize the layout of these screens to ensure that information is displayed clearly, operations are simplified, and the player experience is improved.

    ② Sketching the Game Playing and Battle Results UI: This will include UI elements for real-time gameplay (such as skill bars, health bars, and target indicators), as well as the post-battle results screen showing individual and team performance, rewards, etc.

In this phase, I will continue to refine the overall UI flow, referencing designs from other games, and work on the wireframes for each core screen. These designs will form a solid foundation for the subsequent high-fidelity UI and interaction design, ensuring that the design logic for each screen is clear and providing a unified interaction structure for the development team, making future development easier to implement.


5. References

Riot Games. Valorant – Ability HUD and minimal screen disruption

Respawn Entertainment. Apex Legends – Clean HUD layering and role iconography

Super Smash Bros. (Nintendo). (n.d.). Retrieved from https://www.smashbros.com/

Overwatch (Blizzard Entertainment). (n.d.). Retrieved from https://playoverwatch.com/

评论

发表评论

此博客中的热门博文

Dev Blog #1: Initial Design and Visual Style Direction

图片
1. Project Introduction and Visual Goals This week, our team started by brainstorming ideas around the theme of “multiplayer games.” We came up with a few key concepts: fun, fast-paced, and high interaction. After trying out different types—like traditional shooters and melee brawlers—we decided to make a 2v2 third-person mage combat game . Here’s why we chose this direction:     ① To avoid making something too generic, we introduced an elemental reaction system: different elements interact with each other, dealing extra damage or even changing the environment.     ② The combination of mages in a medieval setting with a third-person combat style felt like a fresh mix that could offer new experiences. Our goal is to create a game where players engage in short but intense battles, using strategy based on their roles an d elemental factions. Besides helping with gameplay design, I’m mainly responsible for the visual side of the game. Once we locked down the basic ...
阅读全文

Dev Blog #2: Character Shape Evolution & Elemental Identity

图片
  After defining the worldviews and visual direction of the three elemental factions last week, I started working on the 3D character appearances this week. 1. From Chibi Prototypes to Proportional Models My first version featured some chibi-style characters—small, cute, with exaggerated proportions. But during our first team discussion, everyone felt that a more proportional character style would better fit the tone of our game, which leans toward neutral and tactical. The chibi designs, while fun, didn’t really carry the intensity needed for fast-paced combat, especially during casting or dashing actions. The first version of the design that was not approved. 2. Simplifying the Model for Customizable Gear Since we initially planned to let players customize accessories—like hats, cloaks, and shoulder items—I made the second version of the characters much simpler, with clean silhouettes and no extra gear. I used base colors to represent each elemental faction (blue for Water, r...
阅读全文

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—parti...
阅读全文