Portfolio Armelle GHISLERI

Application personnelle

application mobile · Figma · iPhone 16 · direction artistique · identité visuelle · palette chromatique · typographie · formes organiques · illustration botanique · Auto Layout · Components · Variants · Smart Animate · prototypage · liste déroulante animée · hiérarchie visuelle · navigation · UX writing · mise en scène graphique · UX/UI Designer · système d’interface

Dans le cadre du BUT MMI à l’IUT de Toulon, j’ai conçu une mini-application mobile de présentation personnelle sur Figma, au format iPhone 16. Ce projet individuel avait pour objectif de créer 4 écrans interactifs me permettant de me présenter à travers trois catégories : Qui je suis, Ce que j’aime dans la vie et Mon rêve, tout en maîtrisant les techniques avancées de prototypage, de composants et d’animation dans Figma. Il s’agissait autant d’un exercice technique que d’un exercice de direction artistique, puisque la DA devait refléter ma personnalité.

– Définition de la direction artistique personnelle
Avant de toucher à Figma, j’ai réfléchi à la direction artistique que je souhaitais donner à cette application : une esthétique organique, douce et naturelle, cohérente avec ma personnalité créative et sensible. J’ai choisi une palette chromatique en teintes crème, beige et taupe, associée à des formes fluides et végétales (illustrations botaniques au trait, formes amiboïdes) et une typographie expressive à empattements ronds, évoquant le style art nouveau. L’ensemble devait donner l’impression d’une interface à la fois élégante, chaleureuse et personnelle.

– Construction de l’architecture des écrans et de la navigation
J’ai ensuite structuré les 4 écrans du projet : un écran d’accueil avec photo et bouton « Me découvrir », un écran principal avec liste déroulante animée comportant les trois catégories, puis trois écrans de développement dédiés à chacune. La navigation a été pensée pour être intuitive et fluide, avec une barre de navigation fixe en bas d’écran permettant de circuler librement entre les sections. Chaque écran a été organisé selon une hiérarchie visuelle claire, garantissant lisibilité et cohérence.

– Maîtrise technique des outils Figma
Sur le plan technique, ce projet m’a permis de mettre en pratique des outils avancés de Figma : l’Auto Layout pour garantir la cohérence des espacements, les Components et Variants pour les boutons interactifs et la liste déroulante, le Smart Animate pour fluidifier les transitions entre écrans. La liste déroulante animéea nécessité un travail particulier sur les états de composants afin d’obtenir un rendu naturel et professionnel. Le prototypage final permet une navigation complète et immersive entre tous les écrans.

– Contenu éditorial et mise en scène personnelle
Le contenu de chaque écran a été pensé avec soin pour révéler ma personnalité de manière authentique et engageante. L’écran Qui je suis mêle éléments biographiques visuels (photo de bébé, carte de la Provence, première voiture) et galerie de créations. L’écran Ce que j’aime présente mes passions, équitation, photographie, sport, amis, avec photos personnelles et micro-textes poétiques. L’écran Mon rêve développe mon ambition de devenir UX/UI Designer, illustrée par des références inspirantes et des destinations de voyage. Ce travail éditorial relève pleinement de l’UX writing et de la mise en scène graphique.

– Posture réflexive

Ce projet m’a confrontée à un exercice rare et exigeant : me mettre moi-même en scène comme sujet de design. Cette contrainte m’a obligée à réfléchir à ce que je voulais transmettre, à la cohérence entre fond et forme, entre mon identité personnelle et les choix graphiques qui la représentent. Chaque couleur, chaque typographie, chaque illustration devait être justifiable non pas par un brief extérieur, mais par ma propre vision artistique.

J’ai également progressé dans ma maîtrise de Figma en tant qu’outil de prototypage avancé. Travailler les composants, les variants et les animations Smart Animate m’a appris à penser l’interface non pas comme une succession d’écrans statiques, mais comme un système vivant et cohérent, où chaque interaction contribue à l’expérience globale. Cette approche systémique est au cœur du métier d’UX/UI Designer que je souhaite exercer.

Ce projet m’a permis de consolider des compétences techniques solides sur Figma, Auto Layout, Components, Variants, Smart Animate, prototypage, tout en développant ma sensibilité en matière de direction artistiquepersonnelle. Il m’a donné l’occasion de produire une interface mobile complète, cohérente et expressive, à la fois sur le plan visuel et éditorial. Ce projet est pour moi une trace significative de ma progression vers le métier d’UX/UI Designer : savoir créer une expérience qui raconte une histoire, guide l’utilisateur et reflète une identité.

COMPÉTENCES MMI

Exprimer une identité visuelle et éditoriale transmédia
Co-concevoir une réponse stratégique

APPRENTISSAGES CRITIQUES

AC23.03 – Créer et décliner une identité visuelle (charte graphique)

AC22.01 – Co-concevoir un produit ou un service (proposition de valeur, fonctionnalités…)

AC22.02 – Produire une recommandation ergonomique à partir des tests utilisateurs (sur système fonctionnel, prototype ou maquette interactive)

AC23.05 – Réaliser, composer et produire pour une communication plurimédia

AC25.05 – Maîtriser les codes des productions écrites et orales professionnelles