Case Files

Wirerfames

Created low-fi wireframes whilst iterating on layout to explore structural options before finalising designs for implementation. I focused on layout, hierarchy, and usability when designing the UI, before taking the designs into engine for implementation.

Visual Style

I explored several colour palettes and styles, drawing on visual research to guide the direction.

I applied the 60/30/10 rule to structure colour usage and maintain a clear visual hierarchy: neutrals and primary form the majority of the UI kit, such as containers, buttons, backgrounds, while accent colours are used sparingly to draw attention to important actions and states.

I also considered contrast and saturation to ensure elements remained distinguishable and readable. 

UI and UI Animations

After playtesting based on a prototype, UI art was made using Figma and Photoshop. At this stage, UI animations were also implemented and made using UMG.

The main menu was designed to be 3d to create a thematic and visually engaging interface; the buttons and cork board background are textures I made in Photoshop, then applied into a 3d world-space UI and environment.

UI assets went through multiple rounds of iteration before landing on final design, colour contrast and values were kept in mind during development of assets so they did not feel washed out. 

UI Assets / UI Kit

UI Animations:

Final Implementation of all UI assets and gameplay: