My name is Adam and this blogpost is going to be about what I have been doing this week. Just quickly about me; I am the producer and I’m also responsible for the marketing and the PR. I am also a part of the design team, working with stuff as background visuals, UI design and gameplay feedback. I am currently doing my third year at Uppsala University in Game design and computer graphics! But enough about me.
I have been experimenting with the UI design for this week. Quickly, what is an UI? UI means “User Interface” and is everything in the scene which you can interact with. For exampel an inventory system, a menu button, etc. This has been quite the challenge. We are trying to deliver an aesthetic with our game, it is supposed to be a relaxing experience throughout the game, and we really want to immerse the player through the entire game session. Nothing in the game should be distracting in the sense that you are losing out on the immersive experience.
This is where the UI gets tricky. It has to fit within the game of course, but it also has to fit the aesthetic. I dont want the UI to break immersion. I have been experimenting for a couple of days with how I can make a visually appealing UI, that is easy on the eyes, clean-looking and not immersive-breaking.
This is an example of what I am trying to avoid.
First of all, it has a very unnatural black and sharp border that just does not fit within the game. A big white square in the middle also just eliminates most of the background, which is immersive breaking in a way too. I want the UI to stand out from the game, but also merge nicely and softly with the background, even when the UI consumes most of the screen.
This is what I got so far, and in terms of immersion, I think I am definitely on the right track!
So the idea here is to click on the cherry blossom tree for example, and that leads to all the different trees you got in your inventory. The same goes for the stones and bushes. The background is still there, very visible but I still managed to make the UI stand out. I simply added a blur to the game when the inventory is active, which puts the UI in focus, but still keeps the scene active visually.
The tree, stone and bush is simply a placeholder and not final. It looks kind of weird, since the bush is an actual photographed bush, and the stone and tree painted. But this is just for me to see how the UI looks with different objects.
I am sorry for the long rant, it is hard to keep it short when you are trying to get everything out of your head into text. I hope you managed to get through it!
Thank you for reading! If you have any questions or pointers, if you think I am wrong in any way, please drop a comment and let me know, it helps a ton, and I always appreciate feedback!