UI Menu Workshop with Kirarin! 🌟 (Patreon)

Hello! Kirarin here!  🎃

Aside from the character portraits and cutscene illustrations, I’m also in change of the design department which includes of course the user interface! 

Today I’ll be presenting you the whole visual development process of the UI elements for LGTS. More specifically, I'll be focusing in our pause menu, the textbox and mini-games/puzzle interfaces!

1. Conceptualization and Context

Before conceptualizing the whole user interface of Little Goody Two Shoes, the first thing I take into account is to make sure everything is within the theme of the game, as with everything else of course. We have the main key themes of german fairy-tales, Arts and Crafts (as in the William Morris art movement), Ghibli and Disney as the main sources for the visual lexicon foundations of the game’s aesthetics, which must now also include the interface to ensure the continuity of the mood and atmosphere.

I didn’t want the user interface to feel like something that is just part of a system or a mere digital display and to achieve that, with the references mentioned earlier in mind, I decided to go for a detailed and decorative-heavy user interface. 

Since Little Goody Two Shoes’ visuals are very detail-heavy, I thought it’d be for the best to keep the UI simple and clean, but also with a clear identity in mind in order to send the player in a rich experience throughout the entire playthrough. We’d like the player to appreciate the UI just as much as every other visual component of the game and not as just a requirement for the game’s functionality, but also as a part of its world and context. 

I hope the UI and the differing visual choices that went into the various sub-menu designs will be able to surprise you! 

2. Pause Menu UI

As the most important interface element which gives the player access to all the various functions, it is essential to maintain its legibility and performance regardless of the visuals of its design. A confusing menu can not only become a hindrance to the player, it can also become a huge negative in a game’s overall atmosphere - we don’t want the players to dread having to use the pause menu each time!

Having said this, crossing these requirements with the aesthetic vision I had for it was a big challenge since functionality can easily compromise the ideal aesthetics and vice-versa. In the end, legibility and simplicity took priority.

This menu’s biggest source of inspiration, as well as the majority of the UI elements in the game, are wood carvings - specially those one would typically find in their granny’s country house furniture. Grapes and vines enveloping the edges (keeping Elise’s theme of grapes), flowering details and other ornaments framing the options were the elements I made sure to keep in order to give off a sense of mysticism. 

To achieve this lavish yet folkish mood, I crafted every asset traditionally using watercolors and gouache paints:

These separate resources are then scanned and cleaned digitally in order to be able to be used! The process is meticulous and time consuming, but the final effect is a very rewarding one to see! 

As you can see, the sun on the upper left corner went from its early stages in paper to be edited and animated. Of course, the moon will also have its own animation!

The three icons that fit into the wooden sockets and, in a left to right order, lead to the Character Relationships, Quests and Elise Status sub-menus.

Below are some of the assets used for this menu in their edited form ready to be used as assets and assembled into the game.

3. Textbox

For the textbox, the grapes motif and wood carvings are still present but this time in a different kind of fashion - more medieval-esque - to link to the old fairy-tales in which the games takes inspiration. This ends up framing the characters’ interactions and sets a more dreamy mood to the most mundane dialogues.

For the sake of allowing the rest of the artwork to shine, the textbox takes up space at the bottom and accommodates the character portraits in the layer between the wooden frame and the actual box. 

This way the character is both present in the map's environment, but is also detached enough to pull the player's attention towards the action!

The textbox itself is composed of a piece of old paper and a ribbon for that rustic feel!

4. Mini-Games & Puzzle interface


Finally we have our mini-game and puzzle interface! 

This is something we haven’t shown you guys before, but would like to share with everyone how the consistency of the visuals applies to every detail of the user interface! 

Since LGTS is also very much related to older anime, and the history of animation and games, we thought it would be charming to let a more modern element make an appearance. In this case, an arcade gives off an old atmosphere to the more interactive bits of the game as if it was made back in the 19th century! 

I incorporated the various motifs that make part of the wood carved UI and ended up with this modern yet antique element of an arcade!

The green screens will be filled with the specific mini-game's title above, the game itself in the center and character animations on the sides! 

The arcade, too, was first painted on paper using the same method as the pause menu and later edited digitally to achieve this effect as you can see below.

This is all for now, though there are more elements to the UI we haven’t discussed here this time such as the save & load menus, character status menu, the inventory, the glossary/diary section, world map, item get and even a radial menu we’ve been developing! 

Hopefully, we’ll be tackling all of these in a future workshop post and let you know what went into their development!

I hope you enjoyed this insight into the game’s UI and I hope you look forward to find out what more surprises Little Goody Two Shoes’ UI will include!

A huge thank you to all of you for your continuous monthly support!

See you next time! ✨
Kirarin