Josh Farnaby - UI Designer
Novarail
Summary
As a part of my third year a t Teesside University, I would be tasked with creating a game of our own choosing in a team of 10. To keep the scope small, we would develop a endless runner about defending the company Novacorp's train from enemy damage and to keep it going for as long as possible. This game would also feature a pink and blue neonpunk art style with the player playing as a defence robot aboard the train.
Roles
UI Designer, Technical UI Designer, UI Animator and UI Artist.
Team Size
10
Project Type
University module.
Software
Figma, Unreal Engine 5 and Adobe Illustrator.
Duration
22 September 2024
15 January 2025
-
Skills
UI design, UI animation, UI visual scripting, Team communication and UI art.
Main Responsibilities
Challenges
- The first challenge I experienced on this project was in designing a dietetic HUD that made the player feel like they were a Novacorp defence robot.
Furthermore, another challenge I experienced was in figuring out how to learn the design software Figma.
In conclusion, the last challenge I faced on this project was in creating UI art to fit the neonpunk style.
Development Part 1
- After deciding the style of game, we wanted to make, I then began to research into different games as reference for how I should design the UI for our style of game.
As we were planning to have a dietetic HUD as a part of our experience, I researched into Doom and Halo as they matched our first-person style. Both of these titles also use dietetic panels in their HUD designs to increase immersion.
Furthermore, I researched into the movie Bullet Train as reference to how I could create the UI art for a neonpunk UI experience.
Development Part 2
- To continue, I began to work on using a software I wanted to learn with this project. This begin the design software Figma.
To help overcome the challenge of using this new software by first to starting this learning process with a simple user flow diagram to help me learn the fundamental shortcuts to use within this software. This is because a user flow diagram is made up of three simple parts: text, squares and arrows.
Once I finished plotting the user flow, I began to develop the HUD layouts. First on paper to get rough idea and then in Figma to be developed. To help aid immersion, I would add dietetic panels to the sides of the screens.
I would then block these layouts in Unreal Engine 5 while also developing its functionality. I continue, I repeated this process for the main menu, options menu, game over screen and pause menu.
Development Part 3
- Furthermore, once the main functionality is prototyped, I would then work on polishing the UI by adding some animations, starting with a splash screen. This would use another technical person's company logo and animation as a basis.
To add further clarity to the HUD being updated I would create an animation of each bar reacting to this change by increasing in size and changing colour temporally. I would also add an animation of the HUD moving onto the screen to further immersion.
To add a final bit of polish, I would then create some UI art for each screen within Adobe Illustrator. To help overcome the challenge of the neonpunk style, I only used the two main colours within that style's palette. These being a light blue and pink. To continue, I then implemented this art onto the UI screens.
Reflection
Most Proud of:
To begin, one part I am most proud of with this project was in my ability to develop UI art in Adobe Illustrator to match an existing neonpunk style.
Another part I am proud is my ability to develop a dietetic HUD system that allows the player to feel more immersed in the role of a defence robot.
Any Important Skills?
UI design,
UI animation,
UI visual scripting,
Team communication,
UI art implementation and
UI art.
Any Changes?
To begin, an improvement I would make would be to make it so the options menu would save it's settings between uses.
Another improvement I would make would be to make the different radar pointers stand out more with the blue overlay on top of them.
Final Product
Credits
The video was created by our team lead.
The Train UI and tutorial UI was made by another technical person with me only readjusting some of the train UI, adding custom buttons as well as costs counter.
The train health bar would also be made with the help of another technical person.
The company Logo and animation will be made by another technical person.