Start Screen UI Design


Hello! My name is Sarah. One thing I worked on for our game “dreamscape.exe” was UI. I designed the title screen, the options menu and the pause menu. In this devlog, I’ll be taking you through my creative process and how I designed the UI to be pleasing to look at and cohesive with the gameplay.

Initially, the title screen was going to emulate a computer screen. With a dark green background and purple text, it felt reminiscent of a hacker's computer screen. It was inspired by one of the major mechanics in our game where the player uses the computer to complete puzzles. Unfortunately, I did not take screenshots of this earlier version, but in all honesty, they were not very impressive. 

However, this is when I got the idea for the glitching effects for the title. I found a variety of glitch fonts, but it didn’t feel right. I wanted it to glitch. So, I formed the idea to switch between two fonts to give the illusion of glitching. I did this simply by creating two text game objects and giving them a different font. Then, I wrote code to randomly activate one text game object and deactivate the other. This gives the illusion of the texts glitching. I was satisfied with the result and ended up using this effect on the options menu and the pause menu too.



Isabella, one of the members on our team, curated the itch page. She created the piece below for the cover. This inspired me further, so she shared it with me so I could use it as the background for the menu screens. The “VR world” in dreamscape.exe features heavy purple hues, which the title screen, options menu and pause menu would now share. I felt using Isabella's artwork as the background created a cohesive identity between the title screen and the game itself.


I then created the buttons for playing the game, opening the options menu and exiting the game. I originally chose a font called Retro Groove, but quickly came to the realisation it did not fit the style I had set for the title screen.


I settled on another font called American Captain. This blockier font suited the UI better than the previous, curvier font.


My next plan of action was the options menu. All I felt we needed was a volume slider, which was easy to code. Once this was implemented, I linked it up to the main menu and made sure everything was working so far. I used the same technique as before to emulate a glitch effect for the title of this menu.


Finally, I created the pause menu. This allows the player to pause time at any point in the game and change the volume, return to the main menu or return to the game. This originally paused the in-game time, but this disabled the glitch effect on the the menu title. So, I decided to turn off the timescale pausing; there would be no effect to the player with or without the pausing as there are no mechanics that rely on time. The code for this screen was simple too; using my experience in designing and coding UI in the past, I efficiently created the code and linked it to the scene.


I thoroughly enjoyed creating the UI for this project and I am satisfied with the result. Thank you for reading my devlog, and I hope you enjoy our game!


Font Resources: 

https://www.1001fonts.com/search.html?search=american+captain 

https://www.dafont.com/american-captain.font 

https://www.1001fonts.com/new-glitch-demo-font.html 

https://www.1001fonts.com/glitch-goblin-font.html 

Get dreamscape.exe

Leave a comment

Log in with itch.io to leave a comment.