UI Design

Fluid

Fluid est un jeu vidéo 3D réalisé comme projet de fin d'études au sein de mon Master.

J'ai été en charge de la conception, du développement et de l'animation de son interface graphique.

Écran titre

Pour l'écran titre du jeu, nous avions décidé de remplacer le traditionnel "Press Start" par une utilisation de notre système de combat : l'appui en rythme sur une touche. Nous faisons donc apprendre au joueur l'élément principal du combat dès le début sans qu'il ne le sache encore.

La caméra fait ensuite un travelling devant le logo avant d'afficher le menu principal, avec la sélection par défaut sur "Continuer" si une sauvegarde existe pour accélérer la reprise d'une partie.

Le combat se déroulant en vue à la première personne, l'interface principale est un hologramme se trouvant sur l'avant-bras du joueur.

L'affichage de l'avant-bras est composé de deux écrans holographiques, un pour les actions possibles pendant le combat et l'autre pour des informations complémentaires. Pour assurer une navigation rapide et instinctive, chaque type d'action (Attack, Skill, Item) est liée à son propre bouton (ou touche de clavier).

Le système rythmique est affiché sur l'écran, tout en étant connecté à l'hologramme lors de l'appui sur les touches qui vont remplir la barre de Fluid.

Le cartouche au-dessus de l'ennemi indique sa vie de façon circulaire, le compte à rebours avant sa prochaine attaque, et s'il est paralysé ou empoisonné.

Interface du combat

Nihon no OTO

Nihon no OTO est une webradio spécialisée sur la musique japonaise ainsi que la culture venue du Japon : traditions, jeux vidéo, mangas... Elle couvre également de nombreux événements sur le sujet.

Depuis sa création en 2011, je m'occupe de son site web ainsi que de sa charte graphique.

Le site web actuel est conçu en Python 3 à l'aide du framework Django, et a la particularité de permettre une lecture ininterrompue de la radio ou d'une émission pendant la navigation du visiteur.

Différences entre ancien et nouveau logo

Son premier logo posait les bases de la charte graphique, à savoir une police très carrée et des couleurs grises relevées par du rouge.

J'ai réalisé une légère refonte du logo en 2015, pour le rendre plus moderne à l'aide d'arrondis et de dégradés.

Pour le design du site web, j'ai voulu faire de l'en-tête le coeur des interactions : titre de la page en cours avec son fond spécifique, contrôles de la webradio et affichage du titre en cours d'écoute...

Toute navigation d'une page à l'autre est animée pour accompagner la fluidité apportée par le chargement rapide du contenu, et de nombreuses petites animations rendent le tout plus vivant.

Animations du site web