Arranging the Final UI Menu Design Task

The UI Simple Design in Game Project:

The Programmer team member gave me a task to design all the Menu UI in unreal engine so that I can migrate those files and transport them to the Original Files. Here are their Developments and Simple Designs before I can redesign them:

UI Options Menu Simple Design Image

UI Main Menu Simple Design Image

UI Game Paused Simple Design Image

Ways to Design the Buttons in Unreal Engine:

The process for designing buttons is different from dragging images and changing anchor points, the first step was choosing the button and expanding the Style and Appearance to show three styles and:

Drag and place the Chosen Image(Sprite) Asset in those three Styles**(Normal, Hover, Pressed)**
Remove the Outline Colours, Stroke Lines and settings in all three Styles, make sure their colour is transparent in Outline Settings
In the Hover and Pressed Image Settings, change their Tint Colours that are different each other

All The Editing Result for the UI Design:

The process for dragging them to the Blueprint Design was simple, using their anchor points to place the Sprite Images in the right position inside the Canvas Panel. These are the 2 hours result of designing the whole Menu and Options Menu for the Game Project:

Editing Buttons with Three Styles and Colours Process Image

UI Main Menu with Three Buttons Design Image

UI Options Menu with Seven Buttons Design Image

PlayTesting Result of UI Options Menu on Screen Image

Final Workshop After 21st GAD Lesson Day Task