logo-svg

Création site institutionnel
Bienvenue à Gaïa

User Experience    |    User Interface    |    Prototype

À Propos du Projet

Contexte et enjeux

projet

Conception du site vitrine du jeu Bienvenue à Gaïa

DURÉE

3 mois

logiciel
logo Figma
pitch du jeu

Bienvenue à Gaïa est un jeu vidéo en ligne le joueur incarne un extraterrestre qui exerce le métier de contrôleur de l’immigration sur la planète Gaïa, célèbre dictature planétaire. Un jour, la situation a brusquement changé lorsque Gaïa a été intégrée au gigantesque système intergalactique qui gouverne une multitude de mondes à l’intelligence avancée. Le joueur doit maintenant gérer les arrivées d’êtres étranges venant de tous les coins de l’univers dans une dictature qui vient à peine d’ouvrir ses portes, travail fatigant et nouveau qui vous sort brutalement de votre zone de confort.

Objectifs

Les buts du projets

J’ai eu comme objectif personnel de créer un site de la recherche des fonctionnalités à la création des maquettes web. L’objectif au niveau projet est de concevoir un site en adéquation avec les recherches utilisateurs et benchmark.

Déroulement du projet

trait-3
ETAPE 1

Inspirations & benchmark

Le benchmark a été réalisé en deux temps. Tout d’abord, j’ai recherché différents site de jeu en ligne tels que Papers, Please ou encore Wolfy qui sont des jeux dans le principe des jeux ressemblent à l’univers que l’on souhaite donner au site institutionnel. Puis je me suis basé sur des sites fictifs (thèmes WordPress) pour me donner des idées d’agencements et de styles.

Etape 2

Arborescence

L’arborescence fait parti de la réflexion UX que nous avons mené avec l’équipe « Design » du projet.

Choix des rubriques

Nous avons défini l’arborescence selon les contenus que nous souhaitions voir sur le site :

  • Lien vers le jeu
  • L’univers du jeu
  • L’histoire du jeu
  • Les planètes
  • L’histoire du personnage principal
  • Une présentation de notre équipe

Ce site vitrine accueille une partie blog nous permettant de rédigez des articles sur le jeu et sur l’équipe. Nous avons déjà commencé à le faire brièvement sur le compte Instagram de Bienvenue à Gaïa.

Etape 2

Conception du site

Une fois l’arborescence et le benchmark établi je me suis lancé sur la conception des pages du site avec dans un premier temps le zoning.

Le zoning

Tout d’abord, j’ai défini les contenus souhaités dans les différentes pages. Cela m’a permis de concevoir une hiérarchisation des éléments sur mes pages. D’autre part, j’ai pu conserver la même structure selon les pages même si le contenu soit différent (exemple : bloc image + texte + CAT).

Voir le zoning complet
Les maquettes graphiques

La partie maquettage fut la plus intéressante et aussi la plus complexe. Comme dit précédemment il a fallu créer une ambiance sombre et prenante. Pour cela j’ai réalisé la page d’accueil afin de faire valider le style et la disposition choisie (décors, image…) à l’équipe. Après correction de petits éléments, j’ai créé l’ensemble des maquettes selon les différentes pages. L’intérêt d’utiliser Figma pour la création des maquettes est, la possibilité pour les membres de l’équipe, d’interagir facilement avec sur le fichier. Il est donc très simple de pouvoir commenter/modifier les contenus. Cela m’a permis de corriger rapidement les différentes erreurs, mais également d’avoir leurs avis sur l’ensemble du site.

L’utilisation des composants sur Figma m’a été d’une grande utilité afin de pouvoir corriger des blocs présents dans plusieurs pages seulement grâce au composant « maître » qui permet d’interagir sur tous les autres.

prototype-min
Le prototypage

Une fois l’ensemble des maquettes (desktop et mobile) terminées, j’ai pu mettre en place le prototype du site. Grâce aux composants, il a été très simple de relier les différents pages entre elles.

Voir le prototype
Etape 3

Mise en ligne du site

mockup du site bienvenueagaia
Intégration des pages

Afin que tout le site puisse être développé rapidement et avec tous les éléments, j’ai trié classer mes calques dans Figma et exporter tous les éléments images nécessaires. 
Le site institutionnel de Bienvenue à Gaïa a été développé grâce aux technologies HTML/CSS/JS. Nous avons acheté le nom de domaine bienvenueagaia.com afin d’y intégré le site ainsi que le jeu en sous-domaine (jeu.bienvenueagaia.com).

Voir le site Bienvenue à Gaïa

Effets et conséquences de ce travail

Figma - composants

Mettre en place des composants permettant une gestion rapide en cas de modifications

Site responsive

Permettre un accès au site sur tous les appareils

Méthode Agile

Mettre en application la méthode agile avec les commentaires de Figma

Projet d'équipe

Travailler sur un projet d’équipe concret et viable

Retours & témoignages

Fabien est un collaborateur sérieux, force de proposition et créatif. Grâce à lui nous avons un site internet institutionnel efficace et élégant pour promouvoir notre jeu en ligne. Ses propositions graphiques et ergonomiques correspondaient parfaitement à nos demandes et nous ont permis d’avancer vite, sereinement et efficacement. Je vous le recommande chaleureusement !

Pauline BOUVET
Chargé de Projet - Bienvenue à Gaïa
Vous souhaitez discuter du projet ou simplement m'envoyer un message ?Envoyer moi un message