UI&UX

Abstract Waves_edited.jpg

The world of design

has inspired me for years and I'm currently using my experience as a graphic designer to improve the game design of my projects through user experience studies and a communicative interface.

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

 

Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png
Cross_01.png

creativity

creativity

creativity

Dinos VS Aliens

This is a mobile game realized during my 2nd year of Bachelor as a group project. I was mainly in charge of the interface and it was my first experience with UI design.

The Crew 2

I have realized a wireframe of the Event Tickets and the Summit interface, following the Art Direction of the game. This was a personal project realized on my spare time.

SBall_Multiplayer_-_Unreal_Editor_2022-03-22_13-42-20_Moment3.jpg

Slammin Legends

This is the graduating project I have realized during my 3rd year of Bachelor, as the Project Manager and UI designer of a team of 28 students. I had to imagine various designs to communicate infos to the players while keeping a readable interface during high-paced actions. 

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.

Wix_UI activity summit.png

Skill logo

Reward

Race details

Wix_UI activity summit original.png

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.

Wix_UI activity summit 2.png
Wix_UI activity summit 2 originakl.png

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.

Wix_UI activity summit 3.png

End of the event

Player rank

Rank points updated

with the leaderboard

Displays the rank rewards

Reworked version

Wix_UI activity summit 3 original.png

Original version

Wix_UI activity summit 4.png

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.

Summit final.png

Reworked version with UI art

203-2038875_wallpaper-jaguar-e-type-black-retro-side-view_2.png

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:

Yellow.png
YellowEnergy_3.png
YellowEvent_1.png

Street Race logo

Street Race skill BG

Street Race BG

Pink.png

Freestyle logo

Pink_2.png

Freestyle skill BG

PinkEvent_1.png

Freestyle BG

Blue.png

Pro Racing

Blue_2.png

Pro Racing skill BG

HT_01_3.png

Off-road BG

RR.png

It allowed me to make the following designs using the logos from the game:

Skull.png
MT.png
sdvfdsz.png

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.

Screenshot 2022-03-29 232307.png

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.

Screenshot 2022-03-29 232555.png

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.

Skull.png
Shark.png

Street race logo

Freestyle race logo

StreetRace_BG_03.png

Street race BG

Jetsprint_BG_02.png

Freestyle race BG

It allowed me to make the following designs using the logos from the game:

Screenshot 2022-03-29 235919.png
Screenshot 2022-03-29 235953.png

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

Title_v2.png

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.

Shop v1.png

1st iteration by my teammate

Shop v2.png

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:

Wireframe_1.png

Preparation phase

And this is what I have made out of these previous wireframes:

Screenshot 2022-03-30 121803.png

Preparation phase

Wireframe_3.png

During enemy wave

Screenshot 2022-03-30 121817.png

During enemy wave

Wireframe_2.png

Building interface

Screenshot 2022-03-30 121833.png

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

SlamminLegends_1.0_PNG.png

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

Logo_PowerSmashBall.png

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.

SlamminLegends_1.0_PNG.png
LogoWHITE.png

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.

E94lORVWYAQHRxa.jfif

My iterations for Power Smash Ball logo

2. The Artistic Direction

P5.png

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.

SBall_Multiplayer_-_Unreal_Editor_2022-03-22_13-42-20_Moment5.jpg

Current in-game UI

unknown (2).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.

POVgame2.jfif

First iteration

unknown (3).png

Current interface

ScoreBoard 4.5 project.png

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.

ScoreBoard 1.0.png
ScoreBoard 4.1.png
ScoreBoard 4.3 project.png

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:

UI_Focus_3.png
UI_Dash_Logo_2.png

Dash

Ball focus

UI_FocusPlayer_3.png

Ally focus

UI_Ability_fill_3_Black.png
UI_Ability_fill_3.png
UI_Ability_3.png
UI_PingLogo_3.png
UI_PassLogo_1.png

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

UI_Wall_White_02.png

Wall

A wall supposed to raise from the ground up, the arrows symbolize the motion.

UI_Jumpad_White_02.png

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.

UI_Buble_White_02.png

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

UI_Ball_Marker_05.png

Blue team possessing

UI_Ball_Marker_02.png

Neutral possession

UI_Ball_Marker_04.png

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.

UI_Ball_Marker_03.png
UI_Marker_Troy.png

Troy's marker

UI_Ball_Marker_03.png
UI_Marker_Ace.png

Ace's marker

UI_Ball_Marker_03.png
UI_Marker_Cherry.png

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.

SBall_Multiplayer_-_Unreal_Editor_2022-03-22_13-42-20_Moment3.jpg

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.