The Beginning of UI Design

The Beginning of My UI Design Journey

When I first joined Melodies of the Grove (MOTG), I signed up to be the Lead UI Designer, a role that was both exciting and slightly intimidating. As an animation student, most of my experience has been focused on movement, storytelling, and character design, not interface layouts or menu systems. But I wanted to challenge myself with something new, something outside of what I was used to.

At the time, I didn’t fully understand what UI really was beyond the menus, buttons, and health bars I’d seen in games. But as I began researching and experimenting, I realised that UI design is its own form of storytelling. It doesn’t tell a story through characters or dialogue, but through interaction, guiding the player, shaping how they experience the world, and influencing how they feel as they move through it.

This blog marks the beginning of that journey, from my first bits of research to building early flowcharts and testing visual ideas. It’s been a process of discovery, frustration, and learning, but also one that’s shown me how closely animation and UI design are connected. Both rely on timing, clarity, and emotion; the difference is that one moves on its own, and the other moves because the player does.

What Is UI?

This was one of the first questions I asked myself when taking on this role: What exactly is UI, and how do you make it?

When I signed up to be the Lead UI Designer for Melodies of the Grove, I knew I was diving into completely new territory. I’d never been in charge of UI before, and to be honest, I didn’t fully understand what it involved. But that was part of what excited me. I wanted to step outside of animation for a bit, to take what I already knew and see how it could fit into something new. As an animator, I’ve always thought about timing, composition, colour, and how to tell stories through movement. So I started wondering: how can those same ideas be used in something like UI?

At first, it was a little overwhelming. I had no idea where to start, so I did what most people do. I Googled it. One search led to another, and soon I found myself deep in a rabbit hole of articles, tutorials, and game analysis videos. That’s when I came across the Game UI Database, and it completely changed how I thought about UI.

The site is full of screenshots and examples from hundreds of games, everything from League of Legends to Cuphead, and it helped me see how much thought goes into the way players interact with a game.

Before this, I always thought UI was just menus, buttons, and health bars. But once I started looking deeper, I realised it’s so much more than that. UI is the invisible hand that guides the player. It’s how they understand the world, navigate through it, and feel connected to it. It’s not just there to look pretty; it’s there to communicate. Every animation, sound cue, and transition has a purpose. Even something as small as the way a button glows when you hover over it can make a game feel more responsive and alive.

A good example of this is Overwatch. Its UI is uniquely designed around the game’s tone, genre, and community. It’s a first-person, multiplayer, competitive shooter, but it also has a vibrant world and a diverse cast of characters. Every part of its interface, from the title screen to the in-game player hub, reflects that identity. The menus feel energetic and colourful, matching the game’s fast-paced style and larger-than-life personality. It’s a great reminder that UI doesn’t exist separately from the world of the game; it is part of that world.

That’s when it really clicked for me: UI design is a form of storytelling. It’s just told in a different way.

In animation, the viewer sits back and watches a story unfold. In UI, the user becomes part of the story through their interaction with the game. They don’t just see movement, they cause it. That connection between player and interface fascinated me. It felt like a blend of everything I loved about animation and design, but with an extra layer of purpose.

When I started comparing it to animation in film, like Into the Spider-Verse, Howl’s Moving Castle, or even Disney’s Mulan, I realised how different yet similar the two are. Those films rely on visuals and motion to express story and emotion. UI does the same thing, but instead of leading you through a narrative, it leads you through an experience. It’s subtle, but powerful. The way a menu opens, how text appears on the screen, or how an icon shifts slightly when clicked, all of those details tell you something about the tone and rhythm of the world you’re in.

The more I learned, the more I started to notice UI everywhere in the apps I used daily, in websites, and of course, in games. It became impossible not to notice when something worked well or when it didn’t. Suddenly, I wasn’t just looking at design as an artist but as a user. And that shift in perspective made me realise just how important good UI really is.

That’s what made me excited to keep going. I wanted to see how far I could take my understanding of movement, timing, and storytelling and translate it into something interactive. UI design started to feel like an extension of animation, just one where the audience could reach out and touch the story themselves.

The fundamentals of UI

After getting a grasp on what UI actually is, I wanted to dig deeper into how it works, what makes a user interface feel good to use, and why some designs are instantly readable while others feel clunky or confusing. I realised that to make UI that truly fits Melodies of the Grove, I first needed to understand the fundamentals that guide every good interface.

UI design might look simple at first glance, a few buttons, icons, and menus, but behind that simplicity is a lot of structure. Every decision, from colour to placement, follows certain principles that help players understand what they’re looking at and how to interact with it. The more I researched, the more I saw that UI design shares a lot in common with animation and visual storytelling: both rely heavily on communication.

By communication, I mean the way information is conveyed to the audience or user. In animation, this can be as simple as the way a character’s posture communicates emotion, or the way movement signals intention. For example, a character leaning forward to show curiosity or raising an arm to block something. Every motion tells a story without using words. In UI design, communication works in a similar way, but the “story” is functional: it guides the player on what to do next, where to focus their attention, and how to interpret the interface. A glowing button tells you it can be pressed, a cooldown timer communicates when an ability will be ready, and a progress bar shows how far you’ve come. Both forms rely on visual cues to convey meaning clearly and intuitively.

One of the first things I learned about was readability. Good UI communicates information at a glance, the player shouldn’t have to pause and think about where to look or what to press. It’s about creating clarity, ensuring that the most important information is immediately accessible. That’s where hierarchy comes in. In any interface, certain elements are more critical than others. For example, a health bar, ability cooldown, or key objective needs to stand out first, while secondary details can remain more subtle. It’s the same principle animators use when guiding the viewer’s eye through a frame, contrast, size, and movement direct attention naturally. In UI, these principles are applied through visual weight, colour, spacing, and placement, creating a clear path for the player to follow.

Another key principle is consistency, which builds familiarity and trust. A player quickly learns patterns: a button that opens a menu in one part of the game should behave the same way everywhere else. Inconsistent behaviour can be confusing or frustrating, breaking immersion just as much as inconsistent motion or visual storytelling can in animation. Maintaining consistency ensures that players feel confident navigating the interface, allowing them to focus on the game itself rather than learning how the controls work.

I also learned about user control, the idea that design should allow players to interact with the interface in a way that feels intuitive and responsive. Every button, slider, or icon should empower the player to make choices and guide their experience. A raised button invites pressing; a glowing border draws attention to interactivity; a toggle switch signals an on/off function. These subtle cues communicate meaning without words, giving players confidence in their actions and helping them feel in control of their experience.

Colour theory is another crucial tool in UI design. Beyond aesthetics, colour is used to communicate meaning instantly. Red can signal danger or damage, blue may represent calm or energy, green often indicates success or healing. Colour helps convey information without the need for text, creating a universal language that players can quickly understand. 

Even Overwatch, for instance, uses colour coding strategically throughout its UI. Each hero’s abilities and the overall fast-paced, competitive gameplay are reflected visually, from the vibrant ability icons to the dynamic match interface, ensuring that the UI complements the tone and pace of the game world.

All of these elements, clarity, consistency, and user control, come together to make UI feel “right.” When it works, it’s almost invisible: the player interacts with the game fluidly, without consciously thinking about the interface. But when it fails, it’s immediately noticeable and can break immersion. That was something I wanted to keep at the forefront of my mind while designing the UI for Melodies of the Grove. I didn’t just want to create something that looked good; I wanted an interface that felt natural, intuitive, and fully integrated into the world of the game, enhancing the player’s experience rather than distracting from it.

As I started sketching out ideas and layouts, I realised just how much planning goes into even the simplest of menus. That’s when I decided to start mapping everything out through flowcharts, a tool that helped me visualise how players would actually move through the interface from one screen to another.

In conclusion

That’s where I’ll leave this post for now. In the next entry, I’ll dive into the next stage of my UI journey: creating flowcharts and drafting the layout for Melodies of the Grove. I’ll explore how I mapped out the player’s journey through the interface, organised menus and screens, and began translating my ideas into tangible designs. It’s the step where planning meets creativity, and I’m excited to share how those early sketches and flowcharts started to bring the game’s UI to life.