Josh Farnaby - UI Designer
Project Aurora
Summary
For this module, I was tasked with creating a project based around a job requirement within our relevant field's job listings. As I saw a lot of UI Designer job listings asking for a good understanding of colour theory, I decided to make a puzzle game around teaching children the importance of colour theory in design.
Roles
UI Designer, Technical UI Designer, UI Animator and UI Artist.
Team Size
1
Project Type
University module.
Software
Figma, Unreal Engine 5 and Adobe Illustrator.
Duration
22 September 2024
7 January 2025
-
Skills
UI design, UI visual scripting, UI animation and UI art.
Main Responsibilities
Challenges
- To begin, the first challenge I faced with this project was in finding a way to develop a type of puzzle that could be easily readjusted but also easy for a player to understand.
The second challenge I faced with this project was in learning how to use Adobe Illustrator, when having little experience in using it.
The last challenge I faced when developing this project was in creating more professional facing documentation in the form of the final report as well as the intro R & D brief.
Development Part 1
- Once I decided that my project would be related to teaching children colour theory, I began to research into different sources outside of job listings that I could use as a supporting reference for when I write my R & D brief to help me overcome the challenge of developing a professional document. This intro brief would be a way of justifying the importance of my project.
These previously mentioned sources would first include a research document that details a project similar to mine but with a focus of teaching additive colours. To continue, I found references to other educational games like Minecraft and Snipperclips using the UI Database.
To try and make the experience more intuitive to a younger audience, I decided on developing a dietetic computer like screens for the puzzles to sit on. As reference to this I would use the Unreal Engine documentation and the game Dead Space.
Development Part 2
- Furthermore, once I finished the brief, I become work on researching into colour theory. This took the form of me looking into the difference of additive and subtractive colours as well the meanings behind certain colours. This also included the importance of different types of colours like analogous colours in colour schemes.
In addition, I began designing the puzzle screen, first on paper and then in the digital software Figma using a z flow of and white space to highlight the importance of the puzzle question and answer space.
I would then block out this screen in engine but would leave out the drag and drop space due to time constraints. This flow of designing these screens would be continued for the main menu, options menu and colour theory book but these were also cut due to time constraints.
Development Part 3
- To continue, I began to work on developing a dietetic modular puzzle system to help overcome the challenge of ease of use. This would allow me to develop different puzzles by changing a few values.
To overcome the challenge of learning Adobe Illustrator for UI art, I began with simple shapes like a padlock to show locked puzzles. For more clarity for people with colour blindness, I added colour names with unique shapes for each colour.
In addition, I then took these pieces of UI art and develop then further using radial gradients to help draw attention to these important parts of the puzzle to then be implemented on the UI screens. For more clarity I added lights: Red = locked, blue = incomplete and green = complete. For the final part, I wrote up a report detailing the production including colour blindness accessibility.
Reflection
Most Proud of:
One part I am proud of is in my ability to use my colour theory research to design and create a modular puzzle system.
Another part I am proud of is my ability to adapt to using Adobe Illustrator to create my UI art.
Any Important Skills?
UI design,
UI animation,
UI visual scripting,
UI art implementation and
UI art.
Any Changes?
To start, the first improvement I would make would be to develop more UI art for the key puzzle screens.
The next improvement I would be to make a Figma prototype before going into production so I may understand the UI's functionality better beforehand.
Final Product
Credits
Additional references found in the R & D brief and final report, linked below under additional links.