Repopulation Project

What is Repopulation Project

Repopulation Project is a exploration-focused survival game in which the player discovers the world only through the game interface.

The pillars of the game are:

Explore to discover
Imagine the world
The User Interface is the User Experience

Many times the UI of video games is neglected by both developers and players, giving it less importance than it deserves.

Players only live the experience through the UI.

Players only have to use their imagination.

The UI-UX design process

Searching for references

The game does not need a UI navigation flowchart because I decided to use the HUD as the only UI in the game in order to make the whole game more diegetic, and for this reason any option including resetting the game data would have been present in the HUD.

So I directly started the design from the references study. I searched the more similar and fitting game, and the game I took as reference is: In Other Waters - By Jump Over The Age.

In Other Waters is not the only reference I used to design the user interface of Repopulation Project, there are many other references that fit the setting, atmosphere or style of game, such as Redout, Forza Horizon or SIGNALIS; but In Other Waters is the most suitable and therefore the one I used the most to design my user interface.

In Other Waters - By Jump Over The Age

SIGNALIS - By Rose-engine

Forza Horizon 5 - By Playground Games

Redout 2 - By 34BigThings

Design study

In this part I will show you the results of my studies done on design references, and how I applied these studies together with my previous design knowledge developed through past experience and research.

I will then go over the three main steps of my studies of references and talk about what choices they led me to make.

This phase can be divided into 3 main sub-phases:

Study of the style and hierarchy of fonts
Study of the space used and the weight of the colours
Study of the color palette

Space and color weight

The part of analysing the space used and the weight of the colours of the UIs in my references was the first step of the study phase.

My goal was to create a simple, readable, interactive and elegant interface, but one that would be the core of the game and would cover every function and mechanic of the game. Consequently, the most useful information I gleaned from this part of the study was not how much space is used, but how the references use the space.

The more important part was the use of the use of negative space. By means of areas of negative space within the interface, individual elements of the interface would be composed.

As far as the weight of the colours in the UI was concerned, I had several choices in front of me for the choice of the color palette scheme, the easiest one to manage was to use a classic triad scheme with a percentage weight of 60, 30, 10. The final decision, however, went to a riskier choice of selecting a 75, 15, 10 weight scheme.

Final decisions

The result of the research was the choice to use only 3 colours in order to have a simpler management of these, so as to play with a very simple contrasting palette as opposed to a harlequin colour palette. The triade of colours will be applied to the project with a scheme of percentege of 75% Main colour, 15% Contrast colour, 10% Secondary colour.

As regards how to use the colors on the space, the choice was the following: 2 of the colors of the triad would be used by the UI elements, therefore the UI space for one color and the other elements such as texts for the second, while the the third color would have been inserted through the negative space of the UI, and therefore the color of the game map would have been one of the very elements of the game interface.

Font style and hierarchy

In addition to the study of references, I used the rules of typographic hierarchy for the design and study of the font hierarchy. Using the various rules such as contrast, scale and colour, I searched for fonts that conveyed the mood and were consistent with the artistic style of the project.

Once the fonts were chosen, I went on to build a hierarchy dividing the types of text into five categories, each with specific characteristics and fonts.

Title
Subtitle
Header
Normal text
Flavor text

Colour Palette

Studying the color palette was a critical part of the design process. I want to create a palette that fits the setting of the game and that fits the style that has been decided to apply to the project.

The idea was to create two main colour palettes, one for day and one for night, their colors designed to give an idea of the real environment in which the game takes place and so the flow of time. Both of which use only three colors to cover different functions following the previeus studies.

This means creating two color palettes that are not only beautiful but contrast so that one feels like day and the other feels like night.

To reach this objective I searched film references that are set in the desert, analyzing their colours palette to understand which colour give the better feel.

My principal refereces to do this are a cartoon film and a live action film, these are:

Dune (Denis Villeneuve, 2021)

Aladdin (Disney, 1992)

After analysing video game references and those of other media, I realised that in order to achieve the feel and immersion I wanted, I could not use the classic triadic colour palette contrast scheme. I therefore decided to develop a custom colour palette scheme by applying different theories and bases of colour contrast schemes.

After spending a lot of time studying my custom colour palette scheme, I reached a good result that I was satisfied with, the colour palettes will follow this scheme:

The first color is the most present on the screen and is used for the representation of the game map, the second color is a color of extreme contrast with the first which is used for the backgrounds of the HUD and is the second most present, the third color is used for most of the lettering and is a color with a very high value which is in contrast with the second color.

Creating Colour Palettes

I decided to create a box on which I can select the different colours that make up a palette, and the frame automatically applies the colours to the In other waters UI, so that I can test various combinations in less time and see them applied with the right percentage of colours.

Thanks to this, I was able to speed up the testing of colour palettes, allowing me to complete the work in a short time.

This is the final version for the main colour palette of the game that with its colours give a sense of elegants and simulate with the background colour the desolated desert setting.

Thanks to the search for references on Dune and Aladdin, the production of the night colour palette did not take long. The following is the result:

Page updated

Google Sites

Report abuse