My UI design for "Change our Fate" includes the main menu, screen mock ups and interaction icons. The UI for this game is relatively simple because the main experience is taken from the narrative and the gameplay. There is little action, or ways for the user to interact with the app, other than player movement and the decision making mechanics.
Main menu design
First I started with some experiments for what content I wanted on screen and in what composition. And decided whether I wanted to show the logo on the main screen. I decided it would be best that when the player loads up the game, the first thing they see is the game logo and the main game menu will load on afterwards. This looks a lot smarter. The black contrasts really well against the blue and white text as well as the game logo.
For the content I wanted the player to be welcomed with a message and given a brief idea of what was going to happen in the game. The text reads "Can you save our changing world from the destruction of climate change or will you fail to do the right thing and contribute to the chaos". The play, setting and credits tabs are self explanatory but I also want the game to provide the user with further link and information they can follow online to learn more about what they can do in the fight against climate change. This information will be found under the "Do more to help" option on the main menu.
These concepts work well on their own but I further experimented with different textured background rather than it being completely black.
I used different material brushes in blender to find a background that supported the game theme and provided a more interesting visual experience without risking cluttering or overstimulation.
The backgrounds that met these requirements were the wasteland effect and smoggy clouds I created. The others drew too much attention away from the text.
Here are the finished designs for the loading screen and main menu:
Objectives/Inventory
The objective icon gives the player access to the list of items that they need to collect and allows them to keep track of what they have already picked up. I wanted the design of the objective/inventory screen to be consistent with the loading and main menu screens.
The objectives will always be available as shown above so the player can refer to the list and make sure they are meeting those objectives. The inventory will present the items that the player has already collected but not show their value. However the total points that they have earned from collecting those items will be presented so they have a general idea of their combined value. This acts as a clue that will assist the players in choosing/trading the items that they collect.
Icons and playing screen UI
This concept below shows the UI that will always be shown on screen as well as the design for the NPC interactive dialogue.
The UI includes the movement icon which will be swiped on up, down, left right to move the player on screen and over/under obstacles. The pocket knife icon in the lower right corner is used for on screen interaction to carry out tasks such as setting wildlife free and clearing obstacles. In the top right corner are two Icons. The one on the left is used to access the objectives and inventory. The button to the right of it will be used to access the main menu.
As the game is going to be played on mobile devices which have smaller screens, smaller game details such as interface icons must be simple as any detail will be lost/not visible to the user.
Here is the idea development for those icons:
The priority for each icon was simplicity. Each icon must also be intuitive and clear of purpose so players can easily navigate the game.