Space Jump is a game set in the year 2525, a distant future where everything is destroyed and Earth no longer exists. A fraction of species survived and now they are accustomed to live in peace and harmony throughout the vastness of space due to all the technological advancements.
Our player is Ricky Voolers having the most dangerous professions in space and is determined to make it big. He is a space bounty hunter, who would do anything to go to the deep void of space to collect artifacts of certain value. The game has a variety of challenges and levels to gather rare and valuable collectibles from.
I was responsible for the complete UI art style and the final look of how the UI assets would feel.
I have been integrating the 2D UI Assets of Space Jump in Unity Game Engine and the following demo scene displays some of the features I tried to implement myself in order to give a better view to everyone involved in this project.
I chose the background space scene skybox which is definitely a part of the game as well, tried to include game objects revolving around the UI, implemented camera rotation around the UI elements, added hover states, and transition from one screen to another remaining within the same space was challenging. Although I am still working around to improve the overall transitions and make the micro-interactions even better, I will definitely be updating this to a better version.
This self exercise has been challenging in terms of adding animations within the engine and then making them work as I envisioned them to be. But as far as learning is concerned, it was really fun doing research over the internet and figuring out ways to achieve the desired result.
– Video recorded from Unity Game Engine –
– Audio Source: Pixabay (Cinematic Ambient 01 by Zen Man) –
Following are the static mockup images of the various UI elements from the game that I conceptualize and then did the art work for them as well:
Design thinking has been helping a lot recently in carrying out the design process and making decisions for any project. However, Space Jump UI was actually a solo thing and so here are a few of the steps I took in order to prepare the UI mockups:
Moodboard:
Reference collection for Space Jump was pretty clear from the early stages as the game itself needed to give the modern sci-fi look and feel. Sleek designs, neon, flashy elements, glows, vibrancy and futuristic ideas were gathered through initial research and the following moodboard was created to start with.
Typography:
Font: Advent Pro
The reason behind choosing this font was the modern sleek and clean look. The organized cuts in letters, spacing between them and a bit vertical orientation felt ideal for this case. Its maintains the legibility factor and gives a futuristic feel as well.
Color Palette:
Tones of blues and orange as the accent one. Color scheme for space theme is particularly quite strong within these palettes. When the game itself is not colorful and a serious tone to the story and gameplay makes the use of these color choices a safe option to show maturity in an overall look, as colors help raise various types of emotions.
Wireframes:
It was here at Big Immersive that I started on creating wireframes earlier for each project that I was working on. And so the low fidelity wireframes for Space Jump were done on paper with basic block layouts and screen flows. But since they were not documented at the time of making this game, the next step was where I started of with the design of high fidelity mockups shown above in the ‘UI Visual Art Mockups’ section.