NEWS – Othercide : Journal de développement 2, interface utilisateur

Maquette et Wireframe

Tout d’abord, Yoann, commence par énumérer toutes les interactions que nous souhaitons avoir dans le jeu pour une fonctionnalité, telle que le menu de création de fille que nous avons précédemment présenté à la communauté. Toutes les informations brutes nécessaires sur l’écran doivent être résumées pour en faire la mise en page. Ensuite, il doit choisir où chaque information sera affichée sur l’écran de l’utilisateur en traitant certaines règles de base telles que le sens de lecture et la hiérarchie de l’information.  En effet, nous voulons montrer aux joueurs le plus important en premier. Il consiste à choisir 

Il essaie ensuite d’avoir toutes les informations des différents écrans du jeu sur papier. Au cours de cette phase de pré-production, il s’inspire principalement d’autres artistes UI/UX qu’il aime, ainsi que de jeux vidéo où les standards ont été définis dans certains genres. Il doit également s’assurer que l’interface utilisateur respectera la direction artistique d’Othercide et le style de menus que nous souhaitons avoir (minimaliste, éthéré…). 

Lorsqu’il y a trop d’informations à afficher à l’écran, Yoann doit réfléchir à la navigation dans les menus et à la manière dont certaines fenêtres peuvent apparaître sur le même écran. Parfois, il place la mise en page sur Unity sans passer trop de temps sur les graphiques et les animations. À ce stade, il ne se concentre pas sur l’apparence finale ; il utilise uniquement des blocs gris et des textes bruts pour voir où chaque information ira et interagira. 

Après avoir défini tout cela, l’écran s’intègre dans un flux global de divers autres écrans. Le flux doit être défini en minimisant le nombre d’interactions et en optimisant le nombre de clics des joueurs. Cependant, il peut être intéressant d’avoir un juste équilibre entre esthétique et commodité. 

Prototypage et intégration

l est maintenant temps pour Yoann de prototyper le flux global avec Adobe XD. Cet outil lui permet de définir visuellement les interactions et d’éviter de consacrer trop de temps à la programmation. Il fait une version très simple du flux pour créer des interactions de base et voir s’il est cohérent. Les gens du studio peuvent maintenant l’essayer et voir si quelque chose est bizarre ! 

Lorsque le prototype est correct, Yoann collabore avec les développeurs de Lightbulb Crew afin que l’équipe puisse implémenter la navigation dans le jeu. Une fois implémenté, il peut se concentrer sur les graphiques et l’animation de l’interface utilisateur en utilisant Illustrator, Photoshop et After Effects. Il s’assure que tout est cohérent avec la direction artistique d’Othercide en le montrant à Alexandre, directeur artistique du jeu.