Designing and Development of UI
Designing and Development of UI
For this stage of my project, I continued developing my game concept, Melodies of the Grove, focusing on both creature design and user interface (UI) development. This phase was about refining the visual identity of the game, from the small, breathing details of my 64x64 creature sprite to the overall aesthetic of the menus and player interactions. The goal was to create a cohesive visual experience that communicates the world’s tone, mythology, and atmosphere through design.
Melodies of the Grove is inspired by Celtic storytelling traditions, where nature, magic, and music intertwine. My aim was to reflect those ideas visually, giving the game a sense of ancient beauty and handcrafted charm. I explored how colour, shape, language, and texture could reinforce these ideas — whether through the rhythmic breathing animation of the creature or the carved stone and gem motifs in the UI.
This stage of my creative process has been one of learning and experimentation. It taught me how worldbuilding doesn’t just come from narrative writing or animation, but also from how visual elements work together to tell a story. Through this blog, I’ll reflect on my process, challenges, and discoveries from designing the creature for gameplay use to developing the UI assets that bring the world of Melodies of the Grove to life.
Initially, I began designing traditional, clean, and modern-style buttons, following common UI conventions. However, I quickly realised that these early drafts didn’t align with the Celtic-inspired narrative of the game. The sleek shapes and digital-like shine felt out of place in a world that was meant to feel organic, ancient, and mystical.
(This is what the origional design look like;)
After reflecting on this disconnect, I re-evaluated my approach and decided to embrace a medieval aesthetic that would complement the tone of Melodies of the Grove. The new design direction drew on stone and gem motifs, evoking the feeling of carved relics, enchanted stones, and mystical ruins. These shapes and textures instantly grounded the UI in the world’s mythology.
I started experimenting with stone-carved menu buttons for the main menu screen, incorporating subtle cracks, engraved patterns, and gem inlays that caught the light. The gems represented the elemental connection within the story, symbolising the harmony between magic, music, and nature. Each gem and stone design reflected a sense of weight and history, something handcrafted rather than mechanical. This shift made the UI feel much more authentic to the world I was building.
The colour palette also evolved alongside this redesign. I kept the warm tones from my earlier creature designs, reds, oranges, and yellows, but blended them with earthy neutrals like stone grey and muted browns. This combination helped balance warmth with groundedness. The gems introduced cooler accents, such as deep blues and forest greens, which contrasted nicely with the fiery tones from the creature designs, creating a more balanced and immersive aesthetic.
Creating the Assets in Aseprite
Designing these medieval-inspired assets in Aseprite was both a technical and creative process. I relied heavily on pixel shading and easing techniques to simulate the texture of carved stone while maintaining clarity at small resolutions. Each pixel placement mattered; I had to think carefully about how light, shadow, and edge definition could create the illusion of weight and depth without overwhelming the image.
I went through multiple iterations of button designs, experimenting with different levels of contrast, saturation, and brightness to ensure the UI remained readable against various background colours. Testing these combinations helped me understand how a design might shift depending on lighting or environment within the game. It also taught me that UI design is about more than aesthetics; it’s about creating assets that feel functional, responsive, and visually consistent across contexts.
The gem detailing quickly became my favourite part of the process. Using subtle gradients, highlights, and clusters of lighter pixels, I could give the impression of reflective surfaces and inner glow within the pixel-art limitations. This part of the work reminded me of my earlier experience creating Coofillo, since both tasks required balancing fine detail with readability. The challenge was finding that middle ground, making the gems feel intricate and magical while ensuring the shapes remained instantly recognisable at a glance.
The main menu buttons, such as Play and Exit, were designed as gemstones set into stone frames. I wanted these to feel special, like enchanted relics that the player interacts with to enter or leave the game’s world. The Play button, for instance, glows with a warm amber hue, symbolising energy and life, while the Exit button features a deeper red tone, evoking fire fading into embers. Designing these gem buttons made me think about how even small UI elements could reflect the game’s worldbuilding and emotional tone. Pressing them shouldn’t feel like clicking a digital button; it should feel like touching a piece of the game’s mythology.
Initially, I planned to animate gentle light glows and flickers in some of the gem icons to enhance the sense of magic and liveliness. These small touches would have added movement and atmosphere, making the UI feel as though it pulsed with the same mystical energy that powers the world of Melodies of the Grove. Unfortunately, I didn’t have enough time to implement these animations, and I decided to focus on refining the still versions instead. In the end, the simpler approach actually complemented the game’s aesthetic; the static gems felt like enchanted relics, quietly glowing with latent power rather than flashing with constant motion.
This stage also taught me an important lesson about creative restraint and time management. It’s easy to get caught up in adding more polish, more effects, or more movement, especially when you’re inspired by your own worldbuilding. But sometimes simplicity carries more strength. By focusing on texture, shape, and colour harmony, I managed to make the UI look cohesive and grounded without overcomplicating the design. The final gem buttons captured the Celtic-inspired tone I wanted while maintaining functionality and clarity.
Visual Cohesion and Functionality
One of my main goals was visual cohesion, ensuring that the UI felt like a natural extension of the game’s art, not a separate overlay. The shift from modern to Celtic-inspired elements created a stronger sense of worldbuilding consistency. The medieval tones and textures blended seamlessly with the environments, making the player feel more immersed.
This redesign also helped me think more deeply about functionality through atmosphere. I realised that good UI design doesn’t just present information; it communicates emotion and identity. The stone and gem buttons, for example, didn’t just look stylistically appropriate; they made the act of selecting a menu option feel tactile and deliberate, as if the player was interacting with relics or ancient instruments.
When testing the layout in Aseprite, I paid close attention to spacing and readability. The main menu buttons became my primary test area. I adjusted the size and spacing to ensure they were both visually striking and easy to navigate. I used soft lighting and shadowing to create depth, giving the impression of buttons that physically press inward when selected. These subtle feedback cues help make the interface feel interactive and grounded.
Finalising the UI Elements
After completing the main menu buttons, I moved on to designing the UI boxes and in-game interface elements for text, combat states, and player interactions. To maintain visual consistency across all assets, I created two distinct styles of UI boxes using simple materials.
The first style was the rock-based UI boxes, designed to resemble carved stone slabs. These were primarily used for combat messages and dialogue text, giving narrative and combat-related text a grounded, ancient feel. Subtle cracks and shading added depth, making it appear as though the text was etched into real stone. The rock boxes helped reinforce the mystical, natural aspect of the world, linking the interface to the environments and lore of the game.
The second style was the plain metal UI boxes, accented with a single blue gem, which were used for states, inventory screens, and creature selection. The simplicity of the metal texture provided a clean, functional background for important gameplay information, while the blue gem acted as a focal point to indicate selection or highlight key information. This minimalist approach made functional elements clear and readable, while still giving a subtle touch of magical or mystical flair.
By separating the rock and metal styles according to function, players can easily distinguish between narrative content and gameplay-critical information. Both styles were carefully designed in Aseprite, with attention to shading, contrast, and readability at small resolutions, ensuring clarity while maintaining aesthetic cohesion.
Even though the metal boxes were plain, the combination with the blue gem gave them a distinct purpose, while the rock boxes maintained the organic, Celtic-inspired tone. Seeing all the UI elements together, from the gem main menu buttons to the rock and metal boxes- helped me understand how texture, colour, and material can communicate both function and story, making the interface a meaningful part of the game world.
Comments
Post a Comment