Colour the World

UI and UX design

Colour the World is my 4th Year Capstone Project at Sheridan College. I took on many roles in this project, including that of UI and UX design. Unfortunately, much of my work in this sector was cut from the final project due to time constraints, but I am still quite proud of the work I did.

You can see a video of the menus and HUD that I created here. If you would like to see a more detailed breakdown of what I did, please scroll down.

Menus

The design of the menus in the game are simple, but effective. I created the UI elements that would reflect our game’s artistic visual style. Before designing the UI, I did research both from academic resources and from other games, and compiled it all into a research report that can be read here.

I took alot of inspiration from the game Okami when designing the game’s UI. All of the UI elements have a messy “sketch-like” quality to them (though I was careful to make sure they were not too messy as to become unreadable). I created the UI elements using Clip Studio Paint.

While creating the menus for the game, I realized that the default buttons provided by Unreal did not support controller use. I did some research and found out how to make my own buttons from scratch that could be used by controllers.

I was able to get the pause menu fully implemented and working, with the exception of hooking up the audio sliders to the actual audio levels which was handled by our sound lead Gavin.

HUD

Early on, we decided that the game didn’t have much of a need for a HUD. In fact, there was a time where we felt we had no need for a HUD at all, but we decided that we should implement something that would keep track of how many collectibles the player has collected. I wanted to create something simple and unobtrusive, that would pop up on screen, show the player how many orbs they had, and then leave the screen again.

I was inspired by games such as Banjo-Kazooie, which have a similar HUD popup when the player collects one of the game’s many collectibles. The popup needed to be large enough that the player could understand how many collectibles they have, without it being too distracting. The black paint background to the popup was implemented for readability.

Other UX Work

When the game was still envisioned as a single player game, we wanted to have a way for players to be able to switch between the 3 primary colours easily. I created multiple mockups and a rapid prototype to showcase how one of these menu systems may work.

To begin, I brainstormed some ideas for possible UI interfaces. Three of these were based on the concept of “radial” menus, seen in games like Apex Legends, Genshin Impact, and most importantly Hue. The player holds down the menu button and makes a selection by holding in the direction of that selection, rather than selecting it precisely. The second are all more traditional real-time menus, where the player cycles through options with 2 keys/buttons (such as the left and right bumper on controller)

In the end, I decided to go further with the half-radial menu. I made a quick storyboard to showcase how the menu would work in a real in-game situation.

With a storyboard showcasing what I want the mechanic to look like in a bit more detail, I wanted to create a rapid prototype to see what it would look like in action. Below is the result: