Découvrir
Actuellement étudiant en Master DIMI (Design d’Interface Multimédia et Internet) à l’université Sorbonne Paris Nord de Villetaneuse, je suis à la recherche d'un stage de fin d'étude dans le domaine de l’UX/UI Design ou du développement informatique lié au multimédia. Vous trouverez sur ce portfolio certains de mes projets réalisés au cours de mes études.
 |
UX Design
|
 |
Développement web
|
 |
Dispositifs interactifs
|
 |
Création artistique
|
UX DESIGN
Dans le cadre de mon master DIMI, nous avons été amenés à participer à un “hackathon” de design où plusieurs entreprises étaient conviées afin de proposer un projet ou soumettre une problématique à laquelle nous devions répondre par groupe de cinq en une semaine.
L’entreprise rattachée à notre groupe était Eneville, une entreprise proposant des données et des stratégies de décarbonisation à destination des acteurs du domaine de la rénovation énergétique immobilière.
Leur demande portait sur la création d'une nouvelle charte graphique, d'un nouveau parcours utilisateur pour leur site web ainsi que la création d'une interface pour une carte de prospection.
Afin de correctement analyser la demande nous avons tout d'abord échangé avec l’entreprise lors d’une première réunion. Cela nous a été utile afin de préciser les éléments du parcours utilisateur à modifier ainsi que les données à intégrer dans l'interface de la carte.
Une fois les demandes bien comprises par notre groupe, nous nous sommes répartis les tâches de benchmark et de création de personas. Ces étapes nous ont permis de nous assurer que nos productions seraient cohérentes avec le secteur et les cibles visées.
Je me suis personnellement occupé du benchmark pour la carte interactive de prospection.
Nous nous sommes ensuite réunis pour réfléchir à l'userflow du site web et à l’intégration du nouvel outil de carte interactive dans celui-ci. À l’aide de post-it, nous avons réfléchi sur l’agencement des pages et des actions de l’utilisateur. Nous avons également réfléchi à la disposition de l’interface de la carte interactive en nous basant sur les données fournies par l’entreprise.
Après une réunion avec l'entreprise pour valider notre userflow, nous nous sommes répartis les tâches pour la phase de maquettage.
Certains membres de mon groupe se sont chargés du logo et de la charte graphique, tandis qu'avec un autre membre de mon groupe je me suis occupé de la création de la maquette du site web.
Nous avons ensuite eu une réunion avec l’entreprise afin de leur proposer plusieurs logos et de valider la maquette du site.
Une fois ces éléments validés, nous avons pu passer au maquettage et au prototypage de la carte interactive, tout en finalisant la maquette du site.
Dans le cadre de mon BUT MMI, j'ai dû effectuer un stage en entreprise afin de mettre en œuvre les compétences acquises au cours de ma formation dans un contexte professionnel. J'ai donc réalisé un stage de 14 semaines au sein de PUCE MUSE, une association d'art numérique spécialisée dans la musique visuelle. L'objectif de ce stage était le développement d'un logiciel de Musique Assistée par Ordinateur (MAO) appelé Mono-Piano.
Le Mono-Piano s'inspire d'une ancienne application de PUCE MUSE appelée
le Méta-Piano. À l'origine, le Méta-Piano est une création du musicien et chercheur Jean Haury. L'objectif
de cette application est de permettre à n'importe qui d'interpréter n'importe quelle partition au piano, quel
que soit son niveau.
Chaque fois que l'utilisateur appuie et relâche les boutons du support de son choix
(clavier, manette, ...), la note ou l'accord à venir dans la partition est joué. Cela laisse donc à
l'utilisateur une notion d'interprétation, puisqu'il choisit la manière dont il joue (vitesse, intensité).
Pour le développement du Mono-Piano, j'ai utilisé le code de l'ancienne application Méta-Piano comme
base de travail. En plus de m'assurer que les notes étaient correctement jouées lors de l'appui de l'utilisateur
sur les touches, j'ai également dû mettre en oeuvre l'affichage.
Cet affichage sous la forme d'un
piano roll, permet de visualiser les notes à venir dans la partition. J'ai veillé à ce que l'affichage
soit correct par rapport à la partition et qu'il réagisse de manière appropriée aux actions de l'utilisateur.
De plus, j'ai ajouté des paramètres de personnalisation tels que la couleur, le nombre de notes affichées
et la largeur des notes.
Une nouveauté par rapport à l'ancienne version de l'application était l'ajout d'un parseur MIDI. Les fichiers MIDI sont des fichiers utilisés pour partager des partitions musicales. L'objectif de ce parseur est de permettre à l'utilisateur d'importer n'importe quel fichier MIDI pour pouvoir le jouer grâce au Mono-Piano. Étant donné que le Mono-Piano utilise un format spécifique pour lire les partitions, il a donc fallu que je développe un parseur transformant les fichiers MIDI en ce format.
La dernière étape était d'intégrer le logiciel dans un template d'interface Mono puisque toutes les applications Mono de PUCE MUSE ont une interface similaire. En raison de la durée limitée de mon stage je n'ai pas mis en place moi-même l'interface mais j'ai veillé à ce que le code soit le plus clair est commenté possible pour permettre une intégration rapide.
DÉVELOPPEMENT WEB
UX DESIGN
Ce projet était le projet principal de ma troisième année de BUT MMI, nous devions créer par groupe de trois une application sur le sujet de notre choix. Notre groupe ayant pour passion commune la musique nous avons décidés de créer une application web de pédagogique musicale.
L’objectif de notre application était de mettre en relation des profs de musique et des élèves tout en leur mettant à disposition un moyen de communication dédié au monde musical avec des outils et des jeux éducatifs développés pour l’apprentissage de la musique.
Dans un premier temps, pour le maquettage de l’application nous avons utilisés Figma.
Une fois la maquette réalisée, nous avons réparti les tâches pour le développement. Un membre de mon groupe s’est occupé du back-end pendant que l’autre membre et moi nous sommes réparti le développement front-end.
Pour le front-end nous avons décidés d’utiliser la bibliothèque React.js.
Je me suis notamment occupé des pages de la partie professeur, de la messagerie, du calendrier, du mode clair ainsi que des outils présent sur l’application. Ce groupe d’outils était composé d’un accordeur, d’un métronome, d’une boite à rythme et d’un éditeur de partition.
Au niveau du back-end, une base de données comportaient toutes les informations relatives aux utilisateurs, aux cours, aux exercices et aux partitions. Un membre de mon groupe s’est chargé de développer une API afin de nous permettre de récupérer simplement les informations et des les intégrer avec React.
Tout au long de ce projet nous avons utilisé Git et GitHub pour le versionning.
DÉVELOPPEMENT WEB
UX DESIGN
Au cours de notre formation nous sommes amenés à mettre en pratique nos connaissances dans des projets
multidisciplinaires.
Un de ces projets était la réalisation par groupe de trois personnes d'un site web de vente de musique en ligne.
Une base de données comprenant des utilisateurs, des albums, des titres et des playlists nous était fournie. Un cahier des
charges détaillé spécifiait les attentes pour les différentes pages et fonctionnalités. C'était ensuite à nous de définir
l'aspect graphique du site ainsi que l'arborescence. Pour ce projet, j'ai été en charge en partie du wireframe, de
l'intégration de la base de données et de la stylisation grâce au framework CSS Tailwind.
Réalisé lors de ma deuxième année de BUT MMI, le but de ce projet était de créer une expérience en réalité virtuelle sur une île grâce au moteur de jeu Unity. Pour cette expérience, nous devions créer un scénario simple. L'objectif de mon expérience était d'empêcher la destruction de l'île par une créature géante en trouvant son enfant caché quelque part sur l'île. Cette sorte de chasse au trésor visait à encourager l'exploration.
Afin de guider l'utilisateur, des Personnages Non Joueurs (PNJ) étaient positionnés à différents endroits de l'île. Chaque PNJ indiquait l'emplacement du prochain PNJ, guidant ainsi l'utilisateur à travers toute l'île. Le dernier PNJ donnait un indice sur l'emplacement de l'enfant.
Cette île était constituée d'assets libres de droits disposés de manière
à créer un environnement cohérent et varié. L'expérience démarre dans une ville avec un château,
l'utilisateur traverse ensuite une forêt, une petite île isolée, un désert, des montagnes,
et enfin un volcan. Les PNJ servant de guide étaient présents dans chacun de ces environnements.
En s'approchant, il était possible d'interagir avec eux pour afficher un dialogue. J'ai créé
moi-même le modèle d'un de ces PNJ avec le logiciel de modélisation 3D Blender.
N'ayant pas de casque pour véritablement expérimenter la réalité virtuelle, j'ai utilisé mon téléphone pour contrôler la caméra en fonction des mouvements. Une partie de l'écran permettait d'avancer.
Un autre projet réalisé lors de ma première année de BUT MMI était la conception, en groupe de 4 personnes, d'un site dédié à l'innovation. Ce site devait comporter un motion design présentant l'une de ces innovations. Nous avons choisi de présenter Urban Canopee, des mobiliers urbains végétaux écologiques. J'ai été chargé de concevoir le design du personnage principal, des Urban Canopee et d'un camion. J'ai également animé une partie du motion design à l'aide d'After Effects.
DÉVELOPPEMENT WEB
UX DESIGN
Réalisé lors de ma deuxième année de BUT MMI, l'objectif de ce projet était de réaliser par groupes de 3 un site de prévisions et statistiques météo.
Ce site responsive devait récupérer des informations météorologiques
en temps réel tout en proposant des statistiques. Nous avons d'abord utilisé
HTML/CSS pour créer la base du site et gérer l'affichage. Ensuite, nous avons récupéré les
informations sur une ville au choix via des requêtes sur l'API de Météo France. Pour réaliser
le tableau de bord des statistiques quotidiennes, nous avons utilisé Chart.js.
Je me suis
principalement occupé de la réalisation et de l'intégration d'un tableau de bord Google Looker
Studio qui permettait d'obtenir des statistiques sur une période au choix.
Un autre projet réalisé lors de mon BUT MMI était la création de flyers de présentation de l'IUT, de la formation ainsi que de la ville de Saint-Lô. Ces flyers en anglais ayant pour but d'attirer des élèves étrangers pour un échange universitaire.
