Castle Game Pre-Battle Screen  UI/UX Design

In this game, the player will encounter a boss and three monsters fighting alongside him after choosing the heroes to fight with.

Role

Tools

UI/UX Design

Procreate, Photoshop, Illustrator, Figma

About The Game

In this game, the player will encounter a boss and three monsters fighting alongside him after choosing the heroes to fight with.
The designed screen is the pre-battle screen. On this screen, the player; You can select, change, edit team members, learn about your enemy, compare yourself, choose to pass the battle automatically AUTO BATTLE, you can start the battle by pressing the BATTLE button.

Asset 52.png

First of all, roughly sketch the UX flow (in wireframe)
I work and see what will happen to me during the whole process. Thus, I can determine the colors, icons and general concept that I will use.

Group 5.png

Sketch

Group 3.png

Vector Illustration

Group 4.png

Light and Shadow Detail

After completing the general concept, colors and UX flow, I move on to the sketching phase of the icons. At this stage, I usually sketch first and then color and, if necessary, vectorize. Finally, I elaborate by adding light and shadows.

Aaand Other UI Assets

Asset 46.png
Asset 47.png
Asset 48.png
Asset 50.png
Asset 45.png
Asset 49.png