Step-by-Step Process to Design a Game UI

1. Designing a wireframe

• To design a wireframe, select the type of game you want first & create it’s basic layout with black colored strokes only. Use complete black & white layout for the wireframe only.
• In the layout given below, we have first created a section for the navigation bar in which we have added important links along with the player’s name in same font style.

• Under that, the two side bars hold several other important information related to the players. In the right side bar, firstly the time remaining for the player will be shown & the boxes show the pegs of both the players that have been eliminated from the game. And a button to go Back is situated at the bottom of the right side bar.

• The left side bar has different options with a space for their icons at their side, such as Home, Resume, Pause and an option to mute the game’s volume. And a language option at the bottom.

• The final wireframe should look like this, with slight grayish background for images, all fonts & images aligned properly so that conversion into final design could take place only through a few clicks & it would not require any major changes.

2. Final Design

• For the final design, that is, converting the wireframe into a design would involve selecting a few options. First the color. A uniform color composition is important for the game as it decides the User interaction in the website.
• Here we have chosen green color and have tried to match up the remaining set of layouts with green color.

• At the place of icons, we have placed green color icons to maintain a uniformity of the website & added pegs for both the players on the chessboard, one black & the other one white.

• The eliminated pegs are placed in the side bar section in the right side where both the player’s names are specified along with their images.

• All over, the color composition is what the design should match up with each other.

Game designing is an integral part of designing on Figma. It involves creating multiple creative & interactive user interfaces which help in building of popular games such as Chess, Ludo, fighting games etc. In this article, we will learn a few tips to design gaming interfaces, in particular, Chess.