Mon Portfolio x Claude — Étude de cas

Le défi

Co-créer un portfolio qui me ressemble.

Ce projet est né d'un double constat :

Sur Behance, les profils de designer se perdent et représentent difficilement les personnalités.
Intégrer l'IA dans son quotidien de designer web est fondamental.

Designer UX/UI avec un parcours en product management, j'avais besoin d'un portfolio qui mette en valeur mes compétences design autant que ma vision produit et marketing — tout en restant personnel (fini les templates !).

« Mais en fait, ça te dit que je te montre comment utiliser Claude Code ? Tu pourrais te faire un portfolio de ouf et toute seule. »
— Un ami développeur bienveillant

Un aperçu de notre duo créatif

Moi

J'ai besoin d'un hero qui me ressemble : chaleureux, coloré selon ma palette, avec l'illustration que j'ai faite à droite. La partie gauche doit annoncer mon métier et donner envie d'en savoir plus.

Claude

Voici une première version : badge "Disponible", titre en deux lignes avec un mot-clé en violet, sous-titre court, et un CTA "Voir mes projets". J'ai placé ton illustration à droite. Veux-tu que je modifie quelque chose ?

Processus de design

De la page blanche au site en ligne.

Identité visuelle

Palette de couleurs
Typographie
Style d'illustration
Ambiance générale : chaleureuse et professionnelle

Claude transforme mes idées créatives en code et suggère des alternatives quand elles coincent côté développement.

Contenu & structure

Architecture du site, des pages. Hiérarchie visuelle
Rédaction des textes
Parcours utilisateur
Définition des problèmes et des solutions

Chaque section raconte une partie de l'histoire, chaque section a sa place afin de guider naturellement l'utilisateur.

Design & développement

UI sur Figma, code sur Claude
Commenter, itérer, commenter, itérer
Traduction EN → FR
Il faut maintenant passer à la version mobile

Rien n'est figé du premier coup. Je donne mon feedback, Claude et moi se posons des questions, et on affine ensemble.

Finitions & publication

Portfolio, final final = jamais vraiment fini
Publication en ligne
Demander des retours utilisateurs
Mettre à jour les problématiques soulevées

Peaufiner les détails, les micro-interactions, la réactivité du design… Tous ces petits éléments font la différence.

Charte graphique

L'IA comme partenaire créatif, pas comme raccourci.

Travailler avec Claude, ce n'est pas automatiser la génération d'un site. C'est une conversation, affiner des idées, questionner des choix jusqu'à ce que le moindre détail soit juste.

Couleurs

Violet
#755BF8

Couleur primaire

Annonce de la créativité et inspiration.

Jaune or
#FDB833

Couleur d'accent

Apporte enthousiasme et convivialité.

Bleu
#006AFF

Couleur d'action

Évoque la confiance et le professionnalisme.

Lilas
#B7BBF4

Couleur secondaire

Symbolise le calme, l'esthétique.

Ivoire
#FFFAEB

Couleur de fond

Pour casser la simplicité du blanc pur.

Noir onyx
#0A0A0A

Couleur de texte

Pour ajouter une touche de mystère.

Typographie

Police primaire Aa Baloo Utilisée pour les titres, sous-titres.

Police secondaire Aa Louis George Cafe regular Louis George Cafe bold Louis George Cafe italic Utilisée pour les intertitres en majuscules, et comme tapée pour le corps, le pieds de page, les boutons et les citations.

Hiérarchie typographique

Titre principal

Intertitre

Sous-titre

Corps de texte

Légende

Illustrations

Itérations

Du brouillon à la version en ligne.

V1 — wireframes basse fidélité du portfolio — Du wireframe basse fidélité…

V2 — wireframes haute fidélité du portfolio — …au premier jet de Claude

Une idée. Quelques phrases pour la décrire. Trente secondes pour avoir un aperçu. Cette boucle ultra-courte change tout : on teste plus, on doute moins, on arrive plus vite à la version qui fonctionne.

Exemple d'itération — évolution d'un écran du portfolio

Exemple d'itération — second écran du portfolio

Leçons apprises

Ce que Claude m'a appris

Au-delà du résultat, ce projet m'a appris autant sur l'IA que sur ma façon de designer. Voici les quatre leçons que je retiens, jusqu'aux prochaines…

Briefer devient une compétence

Travailler avec l'IA est une compétence à part entière : la qualité du résultat dépend de la qualité de la consigne. Il faut être précis et se dire que briefer, c'est designer.

Apprendre en continu

Chaque échange avec Claude m'a appris quelque chose — sur le code, sur le design, l'accessibilité ou encore sur la manière de formuler une idée. Un vrai compagnon d'apprentissage.

Itérer sans limite (ou presque)

La rapidité de l'IA permet d'explorer plus de pistes en moins de temps. On peut tester, ajuster, recommencer — sans la fatigue du code et du design manuel.

S'ouvrir à l'IA

Ce projet m'a prouvé que l'IA peut être un puissant accélérateur créatif si la vision est clairement définie et que les bases en design sont solidement posées. Le designer reste aux commandes, mais tout devient plus fluide.

Mon Portfolio x Claude
— Processus créatif