Pilier 01

Design
& UX

Le chemin le plus simple doit être le plus sûr.

Pourquoi

L'utilisateur qui contourne une contrainte mal pensée devient la première faille du système. Il note son mot de passe, clique sur « ignorer », désactive la double authentification. La plupart des incidents commencent par une friction d'ergonomie, pas par une prouesse technique.

Conception

Maquettes

Je dessine avant de coder. Sinon je code deux fois.

Maquette Figma d'une application de routines de soin : compte, catalogue de routines, fiche produit, détail et scan de code-barres — **Application de routines de soin** — parcours complet sur cinq écrans, du compte au scan de code-barres, avec analyse photo de la peau.

Les choix de conception

Un système, pas des écrans

Une seule palette, une seule échelle typographique, la même barre de navigation à quatre entrées partout. Chaque écran est une variation, jamais une exception.

Le type de peau d'abord

Toute l'application découle d'une seule donnée. Elle se demande dès le compte, et filtre ensuite tout le catalogue — l'utilisateur ne voit jamais de produit qui ne le concerne pas.

Deux entrées vers la même chose

Scanner un code-barres ou photographier sa peau mènent au même conseil. Deux gestes très différents, un seul résultat : c'est là que l'ergonomie se joue.

Les états sont dessinés

« Ajoutée au panier » et « Ajouter au panier » cohabitent dans la maquette. Ce sont deux états du même bouton, définis avant le développement.

Maquette Figma de Défiez-moi : connexion, inscription, dépôt d'image, historique des prédictions et statistiques, en versions bureau et mobile — **Défiez-moi** — interface d'un système de reconnaissance d'images par IA. Maquettée en version bureau et smartphone dès la conception.

Concevoir pour une IA qui se trompe

Le vrai sujet

Un modèle de reconnaissance a toujours tort une partie du temps. Le défi n'était pas d'afficher une prédiction, mais de rendre l'erreur acceptable pour l'utilisateur.

Trois réponses, pas deux

Le retour utilisateur propose « bravo », « non, c'est l'autre » et « ni l'un ni l'autre ». Ce troisième choix est le plus important : sans lui, on force l'utilisateur à mentir, et on pollue les données de réentraînement.

L'historique comme preuve

Chaque prédiction est conservée avec sa date, son retour et ses images téléchargeables. L'utilisateur peut vérifier le système, pas seulement le subir.

Le mobile dès le départ

Les versions smartphone ont été maquettées en même temps que le bureau, pas adaptées après coup. On photographie avec son téléphone — c'était l'usage principal, il ne pouvait pas être secondaire.

Réalisations

Interfaces

Quatre écrans de l'application : catalogue, filtre sans alcool actif, fiche cocktail et recherche sans résultat — **Reconstitution de l'interface** — le projet d'origine, développé en Swift, était hébergé sur un poste de l'IUT auquel je n'ai plus accès. Ces écrans ont été redessinés d'après la maquette et le code d'origine.

Bar à cocktails

iOS natif · Swift

Un client debout, dans le bruit, une seule main libre. Le catalogue est donc visuel, le filtre permanent, la recherche instantanée.

Les décisions de conception

Ce que j'ai tranché

Catalogue visuel en premier écran
Filtre alcool / sans alcool toujours visible
Recherche sans validation
Cibles tactiles pensées pour le pouce

Ce que je referais

Je n'avais pas dessiné les états vides. Je conçois désormais les quatre états — vide, chargement, erreur, succès — avant la première ligne de vue. Le quatrième écran est cette correction.

Éditeur Unity 6 : vue Scene et vue Game d'un environnement 3D low poly avec montagnes, eau, arbres et un cheval animé — Vue Scene en haut, rendu final en bas. Capture d'écran réelle.

Environnement Unity

Scène 3D · Unity 6 · C#

Vallée en low poly : relief sculpté, plan d'eau, roches et végétation instanciée, éclairage de coucher de soleil réglé par volume global. Un cheval animé parcourt la berge.

Club équestre Horsebond

Site complet · PHP · MySQL

Calendrier d'événements, boutique, espace membre, version bilingue. Une page longue où chaque bloc répond à une question que se pose un futur adhérent, dans l'ordre où il se la pose.

Jardin de Cocagne

Angular · Android · Node.js

Deux interfaces pour deux métiers opposés : le client qui commande en trois clics, l'administrateur qui organise des tournées de livraison. Un même modèle de données, deux grammaires d'usage.

Interface de connexion Java Swing du projet équestre — Écran de connexion, application compagnon du site équestre.

Interfaces Java Swing

Application desktop

Disposition adaptative et retour visuel immédiat. Le desktop impose sa propre grammaire : pas de geste, pas de défilement infini, tout doit tenir dans une fenêtre qu'on redimensionne.

Environnement du jeu 2D : décor, murs et personnage héros — L'environnement

Le héros face à un monstre dans le jeu 2D — Le monstre passe à l'état attaque

Moteur de jeu 2D

Java · POO · UML

Héros et monstres partagent une classe de base, chaque monstre suit une machine à états — promenade, collision, attaque. Le diagramme a été dessiné avant le code, et c'est ce qui a permis d'ajouter un type d'ennemi sans rien casser.

Le diagramme de classes

Diagramme de classes UML du moteur de jeu Java — Objet, ObjetHeros, ObjetMonstre et les états.

Page d'accueil du site GlobeTour : navigation, bandeau de destinations et présentation de l'agence — Bandeau de destinations, présentation, puis les offres.

GlobeTour — agence de voyage

Site responsive · PHP · MySQL

Catalogue de destinations, réservation en ligne, espace d'administration. Sept entrées de navigation, dont l'inscription et la connexion mises en évidence — ce sont les deux seules actions qui engagent le visiteur.

L'accessibilité est une question de sécurité.

Contraste, navigation clavier, clarté des messages d'erreur : je les traite comme des exigences de sécurité, pas comme du confort.

Ma méthode en quatre temps

01 — Comprendre

Qui s'en sert, dans quel contexte, et ce que ça coûte de se tromper.

02 — Structurer

Arborescence et parcours avant la couleur. On règle la navigation avant qu'elle ne coûte des jours.

03 — Maquetter

Composants réutilisables sous Figma, avec leurs états définis.

04 — Éprouver

Test sur appareil réel, clavier, contraste. Puis retour en arrière.

IA & Cybersécurité

Ouvrir → EN DIRECT

Labs

Ouvrir →

Design& UX