UI Design

Fluid

Fluid is a 3D video game made in team, as a end of studies' project.

I've designed, developed and animated its User Interface.

Title screen

For the game title screen, we've decided to replace the traditional "Press Start" by using our own battle system : the rhythmical button press. We're learning the main battle element to the player without him noticing it.

Then the camera makes a travelling in front of the logo before displaying the main menu, with "Continue" selected by default if a savedata already exists, to accelerate the resuming of the game.

The battle being in first-person view, the UI is an hologram displayed over the player forearm.

The forearm display is made of two holographic screens, one for the available actions during the battle and the other for further informations. To ensure a fast and instinctive navigation, each action type (Attack, Skill, Item) are tied to their own button (or key).

The rhythmical system is displayed on the screen, while being connected to the hologram when pressing the buttons that will fill the Fluid bar.

The banner above the enemy displays its life with a circular bar, the countdown before its next attack, and if it's paralyzed or poisoned.

Battle UI

Nihon no OTO

Nihon no OTO is a webradio specialized in Japanese music and culture : traditions, video games, mangas... It also does the coverage of a lot of events on the matter.

Since its creation in 2011, I'm in charge of its website and its graphic charter.

The current website is made in Python 3 and uses the Django framework, and is main feature is letting visitors listen to the webradio or a podcast without interrupting their navigation.

Differences between the old and new logo

Its first logo laid the foundation of the graphical charter : a square font and grey colors with a bright red.

I've made a slight redesign of the logo in 2015, to make it more modern thanks to curves and gradients.

For the website design, I wanted to make the header as the heart of all interactions : the current page title with its background, webradio play controls and display of the currently listening track...

Any navigation from a page to another is animated to go with the responsiveness brought by the fast content loading, while another small animations makes the whole more alive.

Website animations