Hey people,

today I’m going to talk about an alternative UI design I made for our game, for an assignment.

I’ll show you my process in making a interactive menu interface with a coherent artsyle. First of I wanted it to be very organic and directly implement it in the tree of the menu. I’m going to show it to you so you have a clearer idea of what I mean.

Here it is:


I liked how it looked on the tree but immediately noticed that it’s kinda difficult to see the letters properly. If I had more time to perfect it, I would have tried harder with this one. The problem however is that I badly understood the assignment, thinking it was something else. Which left little time for me to experiment.  So I ended up throwing away that idea and focus on something more easy to read, basically clearer.

However I still focused on the idea that it should fit the art style of the game. I thought of making some kind of foreshadowing for the actual in-game directly on the menu, so I used the walls and the crystals in front of them to create a frame for the different buttons (start, exit etc.). By showing something in game before actually being in game is a way to invite the player to go in.

Then I needed to choose an appropriate font for it so I went for a triangular font to remind of the crystals in the game. In case you ever want to use the same font (it’s a free one), it’s called Merkur. I also used the same colors. I also designed it so that when the mouse hovers one of the buttons there is a glow around it.

I made a dark background so the font pops out nicely and as I wanted make it easily readable.

Here is it:UI menu


And here it is when it is actually implemented in the background:

menu in context UI

As you can see it looks consistent and in harmony with the background. So my expectations were met. I am overall satisfied with this design.

Thank you for reading! Hope you enjoyed.






Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s