What I've Learned
Reflecting and looking back —
When I initially thought of this project, I was in the middle of interviewing at a AAA game studio for a UI Artist Intern role. One of the questions I was asked in my first round of interviews was about my experience and familiarity with video game UI. I wanted to be transparent so told them I didn't have any, and most of my UI designing experience was for web products.
I had about a month until my next round of interviews since the studio was off for Christmas and New Years, and it was during those few weeks when I conceptualized, created, and finalized this project. While I was unfortunately rejected from that role, I learned a lot from the project and the interviewers were still very impressed by what I had created.
I hope to take on more game UI projects in the future, exploring more complex designs that challenge my skills and incorporate my illustration work in a more seamless and intentional way.
Thanks for reading!
Some of the key takeaways I learned about game UI:
consider experimenting with more color, & rely on drop shadow less for icons and elements
make icons match in style more (ex: backpack icon compared to other three icons in the ability wheel)
consider camera/character pov; how does this impact the HUD?
how can I implement more scenes and environments, or even more characters or mobs?
play with animations more, make some HUD elements animated/interactive with motion
consider doing some light user-testing for better clarity and a better UX.
Final Solution
Seeing it all come together —
Once I finished designing a variety of icons and interface elements, I sought feedback from friends and mentors to refine my work. Their insights helped me identify areas for improvement, from visual clarity to overall cohesion. Through multiple iterations, I fine-tuned every detail, ensuring that every element contributed to a seamless and visually engaging experience.
Finally, I brought everything together to craft the final Kimi no Kokoro user interface, a design that reflects the skills I developed throughout the process and the lessons I learned from experimenting, iterating, and refining my ideas.
the final solution
Ideating, designing, and even painting, each element with intention
Creating the building blocks —
After gathering all my references, I began creating each element of the HUD one by one, keeping in mind the overall style of the interface. In Figma, I experimented with vector shapes, refining them using the union, subtract, intersect, and exclude tools until I achieved the final icons I felt comfortable with. In Photoshop, I painted the art for both the mini-map and the character art.
hover to enlarge
How can I learn game UI by myself?
Taking baby steps —
Learning anything new from scratch can be daunting, but as I've grown as a designer and illustrator, I discovered that many creative fields share similar development processes; and, as the saying goes: walk before you run. Although designing a heads-up display (HUD) for a game was uncharted territory for me, I knew the first step to learning anything new starts with
gathering meaning references.
For this project, my initial inspiration came from the digital artist @asteroid_ill on Twitter, who enhances their illustrations by overlaying mock game UI elements to deepen the storytelling. Their work became my starting point for references.
Afterwards, I collected screenshots from well-known games, like Genshin Impact, Destiny, and Overwatch, with UI styles that aligned with my vision for Kimi no Kokoro, ensuring a strong foundation for my design process.
Kimi no Kokoro is an open world game concept, and personal project that combined both my illustration skills and UI design approach. Taking inspiration from well-known games, like Genshin Impact, Destiny, and Overwatch, this UI features a simple, beginner-friendly appearance, while accompanying the lighthearted art of the game.
The goal for this project was to comprehensively introduce myself to the video game UI development process, and get more familiar with creating UI assets that may be used in a real studio setting.
I painted the art, mini-map and character's head icon in Photoshop, while the ability icons and HUD were designed in Figma.
Dec 2023 - Jan 2024
project overview —
timeline —
Game UI design
Iconography
Illustration
skills —
Figma
Photoshop
tools —
> Kimi no Kokoro
Kimi no Kokoro Game UI Concept