“Forest Story” Home Screen UI Designs

This was a project for a digital design class where we were tasked to design two different home screen user interfaces for a fictional game of our choosing, making sure to focus on usability of the UI as well as how well it fits the theme of the game. We were provided several different images to represent our game, and to build off that image to design our UI.

I chose an image that gave off cute fantasy vibes, depicting a path through a pine forest accompanied by cherry blossoms, ivy, foxes, glowing lamps, and mountains in the background. It gave me a very mystical and adventurous feeling, while giving off a very cute and relaxing aesthetic, similar to games like Stardew Valley or even Minecraft. So, I took some inspiration in my designs from Stardew Valley’s UI in particular.

For the name of my fictional game, I went with a simple, cozy name to follow in the footsteps of the “cozy gaming” genre, like Animal Crossing, Story of Seasons, and Stardew Valley. I went simply with “Forest Story” as my title, to suggest more of a cozy adventure game.

For the designs, I loved the calming, woodsy look of the buttons made to look like signs on Stardew Valley’s home screen and overall UI in-game, so I wanted to do something similar for one of my designs. I chose a hamburger-style menu for both designs, although looking back I may have wanted to try out a horizontal menu for one of them for comparison-sake, which is something I will definitely think about for future projects. For my other design, I wanted to go with a more simplified look for the main menu to contrast my Stardew-inspired design.

For the wooden button design, my initial design had dark, transparent bars on each side of the menu, with my wooden buttons and title contained in the middle, and a bar on the bottom containing copywrite and current version information. I wanted the player to have to focus less on the busy background, and wanted the main menu to feel like it had a proper “place” on the home screen, and wasn’t just slapped onto a background without purpose. I used very simple, thin text on top of the wooden buttons I had created, and made them a darker wood color to give them the feeling that the words were etched into the wood itself.

Meanwhile, for my simple design, I opted to move the menu to one side instead of centered, moving the title to the opposite side and adding the current version information to the bottom corner without the need for the black bar. I placed my menu on top of a transparent background, lighter than the transparent bars on my other menu, and feathered it to incorporate it into the background better. My menu itself was very basic, with room for a few extra options for the player to navigate to, such as the “Credits” and “Send Feedback” options that many indie developers opt to include in their game options.

When receiving feedback and looking back on these initial designs, I found that the dark bars on either side of my first design were too harsh, and actually had the opposite effect of distracting the player from the menu in the middle. Meanwhile, for my second design, the menu felt like it blended a little too well into the background and needed something to offset it from everything else.

Thus, I finalized my main menu designs and implemented the feedback I had received on the menus. For my first menu, I changed the sidebars to be diagonal in order to not follow the shape of the main menu as closely to attempt to lead the player’s eye back to the middle of the screen and not away from it. I also changed the color and added two different bars, one pastel yellow and one pastel pink, to fit the colors found in the background, but not blend in with the dominant green of the illustration. I also lowered the transparency for blending purposes as well. Finally, I thickened up the words on the buttons slightly to increase user clarity.

For my second menu design, I added white padding around the highlight of the buttons to separate the green better from the background. I also added a thicker drop shadow with less feathering for the text of the buttons, again to increase clarity and separate it from the image behind it. Finally, in order to add more interest in my title, I added a cute, vine-like logo beneath the title to help it stand out more.

Looking back, there is definitely more that could be changed about these title screens to help increase clarity and user interest, but I am extremely happy with how they came out as a first attempt at UI design.