GUI Draft Design

I’ve been working lately on designing a user interface for our game in development. It is as well a deliverable for our 2D2 class in our minor program as graphic design students. To design a user interface, you need to take into consideration the theme of your game, its type, the art style used in it, and also making things noticeable without affecting the visibility of the game.

The game I’m part of its development team is about a kid’s nightmare about school. Darkness is an essential element to convey the nightmarish atmosphere, hence, dark colors should then be used in most -if not all- of the components of our game. I spent so much time thinking about something dark that fits a bad dream and can be used to base my GUI design on; basically the game menus (main, pause, game over, etc.), while the answer was right in front of my eyes all the time with the simplest and most intuitive design relevant to the game theme; a BLACKBOARD. A blackboard is dark, is found in schools, and is used for writing information which means -for the game- it could be used for displaying leaderboard, tutorial info, and the title of the game, besides all other commands. Some additional advantages of using a blackboard for the GUI are that I don’t need symbols and complex designs to represent the commands in a fancy style, I just need instead to simply write them, I also now have a hypothetic style for writing those commands, which is that of a blackboard choke.

The blackboard idea is a result of a fortunate coincident. In the previous paragraph, it sounded like the blackboard came first, and then I thought it was a good idea to use a choke style for the button presentation. Well, it’s the total contrary. It is when I was just exploring with the built-in brushes I had in Photoshop that I discovered that the “Watercolor Brush on Dry” brush’s outcome looks like that of the blackboard choke. And that is how that idea came to my mind, which I invested in creating my user interface design.

At first, I started working on creating something simple, and presentable to my team to either get approval or denial for my idea, so I just created a draft design for what I had in mind taking into consideration color contrast and design consistency, and not caring about any unnecessary details; just show them how it should look like in terms of colors and harmony with the game style. I created a simple background similar to the one in-game using all three overlay colors used throughout the game (green, blue, and magenta), then used the choke brush to write the game title and the commands for the main menu. That draft was like a poster that assembled all my design ideas in one file; I used an ingame scene displaying the game score to present the main menu, and a different font for the title than for the main menu buttons to display the many design options. I wrote the title with a very simple handwriting font, while I tried to make some intuitive designs for the main menu, such as using the word “dream” instead of “play”, using some figures to present some letters; for instance, I drew the ‘O’ as a bubble referring to the bubble gun that is a power-up, the letter ‘D’ was like the “play” icon, and many other twists that can be seen in Fig1.

Fig1: First GUI+HUD Pitch Design


Once I received a green light from my team for the GUI draft, I went to create a more polished design but yet not final of the pause menu, where I used a screenshot from the game, and added a dark green layer with a low degree of transparency, and used my handwriting to write the menu commands since those complex designs didn’t get many votes; our code is to keep it simple. Fig2 displays the pause menu with some HUD elements that I will ignore for now to talk about them in details in my next blog.

Fig2: Pause Menu Concept


This was my short journey designing a concept for our game user interface that is currently being developed to be soon ready for implementation.


One thought on “GUI Draft Design

  1. Hi Mohamad!

    I think it is good that you discuss the thought process behind why you chose the blackboard. It is also fun to see some personal reflections behind it. The fact that you discuss how you were first inspired to make the font look like chalk and then decided to make the whole interface based off of that is good, and it is good that you explain how you made the texture look chalky.

    It could have been interesting to see why you chose to have the word “Dream” instead of “Play”, when you chose to keep words like “Options” and “Exit” that explain more about the certain action. Then in the pause menu you have decided not to write “Quit” or “Exit”, but instead “Wake up”. It would have been nice to see some kind of reflection over that.

    I kind of wonder why you decided to have the pictures a bit blurred. Was this a conscious choice of yours or was it a mistake?

    The whole blog post is overall very good and I like your work, good job with the graphics and good luck with the continuation of your game 😊


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