De webdesigner à Ui designer, il n’y a qu’un pas !

Maxime, ancien étudiant de la formation webdesign, a profité de sa période de stage pour orienter son projet professionnel dans un domaine qui le passionne, le jeu vidéo. Retour sur les étapes de cette migration.

Pourquoi ce choix de stage ?

Le game est un secteur qui m’intéresse particulièrement et le fait qu’Objectif 3W partage ses locaux avec Objectif 3D m’a permis d’être en contact facilement avec des étudiants et formateurs qui travaillent dans ce secteur. En échangeant avec Thomas, le professeur des Game 3, nous nous sommes rendu compte que la communication autour du jeu vidéo réalisé par les élèves entrait parfaitement dans le cadre des missions qui pouvaient m’être confiées en tant qu’infographiste multimédia. Ils étaient également demandeurs d’éléments graphiques pour habiller les écrans du jeu en lui-même et c’est ainsi que j’ai décidé de profiter de ma période de stage pour prendre en charge ce projet.

Petit zoom sur le jeu

Logo Maxime

Elïvàgar est un jeu de tower defense composé de 5 niveaux inspirés des légendes des Vikings. Le but est de protéger le passage vers le Walhalla des invasions ennemies (des âmes damnées ayant pris la forme de guerriers) et pour ce faire, user de stratégie pour positionner des tours et des défenseurs dans la map.

Présente-nous ce que tu as réalisé

Au niveau du jeu

1/ Le HUD

Les fonctionnalités du jeu étaient déjà disposées pour que les développeurs puis commencer à programmer le gameplay, mais il n’y avait aucun design dessus. J’ai donc relooké les fonctionnalités existantes en créant des séries de pictogrammes et les déclinant en fonction d’un code couleur que j’ai établi. Les contraintes ergonomiques du jeu vidéo sont encore plus précises qu’en web puisque l’information doit être parfaitement intuitive pour le joueur et guider son gameplay. Nous avons donc effectué des tests utilisateurs afin de corriger, améliorer, compléter les informations du HUD tout au long de la production du jeu.

En termes de logiciels, j’ai utilisé Illustrator pour la création et Photoshop pour les tailles et l’export des fichiers (en .png pour la plupart afin de gérer la transparence) et j’ai eu l’occasion de découvrir Unreal Engine pour inclure les visuels directement dans les écrans du jeu. Les fonctionnalités étaient ensuite codées par les programmeurs.

Map Game3

hud_complet

2/ Le curseur

Le curseur également peut avoir différents aspect selon si on est en train de tirer (il prend la forme d’une cible) ou autre. A chaque fois, j’ai essayé de mêler la fonction et la référence à l’univers viking pour créer un ensemble harmonieux. J’ai fait énormément de recherches graphiques !

3/ Les écrans d’information et autres cartes titres

Les messages délivrés tout au long du jeu sont en anglais. J’ai utilisé une typographie qui rappelle les runes tout en restant parfaitement lisible.

Messages Elivagar

Menu principal

Autour du jeu

1/ La création du logo

Une des premières tâches pour cerner l’univers. J’ai proposé différentes pistes pour ouvrir la discussion puis nous avons affiné sur la piste qui était la plus porteuse.

logo_elivagar_titre

logo_signification

2/ L’affiche et la jaquette

La production du jeu touche à sa fin, je ne devrai pas tarder à recevoir le visuel définitif !

3/ Le site de présentation

Il s’agit d’un onepage, relativement simple dans la structure, qui présentera les éléments du jeu (personnages, niveaux, etc) pour inciter les gens à venir tester le jeu en vrai !

Et maintenant ?

J’ai adoré travailler dans cet univers et je vais tout faire pour continuer dans cette voie ! L’Ui Design me passionne vraiment, si des studio comme Ubisoft recrutent, je suis preneur !!!

Maxime ONO-DIT-BIOT, Ui/Webdesigner
ancien élève de la session Webdesign 2015-2016

Merci à Maxime pour ce travail et nous ne manquerons pas de vous tenir informés de son évolution !