Simple Main Menu Layout
in this project, I was assigned with creating the UI elements for the main title screen.
Using C#, dotween, event systems and pointer handlers, I have greyboxed my creative ideas and processes to illustrate to the team a visual depiction. I took the approach of using an interactive 3D scene and 2D graphics to have a hybrid user interface. Having the advantage of programming skills can force the interface to do what I need, to then visually convey that information to the rest of the team.
Using Photoshop, I have illustrated my process to communicate to the team via whiteboxing, placing UI elements in specific areas to adhere to user experience principles. I have added notes to give context on font types, layouts and interactive concepts.
Simple main title screen for UI prototyping and grey boxing. This is how I sketch out my ideas within both a 3D engine and Photoshop to show the team as clearly as possible my ideas.
Main title screen upon boot up of application. Simple and clean design of graphic placements.
Menu selection screen. UI placement of 3D elements in the scene using rule of thirds, utlizing the background 3D environment visually and placing UI to the side.
Visual white-boxing layout for Settings menu.
Visual white-boxing layout for Credits scene
A simple UI fade in and out for applied 2D objects within the scene.
UI hover events system being triggered via pointer click data.
UI transitional code in C#, manipulating the camera in the scene and fading out the associated title and 'press any button' queue.