UI&UX
Select a project above to see my design process.
More of my work
More of my work
More of my work
My projects...
Doing some graphic design for esport ecosystems taught about readability and ergonomy. My objective is to provide essential informations to the player, with an art style that has enjoyable feedbacks and following an Art direction.
Here are some works I have realized about the UI, using Unreal Engine 5, Unity and Adobe XD.
These projects contain some designs from other games that I have decided to rework on my spare time. For these ones, I tried to respect the original Art direction and improve the User Experience or the UI Art.
creativity
creativity
creativity
The crew 2
A personal project, Feb. 2022
On my spare time, I decided to rework some parts of the interface of The Crew 2, I got interested in the Summit interface and the event tickets. You will find below the design process I have been through to realize them. Most of the assets displayed were designed by me, following the game's Art Direction. Don't hesitate to check the current game interface of
The Crew 2 to see what I have reworked, you will have access to it down below.
1. The Summit
A short video introducing my design for the Summit interface and the assets I have realized.
Analyzing
the original Summit menu was the first step in order to improve its design.
I first focused on readability, by designing a different disposition of the activities and skills. I chose to add more space between them to focus better on each information given by the activity.
My reworked version of the Summit's wireframe
Then, for the design of the activities I wanted to display the rewards the players could get as it was one of the main motivations for the players to complete a race.
Skill logo
Reward
Race details
Reworked version
Original version
Concerning the weather conditions of each race, I chose to move them alongside the constraints in order to
regroup every details about the race at the same place, following the Gestalt's law of proximity.
Weather conditions
Reworked version
Original version
For the ranking leaderboard I wanted to insist on some informations, like the current rank of the player and the rewards he could get for each rank.
To increase the readibility I also moved the remaining days right next to the date of the event.
End of the event
Player rank
Rank points updated
with the leaderboard
Displays the rank rewards
Reworked version
Original version
Finally, since my version of the Summit allows the player to slide horizontaly to check the other activities, I wanted to have a static reference to the ranking evolution of the player at the top of the screen.
Current rank
Previous rank
Designing
a reworked interface by creating assets that follow the Art Direction.
The objective for me was to be able to create my interface with a similar look to The Crew 2. So I used the original color palette and created my own UI assets.
Reworked version with UI art
The Summits are weekly events in the game, each week is a new theme. So in order to have a coherent overall design I quickly made the cover of the event taking some inspiration from the previous in-game Summits.
The design I made for my Summit Event
Then I recreated the Skills logo of each race by respecting their guidelines (paint drips, folded paper, vectors...); as well as the background for every activities. I have was inspired by the original designs to make the following backgrounds:
Street Race logo
Street Race skill BG
Street Race BG
Freestyle logo
Freestyle skill BG
Freestyle BG
Pro Racing
Pro Racing skill BG
Off-road BG
It allowed me to make the following designs using the logos from the game:
Rally Raid logo from The Crew 2
Monster Truck logo from The Crew 2
Street Race logo from The Crew 2
The designs I have made for the activities
2. The event tickets
Street Race rework
Freestyle rework
Improving
the current tickets of the game also required an analysis of their designs.
I first tried to find what could be improved from the current design, and I thought about applying the Gestalt's proximity law by separating the Race informations from the rewards.
Event ticket iteration
Once done with the overall design, I noted that it wasn't actually obvious to notice wich event ticket the player was selecting. So I decided to add a bit of motion when the player selects a ticket.
Event ticket wireframe
The higher motion highlights the title and the type of Race. It acts as a feedback when the controller/mouse of the player hovers it.
Street race rework
Freestyle race rework
Finally, I started to design the background of each ticket following the art direction of the game. However I still used the game logo of the game.
Street race logo
Freestyle race logo
Street race BG
Freestyle race BG
It allowed me to make the following designs using the logos from the game:
Street race ticket
Freestyle race ticket
Dinos VS Aliens
A group project, Jan. 2021
During my 2nd year of Game design Bachelor I have realized a mobile game with a team of 3 other students. I was mostly in charge of the UI design, following the wireframe of my teammate for the in-game interface. It was my first experience as a UI designer on a game, many things could have been done differently and improved in many ways. However, it was a good experience on mobile and I learned a lot from it. The assets and interfaces you will see below were done by me, but I will also precise it when I'll join the wireframe designed by my teammate.
1. The shop
The trailer I have realized for the project using Adobe Premiere Pro, and Photoshop to make the visual assets
The logo
I designed for the game was supposed to embody the main elements from our concept: Dinosaurs and Aliens. So I try to emphasize their opposition through those contrasting styles in the logo.
Designing
the shop interface was a first way to explore the mobile format.
We first created some wireframes of the shop, and tried to improve them as much as we can.
1st iteration by my teammate
2nd iteration by my teammate
3rd iteration by me
2. The in-game UI
The game
interface followed a wireframe from one of my teammates. I implemented it in the game and designed some assets for the UI.
Gameplay from Dinos VS Aliens
These were the wireframes I was given to work on the in-game UI:
Preparation phase
And this is what I have made out of these previous wireframes:
Preparation phase
During enemy wave
During enemy wave
Building interface
Building interface
Lessons learned
were huge and if I had to re-do it again I would change plenty of design choices and follow the Gestalt laws of proximity and similarity way more frequently. Moreover, I realized afterward that the UI wasn't as readable as we thought, and the UI art could be improved. However, as my first game project as a UI designer, it improved my conception of gaming UI and taught me the importance of iterations.
Slammin Legends
A graduating project, Oct. 2021
As for my graduating project, I worked in a group on Slammin Legends as the project manager and UI designer of a team of 28 students. Working on the UI was challenging because of I needed to convey every crucial informations through the UI while keeping it clear and readable. But it allowed me to work closely on the signs and feedbacks to support my design intentions and create a better experience. I really enjoy working on this project as a UI designer, I was able to learn a lot and explore diverse methods of design.
I was mainly inspired by the UI of Overwatch for its disposition that provides a clear sight and just enough information to the players. For the visual assets I was inspired by Apex Legends interface, more specifically for the ability logos.
1. The game logo
Create
the logo of the game required different iterations and needed to match with our Artistic Direction ("A. D").
We explored multiple styles at the beginning of the project, but we finally decided to go along with the retro-futuristic 70's vibe.
Slammin Legends logo I have designed
I wanted to design a logo that could embody the sporty and competitive values of our game. However the Art Direction changed a few time before we made our final decision, hence I had to design various logos.
Power Smash Ball 1st iteration
Power Smash Ball 2nd iteration
Slammin Legends iteration
At the beginning, the game was set to be a competitive game taking place in a futuristic environment. The color palette was pretty classic, and it was using the Sport League design codes.
My iterations for Power Smash Ball logo
2. The Artistic Direction
Defining
the Artistic Direction was an important step to do in order establish the color palette and the kind of vibes I would have to emphasize in my designs.
Having a colorful and 70's direction allowed us to explore interesting shapes and use flat colors.
Our Artistic Direction
3. The in-game interface
Slammin Legends gameplay demo
High paced
games usually needs a simple UI to let the player focus more easily on his gameplay, but it also needs to provide important informations to the player.
I went through different iterations, improving it after each playtest in order to find what informations matter the most, and how I could provide them correctly to the players.
Current in-game UI
.png)
UI blockout
The interface evolved a lot from the beginning of the development to the end. It is very dynamic and is being well-supported by the other feedbacks in game.
I also worked on some diegetic UI to avoid using too much screen space with 2D assets that may prevent the player from seeing the ball or the other players.
The UI elements are positioned on the edges of the screen to allow a wider screen space for the player to focus.
First iteration
.png)
Current interface
Current scoreboard
The scoreboard also had to be iterated in order to provide a clear space for the player to pay attention to stay focused gameplay. I had to provide informations about the score, the rounds won, and the time left.
1st Iteration
2nd iteration
3rd iteration
The 1st iteration was embodying the colors of each teams and displaying the timer and the current round. But the 70's mood wasn't stressed enough.
The 2nd iteration mainly used the same elements as the first one. These elements were visible enough, however it was using too much space on the screen.
In Slammin Legends the players happen to look up pretty often, and the ball can sometimes be hidden by the scoreboard. So I added a dark translucent background where the player can still see the ball through it.
The HUD
displays different mechanics that rely on a cooldown for usage. There is a control mapping reminder under each of them to slightly reduce the memory load of the player's brain to remember each input.
Here are the UI assets I have realized for the in-game UI:
Dash
Ball focus
Ally focus
Ping
Ability
Ask for a pass
These HUD elements are also dynamics, because a change in motion as a feedback can be noticed in the peripheral vision of the player. Knowing that the player will focus 80% of the time in the center area of his screen, it can be pretty useful.
In-game UI demo
Wall
A wall supposed to raise from the ground up, the arrows symbolize the motion.
Jumpad
A jumpad giving a boost of velocity forward to the ball and the player. I used some curves in order to emphasize the overall trajectory of the jump.
Abilities
also have a different logo to be recognized, I needed to design something that would be easily identified. The form of the ability logo should follow its function.
Speed Bubble
A buble speed that accelerates everything that pass through it. The shape of shere reveals the shape of the ability once on the ground.
Informing
the player about the position of the ball while not looking directly at it could be challenging. This is why I thought about a marker that would indicates the position of the ball on the edges of the screen.
Ball marker demo
Blue team possessing
Neutral possession
Orange team possessing
The ball marker also has different colors depending on the team carrying the ball. This is an important feature because since the ball marker appears when the ball is out of the player's screen, it provides the information wether he has to defend the ball or keep running to the adverse opponents ring.
Troy's marker
Ace's marker
Cherry's marker
When the player has the ball, he doesn't need the ball marker anymore. So this one is replaced by the "pass marker", which is triggered whenever a teammate is asking the ball. Like the ball marker, it indicates the location of the ally who asked for the pass.
The "sidebars", indicating the location of the closest ally
Knowing the location of his teammates is important for the player when he has the ball. We can already know the location of the teammates asking the ball, but we needed another sign to constantly be aware of the location of his teammates.
To provide that information I didn't want to add another marker as it could add too much activity in the player screen and could be distractive.
I thought about the "sidebars" on the edges of the screen that glow up in the direction of an ally whenever he is nearby and in a certain range. The glow up effect is noticeable by the player while focusing on the center of the screen at the same time.
The interface
is still currently in a "work in progress" state, as I'm still working on the game menu and improving the User Experience of the game. The final results will be uploaded soon and additional UI elements may be added.