Marie-Liesse de Solages
Tous les projets
Explorations · 3D temps réel

Expériences interactives

Trois mondes en 3D qui se parcourent : une méditation guidée qui se traverse à la souris, une nuit de Noël jouable dans le navigateur et un jeu mobile où l’on accompagne une mamie dans sa ville.

Sur ces trois projets j’ai touché à tout : la recherche et les personas, les écrans jusqu’à leurs états de fin, la modélisation 3D et la direction artistique.

RôleUX/UI · 3D · direction artistique
Période2020 à 2022
Équipes4 à 5 personnes
SupportsWeb temps réel & mobile

Trois mondes en mouvement · survolez pour changer d’écrantouchez pour changer d’écran

Safe Place : des lupins mauves au premier plan, un lac et des montagnes roses au couchant Safe Place 2022 · Expérience web Voir le projet
2022 · Expérience web

Safe Place

Safe Place est une méditation qu’on traverse au lieu de l’écouter les yeux fermés. On arrive dans un paysage calme et une voix off nous accompagne pendant qu’on avance à son rythme : une prairie, un lac, une cascade puis un jardin japonais. Chaque lieu propose une respiration et quelque chose à faire de ses mains.

On s’adressait à des jeunes en alternance qui enchaînaient l’école et l’entreprise pendant le confinement et qui n’avaient plus un moment à eux. Les applications de méditation existaient déjà mais elles demandent toutes de fermer les yeux. On a cherché l’inverse : occuper le regard assez longtemps pour que la tête lâche. J’ai travaillé la cible et le repérage des références, puis la direction artistique des lieux avec l’équipe.

Un pont de bois qui ondule au-dessus d’une prairie rose au coucher du soleil
Le pont. La première image du parcours, avant même d’avancer.
Une prairie vallonnée avec des arbres épars et des cairns qui flottent au-dessus du sol
La prairie. Les cairns marquent le passage de ceux qui sont venus avant.
Un lac au pied des montagnes, un arbre au premier plan, la barre de progression en bas de l’écran
Le lac. En bas, la barre dit le chemin parcouru et l’étape en cours.

La traversée

pour passer d’un lieu à l’autre

Une interface qui se fait oublier

Une expérience contemplative ne supporte pas une interface bavarde. La navigation tient dans une barre de progression qui montre où l’on en est et quels lieux restent à voir. Le nom de l’étape s’affiche en bas à gauche et les contrôles de son et de pause se rangent à droite. Rien d’autre ne vient sur l’image.

Les décors suivent la même règle. Une palette rose et vert tendre, des volumes doux, pas un contour dur ni une ombre portée franche et des cairns laissés au bord du chemin par ceux qui sont passés avant. Chaque élément devait pouvoir être regardé longtemps sans jamais accrocher l’œil, parce qu’une seule forme trop nette et on sortait de l’état qu’on cherchait à créer.

Le jardin de Safe Place : deux cairns entourés d’un cercle blanc en pointillés, le seul signe qu’on peut interagir
Le seul signe d’interaction. Un cercle en pointillés autour de ce qu’on peut toucher.
Vingt secondes de traversée, quatre lieux : la prairie, le pont, le cairn au bord du lac et l’arche de pierres.

Avec Brieuc Caillot au développement, Roxane Peuvrier, Léon Baudouin et Alexandre Gomez-Pardo. Expérience desktop en 3D temps réel dans le navigateur.
Ouvrir l’expérience

2021 · Expérience web jouable

Mission cadeaux express

Le Père Noël a attrapé un rhume la veille du réveillon et il ne peut plus faire sa tournée. On vous nomme lutin remplaçant et il vous reste cinq minutes pour déposer les cadeaux au pied du sapin, éteindre les objets que la poussière magique a réveillés et manger les cookies laissés sur la table. Le tout sans réveiller la famille qui dort à l’étage.

Le plan avant les écrans

J’ai dessiné le flux complet avant qu’on ouvre Figma : l’accueil, la cinématique, les commandes, les trois missions, la pause et les deux fins. Ce schéma sert aussi de contrat avec les développeurs parce qu’il dit noir sur blanc quel écran mène à quel autre et ce qui se passe quand on échoue.

Le schéma du parcours utilisateur : de la page d’accueil aux crédits et aux commandes, puis la cinématique, les trois missions, la pause et les deux fins
Le parcours complet, écrit avant le premier écran. Les notes roses portent ce qui se dit et ce qui se déclenche à chaque étape.

J’ai aussi dessiné le plan de l’appartement puis je l’ai modélisé en entier, pièce par pièce. L’éclairage a demandé le plus d’essais parce qu’il fallait une nuit assez sombre pour l’ambiance et assez lisible pour retrouver le sapin sans allumer la lumière.

Le plan de l’appartement vu du dessus dans le logiciel 3D, pièces meublées et éclairées
Le plan vu du dessus. La circulation du lutin se décide là, avant les meubles.
Le salon modélisé en 3D : canapés, bibliothèque, lampes allumées et table basse
Le salon. Chaque lampe allumée deviendra un objet à éteindre.

Rien ne doit cacher la pièce

Tout ce qui se superpose à la scène obéit à une seule règle : l’interface se range sur les bords ou s’efface. Le minuteur en bas, les bulles d’objectif en haut à droite, les commandes montrées une fois puis rendues à la demande. Les consignes arrivent par appel vidéo d’Ada, l’assistante du Père Noël. Même les écrans de fin se posent sur le décor au lieu de le remplacer.

La cinématique d’appel vidéo entre le lutin Ada et le lutin Tamarre, dans une fenêtre posée sur un tableau vert
La cinématique. Les consignes passent par un appel vidéo entre les deux lutins.
La pop-in « Comment jouer ? » avec les quatre commandes : se déplacer, sauter, orienter la caméra, interagir
Quatre commandes, montrées une fois avant de rendre la main.
Le salon avec le sapin décoré, trois bulles d’objectif en haut à droite et le minuteur en bas
Trois missions de front. Les bulles s’empilent, la pièce reste entière.

Ça se joue dans le navigateur, dans un appartement modélisé en 3D et éclairé à la bougie. Le son y tient une place centrale puisque c’est lui qui prévient quand un objet fait trop de bruit.

Dans l’appartement

Trois moments de jeu. On fouille les pièces une par une, le minuteur ne s’arrête jamais et on finit devant le sapin.
L’écran d’échec « Pris sur le fait ! » avec un appareil photo et le bouton Rejouer une partie
La fin ratée. On s’est fait prendre en photo, ce qui reste plus drôle qu’un game over.

Avec Élodie Deshayes, Vincent Calas, Morgane Sauneuf et Thi Van An Truong. Cinq minutes de jeu pour les enfants dès dix ans et tous ceux qui aiment Noël. Les vidéos 2D et 3D sont l’œuvre du reste de l’équipe.

2020 · Jeu mobile

Mamie Danger

Mamie a besoin de deux œufs pour son gâteau et le magasin ferme bientôt. À vous de l’accompagner jusqu’au supermarché en traversant une ville qui ne l’attend pas : des voitures qui ne ralentissent pas, des feux qui changent trop vite et un chronomètre qui tourne.

Le jeu se joue en portrait, en missions courtes qu’on choisit sur un plateau : la rencontre, le supermarché puis la boulangerie.

Seize secondes de la bande-annonce : la ville, la circulation, puis Mamie qui traverse.

Encourager plutôt que gronder

On a commencé par écrire notre joueuse plutôt que par dessiner. Elle vit en ville, passe beaucoup de temps dans les transports, marche et court dans les parcs et s’investit dans une association. Ce portrait a tranché le ton : quand on s’y prend mal c’est Mamie qui commente et ça remplace tous les messages d’erreur.

J’ai conçu l’interface dans cet esprit, de l’accueil aux deux écrans de fin. La ville reste visible derrière chaque écran, parce qu’un jeu de trente secondes ne supporte pas qu’on le quitte pour une page pleine.

L’écran d’accueil du jeu : le logo au-dessus de la rue, le bouton Jouer sur un bandeau jaune et l’accès aux réglages
L’écran de jeu vu du dessus : la rue, deux voitures, le bandeau « Accompagne Mamie au supermarché », le chronomètre et une réplique de Mamie en bas
L’écran de pause : le rappel de la situation, les deux objectifs de la mission et le bouton Reprendre
L’écran d’échec : Mamie dit « Allez courage mon p’tit… » au-dessus du bouton Recommencer
1

Écran 1 sur 4

L’accueil

Un seul bouton, la ville déjà en fond.

Descendez pour avancer ou cliquez une vignette. Les flèches du clavier et le pavé tactile marchent aussi.

Une ville accueillante même quand elle est dangereuse

Le logo, la palette, l’affiche et le quartier viennent de la même intention : des volumes simples, des couleurs franches et aucune ombre inquiétante. Il fallait que la menace vienne du trafic et pas du décor, sinon le jeu devenait un cours de sécurité routière.

L’affiche du jeu : le logo Mamie Danger, l’accroche « Une mamie a besoin de toi » et Mamie sur un passage piéton pendant qu’une voiture arrive
L’affiche. Le logo, l’accroche et la scène qui résume le jeu en une image.

Avec Ronan Champigny, Léon Baudouin et Théo Lemoine, aux Gobelins. Jeu mobile en 3D, missions de trente secondes.

Sur ces trois projets je travaillais en binôme de designers et je portais mes sujets de bout en bout. Il fallait choisir un cadrage, s’y tenir jusqu’au bout et l’expliquer à nos développeurs.

C’est le même travail qu’aujourd’hui sur des produits : comprendre à qui on parle, dessiner le parcours avant les écrans et assumer ce qu’on montre.