Flowcharts and UI Draft Layouts

 DISC380 Blog – Mapping the Player Journey: Flowcharts and Draft UI Layouts

After exploring the fundamentals of UI and thinking deeply about clarity, consistency, and user control in my last post, I’m now moving into the next stage of my design journey for Melodies of the Grove. This is the part where planning starts to take shape visually. Flowcharts and draft layouts are crucial tools that help me understand how players will navigate the game, which screens connect to one another, and how the interface will guide them intuitively through the experience.

In this post, I’ll be sharing my process for creating flowcharts, organising menus, and drafting initial UI layouts. I’ll reflect on the challenges of translating ideas from sketches into structured plans, and how these early stages are essential for making a UI that not only looks good but works seamlessly in-game.

Research and Inspiration

Alongside creating flowcharts, I explored game UI artist portfolios on ArtStation to gain a clearer sense of professional workflows, layout strategies, and overall design approaches. While there are countless tutorials available online for apps, websites, and general interface design, resources specifically focused on game UI can be surprisingly scarce, unless you know exactly where to look. Studying game-focused portfolios allowed me to observe how designers approach interactive environments, where the player is constantly moving, making decisions, and responding to feedback. Unlike static interfaces, game UI must communicate information in real time, anticipate player actions, and remain readable under dynamic conditions, which added an extra layer of complexity to my learning.

One artist I found particularly helpful was François Sourichannh. His work is clean, highly intuitive, and communicates information with precision. Especially at this early stage, I was seeking guidance on clarity and player navigation, two principles I wanted to prioritise in Melodies of the Grove. Observing his in-game HUDs, menus, and layout choices gave me valuable insights into balancing aesthetics with functionality. I noticed how he leveraged visual hierarchy to make essential information immediately accessible, how spacing and grouping clarified relationships between elements, and how consistent iconography reinforced player familiarity. These observations pushed me to consider not just what to include in my UI, but how players would naturally digest the information at a glance, even in moments of intense gameplay or exploration.

While studying these portfolios, I also reflected on my own experiences as a player and how UI impacts immersion. I thought about games like Overwatch, where UI is carefully designed to reflect the game’s tone, genre, and community. In a fast-paced, competitive first-person shooter, the interface must convey critical information instantly, from ability cooldowns to match objectives, health indicators, and team status. Every element serves a dual purpose: it provides the player with functional information while reinforcing the identity and energy of the game world. This example highlighted for me the importance of designing UI that feels like a natural extension of the game environment rather than a separate layer, an approach I wanted to carry into Melodies of the Grove.

Beyond observing design techniques, I also started reflecting on how to translate my animation skills into UI. Just as animation relies on movement, timing, and visual cues to guide the audience’s attention, game UI can use similar principles to direct players. Animations for buttons, icons, and menus can subtly communicate functionality, while spacing and grouping can guide the eye to critical elements. Understanding this connection inspired me to think about UI as a storytelling medium in its own right, where clarity, responsiveness, and immersion work together to shape the player’s experience.

This is the reference and link to the artist I talked about right here; 

Sourichannh, F. (n.d.). François Sourichannh – ArtStation. ArtStation. Retrieved October 19, 2025, from https://www.artstation.com/artwork/4XegyY 

Creating the Flowchart

Using what I learned from research and tutorials, I started drafting a simple game UI flowchart. The goal was to map the main screens and interactions:

This visual map helped me see the paths a player could take and highlighted key decision points where the interface needed to provide guidance. It also made it clear where screens might loop back or branch, allowing me to plan navigation hierarchies and priorities.

Even at this stage, I had to make choices about what screens were essential and which elements could be combined or simplified. The flowchart became the backbone for all future UI design, giving me a clear reference for drafting layouts without losing sight of player experience.

Drafting UI Layouts

Once the flowchart was in place, I moved on to drafting the actual UI layouts for each screen. This was where the concepts of clarity, consistency, and user control came into play. By using the flowchart as a guide, I could start thinking visually about how each element should be arranged and how players would interact with them.

(All mock up drafts images will be below)

For example, the Title Screen needed to immediately communicate the game’s identity and provide clear options to start, load, or exit the game.

The Menu had to organise multiple choices, inventory, settings, and gameplay options, in a way that felt intuitive. By considering hierarchy, I could prioritise important actions while keeping secondary options accessible but less visually dominant.

The Loading Screen presented an opportunity to add personality without overwhelming the player. I planned to integrate visual cues that indicated progress while keeping the tone consistent with the game world. 

For in-game screens like Combat and Secondary Combat, the layouts needed to communicate critical information at a glance, health bars, ability cooldowns, and enemy indicators, without cluttering the screen. The goal was to make the interface feel like a natural extension of the gameplay rather than a separate layer.

 

Other screens, such as Level Up, Evolve Screen, Item Inventory, Creature Inventory, and Player Inventory, required careful consideration of interaction flow. Items and stats needed to be immediately readable, interactive buttons had to feel responsive, and transitions between screens had to be smooth so players wouldn’t get lost. Using the draft flowchart as a reference, I could experiment with spacing, alignment, and grouping, testing how information would be digested by the player.

Throughout this process, I kept returning to the idea that UI is not just decoration. Every choice, from icon placement to button size, from font selection to visual feedback, communicates meaning. The draft layouts were my first attempt to translate the functional goals of each screen into something tangible and testable. Even though these are early-stage designs, they provided a clear roadmap for the next step: creating visual mock-ups and iterating based on usability and player feedback.

In Conclusion

This stage of the project was very straightforward, and with the research I did and the inspiration I gained from studying other artists, I found this process to be the easiest part so far. Creating the flowchart helped me clearly visualise how players would move through the game and how each screen connected to the next. Looking at professional UI portfolios also made it easier to understand how structure and clarity shape the player experience.

Even though this stage felt smooth, it also reinforced how much planning goes into building an effective interface. It made me more aware of how every choice, from layout to hierarchy, contributes to how naturally players can navigate the game. I also started to see how my animation skills could be applied to UI design, using timing, spacing, and visual rhythm to guide attention. Overall, this phase gave me a stronger foundation for the visual mock-ups and usability testing I’ll develop next.

Mapping out the player journey through flowcharts and draft layouts has been a valuable step in shaping the direction of Melodies of the Grove. It gave me the structure I needed to plan ahead and ensured that each screen served a clear purpose within the overall experience. By combining research, inspiration from artists like François Sourichannh, and my own understanding of player interaction, I’ve built a strong foundation for the visual and functional design of the game’s UI.

This stage also reminded me that good UI design is rooted in empathy, understanding how players think, move, and react in real time. With these initial drafts complete, I’m ready to move forward into refining the visual style and testing how each element feels in motion. The next stage will be about bringing these ideas to life through colour, typography, and animation, ensuring that every part of the interface feels connected to the world of Melodies of the Grove.