Tous les projets
Une sélection de travaux UI/UX, web et graphisme. Cliquez sur une carte pour voir l’étude de cas.
Une sélection de travaux UI/UX, web et graphisme. Cliquez sur une carte pour voir l’étude de cas.
Création d’un site WordPress autour d’un concept de club de voyage dédié au Maroc. L’objectif était de construire une vitrine claire et attractive, avec une navigation simple, une identité visuelle cohérente et des pages structurées pour présenter le projet.
• Rôle : création du site, mise en page, gestion des contenus, cohérence UI
• Outils : WordPress, thème + constructeur de pages, Figma (maquette / inspirations)
Découvrir le site : https://moroccan-travel-club.free.nf
Projet scolaire de création d’un site WordPress inspiré de l’univers Mario Kart. L’objectif était de comprendre la structure d’un thème et d’intégrer une maquette en HTML / CSS / JavaScript directement dans les fichiers du thème, sans utiliser de page builder.
Le site a été développé en travaillant dans les fichiers PHP du thème. J’y ai intégré mon HTML, mon CSS et un peu de JS pour les interactions, afin de comprendre comment WordPress affiche les pages, les menus et les contenus.
• Rôle : intégration front & thème WordPress
• Année : 2024
• Outils : WordPress, PHP, HTML, CSS, JS, Figma
Découvrir le site : https://mario.free.nf
Projet d’application mobile réalisé pour Hemera Coworking afin de répondre au problème de sédentarité des coworkers. L’objectif est d’encourager le mouvement au quotidien grâce à une roulette d’activités aléatoires et un système de podium pour stimuler la motivation.
Le brief : concevoir une solution ludique permettant aux utilisateurs de se lever régulièrement sans interrompre trop longtemps leur travail. Nous avons imaginé plusieurs micro-activités, définis des règles de jeu et réalisé un prototype interactif.
• Rôle : UX / UI design, prototypage
• Outils : Figma, Illustrator, montage vidéo
Réaliser un CV vidéo dynamique afin de me présenter de manière plus engageante qu’un CV classique, tout en mettant en avant ma créativité, ma capacité de synthèse et mes compétences audiovisuelles.
Le CV repose sur un format court et rythmé, combinant prise de parole face caméra, incrustation sur fond vert et animations textuelles. L’objectif est de capter rapidement l’attention, tout en structurant clairement les informations clés : profil, compétences et objectifs professionnels.
• Rôle : Fond vert, animation texte
• Outils : DaVinci Resolve
Réaliser une interview scénarisée et dynamique pour présenter un concept “interview mystère”, en mettant l’accent sur le rythme, la narration et la post production (montage, son, habillage graphique).
Ce projet s’inscrit dans une mise en situation type interview, avec une identité visuelle assumée et un ton volontairement intrigant. La vidéo repose sur un format court et cadencé, combinant prise de parole face caméra, incrustation sur fond vert, éléments visuels et animations textuelles.
• Rôle : montage, incrustation fond vert, animation texte, traitement audio
• Outils : Premiere Pro, DaVinci Resolve, Adobe Audition
Portfolio personnel conçu pour présenter mes projets en UI/UX, développement web et communication digitale. L’objectif est d’offrir aux recruteurs une vue claire sur mes compétences tout en reflétant mon univers visuel.
Ce portfolio a été imaginé d’abord comme une maquette sur Figma, puis développé en intégration front à partir de zéro. J’ai travaillé la structure des pages, le design system et l’ergonomie pour un usage recruteur sur desktop et mobile.
• Rôle : conception UX/UI, design system, intégration front-end
• Outils : Figma, HTML, CSS, JavaScript
Projet d’étude UX réalisé pour le parc d’attractions Le PAL. L’objectif était de comprendre les usages numériques des visiteurs et des clients B2B afin d’identifier des pistes d’amélioration pour une future refonte de l’expérience digitale.
Dans cette SAE, nous avons travaillé en trinôme en tant qu’UX designers juniors. Chaque membre du groupe se concentrait sur un profil utilisateur (famille avec enfants, amateurs d’animaux, organisateurs de séminaires, etc.). Nous avons analysé le site existant et les supports de communication pour préparer notre enquête terrain.
• Rôle : UX research, analyse et rédaction des recommandations
• Outils : Google Docs, Figma pour la mise en forme, suite Office
Projet réalisé autour de l’expérience Anne Frank House VR, avec la conception d’une page web promotionnelle visant à informer, contextualiser l’expérience et donner envie de la découvrir tout en respectant la sensibilité du sujet.
Réalisé dans le cadre d’un module de communication digitale, ce projet devait s’adresser à un public large, offrir une présentation claire et pertinente, et guider les visiteurs vers l’expérience VR sans tomber dans le sensationnalisme.
Analyse des publics cibles, benchmarks d’expériences VR culturelles et sites de musées, construction du zoning puis réalisation d’une maquette Figma respectant un ton visuel sobre et immersif.
• Rôle : UX research, conception, maquettage UI
• Outils : Figma, benchmark, rédaction
• Année : 2024
Concept d’interface mobile développé sur Figma pour explorer une version compacte et interactive de mon portfolio. L’objectif était de travailler une expérience fluide sur petit écran, tout en conservant une identité visuelle forte.
Ce projet a été imaginé comme une extension expérimentale de mon portfolio desktop. Il m’a permis de travailler la navigation mobile-first, l’organisation des sections, les composants interactifs et la hiérarchie visuelle d’un site personnel pensé pour smartphone.
• Rôle : UI Design mobile, conception de composants • Outils : Figma • Année : 2024
Ensemble de mini jeux réalisés dans le cadre de mes cours de développement web pour m’entraîner à manipuler le DOM, les événements et la logique JavaScript. Tous les jeux sont regroupés sur une seule page d’accueil, qui propose trois boutons pour accéder aux différents jeux.
L’objectif de ce travail était surtout pédagogique : pratiquer le JavaScript « en situation » à travers des mécaniques simples de jeu. La page principale sert de hub : l’utilisateur choisit un jeu, puis la logique se met en place (scores, tours, conditions de victoire, etc.).
Certains comportements peuvent encore présenter des erreurs ou des bugs ponctuels (rejouer plusieurs fois, gestion des collisions, cas limites dans les scores, etc.). Je laisse ces jeux en l’état pour montrer mon niveau actuel en JavaScript et ma progression.
Les trois jeux sont accessibles depuis la même interface. La page ci-dessous regroupe l’ensemble des jeux via des boutons de navigation.
Le code source complet de ces mini jeux est disponible sur mon GitHub :
Consulter le dépôt GitHub
• Rôle : développement front, logique de jeu, intégration
• utils : HTML, CSS, JavaScript, GitHub
Ensemble de travaux pratiques réalisés dans le cadre de mes cours de développement front-end. Ces TP m’ont permis de consolider les bases de l’intégration web, de comprendre les bonnes pratiques et de progresser pas à pas sur des notions clés du front.
Ces travaux ont été réalisés dans un objectif essentiellement pédagogique. Chaque TP aborde une notion précise du développement front, à travers des exercices courts et ciblés, afin de pratiquer concrètement les concepts vus en cours. Les TP sont regroupés dans une interface unique, sous forme de cartes, permettant d’accéder facilement à chaque exercice.
Le code source complet de ces mini jeux est disponible sur mon GitHub :
Consulter le dépôt GitHub
• Rôle : intégration front, mise en page, exercices pratiques
• utils : HTML, CSS, JavaScript, GitHub
Projet graphique autour de la création de deux jeux de cartes, chacun inspiré d’univers artistiques différents. Le premier jeu était traité en vectoriel (Illustrator) et le second en matriciel (Photoshop), avec des contraintes précises de style, de composition et de cohérence visuelle.
L’objectif du projet était de travailler l’identité visuelle à travers un objet imprimé simple mais exigeant. Chaque jeu de cartes devait traduire le style d’un artiste ou d’un mouvement graphique, tout en restant lisible, jouable et cohérent dans son ensemble.
Le travail a commencé par un repérage de références et une analyse des codes visuels de chaque artiste choisi. J’ai ensuite réalisé plusieurs pistes de croquis, puis décliné une direction finale pour chaque jeu :
Rôle : conception visuelle, illustration, mise en page des cartes
Outils : Adobe Illustrator, Adobe Photoshop
Compétences mobilisées : graphisme, branding visuel, préparation print