Textbox/Gameplay Mockups
Bellow are 3 initial mockups, and then the final product that made it into the game.
Mockup 1
Mockup 2
Mockup 3
Final in-game screenshot
Gathering and Crafting Interface
When I joined the project, I was simply told that the player would be brewing potions in four vats (each for a different type of potion) from ingredients they collected.
I started will a rough sketch on my legal pad.
I ran the sketch by the other designers and take some feedback. Most common feedback is that the slots for ingredients that go into the vats looks weird and that there is no button to initialize mixing a potion, so I know those are things to consider. Now I have a rough idea of where elements will end up on the screen, so now I go into Figma and start blocking out shapes and colors.
Next, I look for ways to give character to these shapes. After looking inspiration in my steam library, I stumble upon the some of the UI for Frostpunk from 11 bit studios
I like the two thin stroke they put on their buttons and the small intricacies that give a vaguely Gothic vibe. I then add text with some fonts that were legible (good x-height) and fit thematically. Lastly I add a mix button with a simple potion icon to let players know how to initialize their potion making.
