UI playground is a Personal project where I explore new creative ideas and develop personal works by drawing inspiration from intriguing screens discovered while playing various video games, combining them with my skills and imagination.
:Rules
1. Complete the visual within a short period of 1 to 10 days.
2. Experiment with just one or two elements from the original.
3. Have fun with it.
2. Experiment with just one or two elements from the original.
3. Have fun with it.
*All images, except for those created by me, are copyrighted by ea and their respective owners.
EA Sports FC 25
Squad Battle UI
01 visual Research
Before starting my work, I conduct visual research because a game consists of countless screens and assets. I capture various screens to analyze the visual hierarchy and style of FC 25. Eventually, I discovered a few intriguing screens that inspired me to experiment further.
The image below was my choice for this exploration. I admire its clean aesthetic and well-structured layout; however, it has a subtle distinction compared to the more visually dynamic screens.
02 low fidelity concept
I use Photoshop and Procreate to begin my sketches. I usually focus on a specific style or materials that align with the original concept. However, sometimes happy accidents occur, and that's one of the joys of doing this kind of UI exploration.
03 Hi-fidelity Mock up
The next step is diving into C4D or other 3D tools. In this exploration, I focused on maximizing my 3D skills. Achieving the full potential of 3D often requires going through multiple trials and errors. Even enabling a specific render option can dramatically change the overall mood. I also incorporate other software, like Adobe Illustrator, into my workflow. At times, I need to let go of what I've created so far and start from scratch to achieve a better result.
C4D viewport and test renders
04 Final Results
Most of the work takes place in 3D realm, but I finalize everything in Photoshop since it's the most versatile and convenient tool for me.
SBC Icon
01 visual Research
This time, I faced an another challenge with the SBC screen. While players can explore a various challenges in this content, the icon all look too similar in shape, making it difficult to distinguish each other. To address this, I decided to experiment with a new shape language to make this screen feel more dynamic and visually engaging.
02 low fidelity concept
Once again, I used Photoshop and Procreate to bring my ideas to life. Initially, creating new shape language seemed straightforward, but I quickly realized it was more challenging than expected. The shapes needed to be clear, concise, and adaptable to a variety of options, requiring careful consideration and refinement.
03 Hi-fidelity Mock up
I aimed to create more fun and engaging icon visuals. To achieve this, I explored changes not only in shape but also in angle, color, and materials, taking a holistic approach to re-imagine the design.
04 Final Results
Application
BALLOn D'or style frame
01 visual Research
FC 25 features many stunning card back designs. Sometimes I can imagine the world beyond the frame. So I wanted to explore creating a style frame using this Ballon d'Or card back concept.
02 low fidelity concept
I used Photoshop and Procreate to conceptualize the visuals and gather ideas for the design. Drawing is one of the fastest ways to crystallize my ideas and bring them to life.
03 Hi-fidelity Mock up
While working on C4D, I had numerous options to consider. In this case, lighting was one of the key elements in setting the right mood for the visual. I focused on expressing the shape language of the trophy within the scene to enhance its visual impact.
04 Final Results
... Will update more
