Swords And Wards
Swords and Wards was a UI project created that I created throughout university with a theme of dark RPG similar to that of bloodborne and the diablo series.
Project length = 6 weeks
Behind The Scenes
I started by using Miro to gather modern RPG images that I later turned into wireframes to assess and understand what makes the UI in these games accessible and useful to the player following the 3U’s theory (Usability, Utility and User Experience). Once these specific genre images were gathered further research was done into damage numbers, spatial health bars and most importantly Celtic symbology to better fit the dark RPG setting. Once the UI setting was established, Iconography from games such as dark souls and dragon’s dogma were gathered with accessible yet medieval typography being chosen. The colour scheme of the font was created by creating a foundation within Adobe Color using colour schemes from my RPG research, this was later finetuned within Coolers to have dynamic and contrasting colours that were still accessible for people with various type of colour-blindness.
Information Architecture's (IA)
The next big step was creating these assets within photoshop, using 1024x1024 with 96 DPI templates with materials and smart filters to have a non-destructive workflow. Other tools involve creating shapes with the pen tool and converting these into custom Vector shapes that worked alongside layer effects. This would prove useful as if there were issues upon into unreal such as sizing or aliasing issues, these changes could be made to help improve the final result.
Now that the UI was ready to be created, IA’s (Information Architectures) were created and iterated to show how the UI would be constructed and communicate with each other. Low Sketches were produced to create a rough foundation followed by high fidelity mock-ups within Whimsical to have a documented and near finalised version of the UI that would help speed up the production whilst keeping consistency within the layout and avoiding deviations.
As for a last little polish, a bloodborne inspired city was created to present the final HUD using a game called townscaper that allows users to create cities which can then be exported as OBJ’s.
Assets
What I learnt
-
A proficient UI workflow for game ready UI assets
-
Additional understanding of tools within photoshop
-
Additional theory such as 3 click and accessibility
-
Further understanding of Layouts and UMG tools within Unreal
Skills used
-
Miro
-
Whimsical
-
Adobe Colour
-
Coolers
-
Photoshop
-
Unreal