Pourquoi votre portfolio est plus important que votre CV

Dans le monde du design et du développement, personne ne vous embauche sur la base d’un CV. Les clients et recruteurs veulent voir ce que vous savez FAIRE, pas ce que vous prétendez savoir. Un portfolio bien construit est votre meilleur commercial : il travaille 24h/24, montre votre niveau réel, et attire les bons clients. Au Sénégal, les designers avec un portfolio en ligne attractif facturent 2 à 3 fois plus que ceux qui se contentent d’envoyer des fichiers par WhatsApp.

Choisir la bonne plateforme

Site personnel (recommandé)

Un site à votre nom de domaine (votreprénom.com ou votrenom.design) est le choix le plus professionnel. Vous contrôlez tout : design, contenu, SEO.

Framer — Le meilleur pour les designers. Templates magnifiques, animations natives, CMS intégré. Plan gratuit avec sous-domaine framer.site, plan custom domain à ~8$/mois
Webflow — Le plus puissant. Contrôle total sur le design sans code, animations avancées, CMS flexible. Plan gratuit limité, plans payants à partir de 14$/mois
WordPress + Starter thème — Le plus flexible et le moins cher à long terme. Hébergement à 15 000-25 000 FCFA/an chez Infomaniak ou o2switch. Nécessite plus de temps de configuration
GitHub Pages — 100% gratuit pour les développeurs. Site statique hébergé gratuitement. Parfait pour un portfolio HTML/CSS fait main qui montre vos compétences

Plateformes communautaires (en complément)

Behance — Le plus grand réseau de designers. Gratuit, bon référencement Google, intégré à Adobe. Idéal pour la visibilité et le networking
Dribbble — Plus sélectif, orienté UI/UX. Les « shots » (visuels carrés) montrent votre style. Les recruteurs tech y cherchent activement des designers
LinkedIn — Sous-estimé pour le portfolio. La section « Featured » permet d’afficher vos meilleurs projets directement sur votre profil

Stratégie optimale : Site personnel comme base + Behance/Dribbble pour la visibilité + LinkedIn pour le réseau professionnel.

Structure d’un portfolio qui convertit

Page d’accueil

Hero section : Votre nom, votre spécialité en une phrase (« Designer UI/UX basé à Dakar » ou « Développeur React & Next.js »), et un CTA (« Voir mes projets » ou « Me contacter »)
Grille de projets : 4 à 8 projets maximum, les meilleurs en premier. Chaque carte montre une image forte, le nom du projet, et le type (UI Design, Branding, Site web)
À propos bref : 2-3 phrases sur qui vous êtes, votre approche, et ce qui vous différencie
Contact : Email, WhatsApp, LinkedIn — visibles sans chercher

Page projet (étude de cas) — La clé

C’est là que vous vous démarquez. Chaque projet doit raconter une histoire en 4 parties :

Le contexte — Qui est le client ? Quel problème résolvez-vous ? Quelles contraintes ? « TechSen, startup de livraison à Dakar, avait besoin de redesigner son app pour réduire les abandons de commande de 40%. »
Le processus — Recherche, wireframes, itérations. Montrez vos brouillons, pas seulement le résultat final. Les clients veulent comprendre votre réflexion
La solution — Les designs finaux, en haute qualité, dans des mockups réalistes. Desktop ET mobile. Montrez les détails : micro-interactions, states, edge cases
Les résultats — Si possible, des chiffres : « +25% de conversions », « temps de chargement réduit de 6s à 1.8s », « 100% des feedbacks utilisateurs positifs ». Les chiffres font la différence

Quels projets montrer quand on débute

Pas de clients ? Pas de problème. Les meilleurs portfolios juniors incluent :

Redesigns — Prenez un site sénégalais populaire (Jumia, Expat-Dakar, Orange Sénégal) et redesignez-le. Montrez l’avant/après avec vos justifications
Projets personnels — Créez une app fictive qui résout un vrai problème local : gestion de tontines, réservation de cars rapides, commande de thiéboudienne. Le concept montre votre créativité
Challenges design — Daily UI (100 jours de design), Fake Clients Club, design challenges sur Dribbble. Ils prouvent votre régularité
Projets bénévoles — ONG, associations, petits commerces de votre quartier. Vous les aidez gratuitement, ils vous donnent un vrai projet pour votre portfolio et un témoignage
Contributions open source — Pour les développeurs : contribuez à un projet GitHub populaire. Les PR mergées sont la meilleure preuve de compétence

Design et UX du portfolio lui-même

Vitesse de chargement — Votre portfolio DOIT charger en moins de 2 secondes. Un designer qui a un site lent montre qu’il ne maîtrise pas les bases du web
Mobile-first — 70% des visiteurs verront votre portfolio sur mobile. Les images doivent être optimisées (WebP), le texte lisible sans zoomer
Typographie soignée — Utilisez maximum 2 polices. Inter ou DM Sans pour le corps, Clash Display ou Cabinet Grotesk pour les titres
Whitespace généreux — L’espace blanc est un indicateur de qualité. Un portfolio surchargé fait amateur. Laissez respirer vos projets
Navigation simple — Accueil, Projets, À propos, Contact. Pas de mega-menu ni de navigation complexe
Transitions fluides — Des animations subtiles entre les pages (View Transitions API ou Barba.js) montrent votre attention au détail

Erreurs fatales à éviter

Trop de projets médiocres — 5 excellents projets > 20 projets moyens. La qualité bat la quantité à chaque fois
Pas de contexte — Des images sans explication. Le recruteur veut savoir POURQUOI vous avez fait ces choix
Design daté — Un portfolio de 2020 avec des ombres portées et des dégradés flashy montre que vous ne suivez pas les tendances
Pas de CTA — Si le visiteur ne trouve pas comment vous contacter en 5 secondes, il part. Mettez votre email et WhatsApp partout
Projets sans cohérence — Si vous voulez faire du UI/UX, ne montrez pas 10 logos et 2 flyers. Spécialisez votre portfolio
Pas de favicon ni de meta tags — Quand quelqu’un partage votre lien sur WhatsApp ou LinkedIn, l’aperçu doit être propre (Open Graph tags)

SEO de votre portfolio

Titre de page optimisé : « Moussa Diop — Designer UI/UX Freelance à Dakar, Sénégal » (pas juste « Portfolio »)
Meta description : 150 caractères décrivant votre spécialité et votre localisation
Alt text sur chaque image : « Redesign de l’application mobile Orange Money — écran d’accueil » pas « image1.png »
URL propres : /projets/redesign-orange-money (pas /projet-id-12345)
Google Search Console : Soumettez votre sitemap. Gratuit et indispensable
Blog : 1 article/mois sur votre processus de design améliore significativement votre SEO

Maintenance et mise à jour

Fréquence : Ajoutez un nouveau projet tous les 1-2 mois. Retirez les anciens qui ne vous représentent plus
Analytics : Installez Plausible (respectueux vie privée) ou Google Analytics. Sachez d’où viennent vos visiteurs et quels projets ils regardent le plus
Feedback : Demandez à 3-5 designers seniors de critiquer votre portfolio. Leur regard extérieur révèle des points aveugles

Votre portfolio est un investissement qui rapporte pendant des années. Consacrez-y un week-end complet pour la première version, puis 2-3 heures par mois pour le maintenir à jour. C’est l’outil qui transforme un designer invisible en un professionnel que les clients contactent spontanément.

Étape 1 : sélectionner 6 à 8 projets, pas davantage

Un portfolio sature au-delà de 10 projets. Choisissez 6 à 8 réalisations qui couvrent vos 3 typologies de mission : identité visuelle, web design, design produit. Le recruteur ou le client lit en moins de 90 secondes ; il doit comprendre votre angle dès le scroll.

Pour chaque projet sélectionné, validez 4 critères : utilité réelle (problème résolu), qualité du livrable, droits d’usage clairs, et pertinence pour le type de mission visée. Sans ces 4 cases cochées, le projet sort de la liste.

Étape 2 : préparer les visuels en 3 formats

Chaque projet doit fournir : une vignette carrée 1080×1080 px (Instagram, LinkedIn), une image hero 1600×900 px (page projet), un mockup contextuel (téléphone tenu en main, écran sur bureau). Ces 3 formats couvrent tous les canaux de partage.

magick input.png -resize 1080x1080^ -gravity center -extent 1080x1080 vignette.jpg

Sortie attendue : un fichier vignette.jpg de 1080×1080 px, sans déformation. Si la commande renvoie « unable to open image », vérifiez que ImageMagick est installé via magick -version.

Étape 3 : raconter chaque projet en 4 blocs

Structure obligatoire : contexte (1 paragraphe sur le client et le besoin), processus (3 à 5 étapes avec visuels intermédiaires), livrable final (image hero), résultat mesuré (un chiffre ou une citation client). Les portfolios qui sautent le résultat passent pour des galeries d’images.

Ne romancez pas. Si le client n’a pas mesuré le ROI, citez un fait observable : « lancement tenu en 6 semaines », « validé par 5 décideurs en 1 réunion ». Un fait pèse plus qu’un superlatif.

Étape 4 : choisir la plateforme adaptée à votre étape

Trois options : Behance ou Dribbble (gratuit, communauté, peu de maîtrise SEO), un site WordPress sur domaine perso (contrôle total, 30 000 à 60 000 FCFA par an), Notion ou Cargo (rapide à monter, design contraint). Pour démarrer à Dakar, WordPress sur domaine .sn ou .com offre le meilleur rapport autorité / coût.

Si vous visez une mission salariée à l’international, Behance suffit. Si vous démarchez des clients locaux, le domaine personnel fait gagner 30 % de crédibilité dès le premier appel.

Étape 5 : optimiser la page d’accueil pour 90 secondes

Au-dessus de la ligne de flottaison : votre nom, une promesse en 8 mots, 3 vignettes projets, un bouton de contact. Pas de carrousel, pas d’animation lourde, pas de texte d’introduction de 5 paragraphes. Le visiteur scrolle ou repart.

Testez sur mobile en 4G : la home doit s’afficher en moins de 2,5 secondes. Au-delà, un client pressé qui consulte entre deux rendez-vous part sans cliquer.

Étape 6 : configurer le SEO et le partage social

Title de la home : « Prénom Nom — Designer [spécialité] Dakar ». Meta description : 130–156 caractères avec votre promesse et votre zone. Image OpenGraph 1200×630 px qui montre votre meilleur projet, pas un logo abstrait.

curl -s -A "facebookexternalhit/1.1" "https://votre-portfolio.com" | grep -i 'og:'

Sortie attendue : 4 lignes og:title, og:description, og:image, og:url. Si une seule manque, le partage WhatsApp affichera une carte cassée.

Étape 7 : ajouter une page « Travailler avec moi »

Cette page convertit. Quatre sections : ce que vous faites, ce que vous ne faites pas, votre processus en 5 étapes, vos tarifs ou fourchette en FCFA (par exemple, 350 000 à 850 000 FCFA pour une identité visuelle complète). Afficher un prix filtre les prospects et fait gagner 80 % du temps de qualification.

Si vous refusez d’afficher un prix, indiquez au minimum un budget plancher. Sans repère, vous recevrez 90 % de demandes hors-cible.

Étape 8 : intégrer un canal de paiement local

Pour les acomptes à distance, intégrez un lien Wave ou Mixx by Yas dans la page contact. Un client qui veut signer le vendredi soir n’attend pas un virement bancaire jusqu’au mardi suivant.

Sur un angle proche sur la mise en page, voyez les bases de la composition visuelle. Pour structurer un design system pérenne, lisez notre guide design system.

Étape 9 : alimenter LinkedIn et Behance en cascade

Chaque nouveau projet : page sur votre site (source canonique), post LinkedIn (vignette + 3 paragraphes + lien), case study Behance (visuels haute résolution). Le canonical reste votre site, les autres canaux pointent vers lui. Vous capitalisez sur votre domaine sans cannibaliser le SEO.

Rythme tenable : 1 nouveau projet publié toutes les 6 à 8 semaines. Au-delà, vous étalez ; en deçà, le portfolio paraît figé.

Étape 10 : mesurer et itérer chaque trimestre

Trois indicateurs : trafic mensuel sur la page d’accueil, taux de clic vers la page contact, nombre de devis émis. Si le trafic monte mais les devis stagnent, votre page contact freine. Si les devis sortent mais aucun ne se signe, votre fourchette tarifaire est mal calibrée.

Réauditez tous les 90 jours. Un portfolio est un produit vivant : 12 mois sans mise à jour le rendent invisible aux yeux des clients comme à ceux de Google.

Étape 11 : protéger les droits et l’éthique de présentation

Avant d’afficher un projet client, obtenez un accord écrit (un mail signé suffit) précisant que vous pouvez publier les visuels et nommer la marque. Pour les projets sous NDA, montrez le processus avec des données floutées et omettez le nom du client. Tricher sur cette ligne ruine une réputation en un appel téléphonique.

Pour les projets personnels, indiquez clairement « projet personnel » ou « concept ». Le mélange entre travail réel et exercice de style trompe le client et finit toujours par se voir lors d’un brief technique.

Étape 12 : préparer une version PDF imprimable

Certains clients institutionnels (administrations, grandes entreprises de Dakar ou Abidjan) demandent un dossier PDF avant tout entretien. Préparez une version 12 pages, A4 portrait, sous 8 Mo, qui reprend les 6 meilleurs projets. Hébergez-la sur votre site avec un lien direct dans la page contact.

magick *.png -resize 1240x1754 -quality 85 portfolio.pdf

Sortie attendue : un fichier portfolio.pdf prêt à envoyer. Si la taille dépasse 10 Mo, baissez la qualité à 75 ou réduisez les dimensions à 1100×1556 px.

Étape 1 : cadrer l’objectif du portfolio avant de toucher Figma

Avant d’ouvrir un outil, posez-vous une question simple : à qui ce portfolio s’adresse-t-il ? Un studio à Dakar qui recrute un UI designer junior ne lit pas votre site comme une agence à Abidjan qui cherche un freelance senior. Cette différence change la sélection de projets, le ton, la photo de couverture, jusqu’au choix du domaine. Sans cible précise, vous tombez dans le piège du portfolio générique qui n’accroche personne.

Écrivez sur une feuille trois éléments : le poste visé (intitulé exact d’une offre réelle), le type d’employeur (studio, agence, ESN, in-house, freelance), et la zone géographique. Notez ensuite les trois compétences que ce profil doit démontrer. Si vous visez un poste de produit SaaS chez une fintech qui opère sur Mixx by Yas et Wave, montrez de l’UX mobile-first, du onboarding KYC, et des dashboards transactionnels — pas des affiches de festival.

# Brief portfolio - exemple
Poste vise   : Product Designer mid (3-5 ans)
Cible        : fintech / paiement mobile, Afrique de l'Ouest
Top 3 skills : flows mobile, design system, UX research
Domaine NDD  : prenom-nom.com (eviter les sous-domaines gratuits)
Budget hebdo : 4 h, pendant 6 semaines

À la sortie de cet exercice vous devriez tenir une fiche d’une page. Cette fiche est votre seule boussole : chaque décision design ultérieure doit pouvoir s’y rattacher. Si un projet ne sert pas la cible, il dégage du portfolio même s’il vous plaît visuellement.

Étape 2 : sélectionner trois à cinq projets seulement

Le réflexe du débutant est d’empiler quinze projets pour rassurer. C’est l’erreur qui fait fuir les recruteurs. Trois projets bien racontés battent dix vignettes muettes. Sélectionnez trois projets minimum, cinq maximum. Au-delà, l’attention du visiteur se dilue et chaque projet supplémentaire abaisse la moyenne perçue de votre travail.

Pour chaque candidat à la sélection, notez : problème résolu, contexte client, votre rôle exact, et un chiffre. Si vous n’avez aucun chiffre — temps gagné, taux de conversion, NPS, nombre d’utilisateurs — le projet n’est pas mûr pour le portfolio. Soit vous allez chercher la donnée auprès du client, soit vous le retirez. Un projet sans preuve d’impact reste un exercice d’école.

# Grille de selection - cocher 4/5 minimum
[ ] Probleme business clair (1 phrase)
[ ] Mon role precis (UI seul ? UX + UI ? recherche ?)
[ ] Process documente (artefacts intermediaires existants)
[ ] Resultat mesurable (chiffre, citation client, before/after)
[ ] Droit de publication (NDA verifie)

À la fin, classez les projets retenus par ordre de pertinence pour la cible. Le premier en haut de page doit être celui qui démontre le plus directement la compétence-clé du poste visé. Les autres soutiennent la démonstration.

Étape 3 : structurer chaque étude de cas en cinq blocs

Une étude de cas qui convertit tient sur cinq blocs et pas un de plus : contexte, problème, processus, solution, résultat. Cette structure copie celle des décisions business : un recruteur peut la scanner en quarante secondes et savoir s’il veut lire en détail. Toute autre organisation alourdit la lecture sans bénéfice.

Le bloc contexte tient en deux phrases. Le problème doit être formulé du point de vue de l’utilisateur, pas du client. Le processus montre trois à cinq artefacts maximum (sketches, wireframes, tests utilisateurs) avec une légende qui explique pourquoi cette étape, pas seulement quoi. La solution présente l’écran final en grand. Le résultat donne le chiffre.

<article class="case-study">
  <header>
    <h1>Refonte du tunnel de paiement - app Wave</h1>
    <p class="meta">Product Designer | 6 semaines | 2025</p>
  </header>
  <section data-block="contexte">...</section>
  <section data-block="probleme">...</section>
  <section data-block="processus">...</section>
  <section data-block="solution">...</section>
  <section data-block="resultat">
    <p>Taux de completion +18 % en 4 semaines.</p>
  </section>
</article>

Cette structure HTML simple est volontairement plate. Vous pouvez l’habiller librement en CSS, mais la hiérarchie sémantique reste la colonne vertébrale du récit. Un recruteur qui désactive les styles doit toujours pouvoir lire votre étude de cas.

Étape 4 : choisir une stack technique sobre et rapide

Un portfolio design jugé sur sa lenteur perd la moitié de sa valeur. Un site qui met 4 secondes à charger sur une connexion 3G dakaroise est éliminatoire pour un poste qui touche du mobile. Mesurez. Le bon outil pour un portfolio reste un générateur statique avec images optimisées et hébergement edge.

Trois stacks sobres et solides en 2026 : Astro + Netlify, Next.js statique + Vercel, ou Eleventy + Cloudflare Pages. Évitez WordPress sauf si vous maîtrisez la perf. Évitez les builders no-code chargés en JS qui plombent le LCP. Sur l’iconographie, restez monochrome ou bichrome ; trois couleurs maximum dans toute la palette.

# Bootstrap Astro en local (2 min)
npm create astro@latest portfolio
cd portfolio
npm install
npm run dev
# ouvrir http://localhost:4321

Au bout de cette commande, Astro affiche un site vide mais déjà parfaitement scoré sur Lighthouse. Tout ce que vous ajoutez ensuite — composants, images, polices — devra préserver ce score. Mesurez à chaque étape avec PageSpeed Insights ; refusez tout ajout qui fait tomber le score perf sous 90.

Étape 5 : optimiser images et polices pour l’Afrique de l’Ouest

Une image mal compressée pèse parfois 3 Mo alors que la même qualité visuelle tient en 80 Ko. Sur une connexion à Thiès ou Bouaké, cette différence se compte en secondes d’attente. La règle : aucune image au-dessus de 200 Ko sauf cas exceptionnel, format WebP ou AVIF, dimensions adaptées au conteneur réel.

Pour les polices, deux familles maximum, formats WOFF2, chargement via font-display: swap. Évitez Google Fonts en lien direct ; auto-hébergez. Cela économise un round-trip DNS qui coûte cher hors Europe.

# Compresser un dossier d'images en WebP (linux/mac)
for f in src/images/*.png; do
  cwebp -q 80 "$f" -o "${f%.png}.webp"
done
# Verifier les tailles
du -sh src/images/*.webp | sort -hr | head -5

La sortie attendue affiche les cinq plus grosses images en WebP. Si l’une dépasse 200 Ko, retravaillez-la (recadrer, baisser la qualité à 70, ou réduire la résolution). C’est ce travail invisible qui fait la différence entre un portfolio qui charge et un portfolio que personne n’attend.

Étape 6 : rédiger le About avec un angle clair

La page À propos est le deuxième endroit le plus visité d’un portfolio, juste après la home. Pourtant 80 % des candidats y placent une bio générique sans angle. Le résultat : le recruteur ne retient rien et passe au candidat suivant. Une bonne page À propos répond à trois questions en moins de 250 mots : qui je suis, ce que je fais de différent, ce que je cherche.

Évitez les superlatifs vides (« passionné », « créatif »). Préférez les faits : années d’expérience, secteurs travaillés, types de produits livrés. Une photo professionnelle aide la confiance — pas un selfie. Mentionnez votre ville actuelle ; cela rassure les recruteurs locaux qui veulent du présentiel ponctuel.

Pour le SEO local, intégrez naturellement le nom de votre ville et un mot-clé métier dans le premier paragraphe. Cela suffit pour remonter sur des recherches comme « product designer Dakar » sans tomber dans le bourrage.

Étape 7 : intégrer un point de contact qui marche vraiment

Un formulaire de contact buggé ou un mailto qui ouvre Outlook chez un visiteur sous Gmail tue 30 % des prises de contact. La règle : afficher l’adresse e-mail en clair (texte sélectionnable), proposer un lien WhatsApp avec numéro pré-rempli, et ajouter un lien LinkedIn. Pas de formulaire à vingt champs.

<a href="https://wa.me/221700000000?text=Bonjour%20je%20vous%20contacte%20depuis%20votre%20portfolio">
  WhatsApp
</a>
<a href="mailto:vous@domaine.com">vous@domaine.com</a>
<a href="https://www.linkedin.com/in/votre-handle">LinkedIn</a>

Le lien wa.me avec texte pré-rempli convertit nettement mieux qu’un simple numéro. Le visiteur clique, le message est déjà tapé, il appuie sur envoyer. Ce micro-design réduit la friction de plusieurs ordres de grandeur.

Étape 8 : tester en conditions réelles avant publication

Un portfolio testé uniquement sur votre MacBook en wifi fibre ne représente pas ce que vivent vos visiteurs. Avant de publier le domaine final, testez sur trois configurations : un smartphone Android entrée de gamme, une connexion 3G simulée, et un navigateur Edge ou Samsung Internet. Trois quarts des bugs visibles n’apparaissent que dans ces conditions.

Ouvrez Chrome DevTools, onglet Network, choisissez « Slow 3G ». Naviguez votre site comme un vrai visiteur. Si une page met plus de 5 secondes à charger ou si une image bloque l’affichage du texte, retournez à l’étape 5. Recommencez jusqu’à ce que la première interaction utile arrive en moins de 3 secondes.

# Lighthouse en CLI - audit complet
npm install -g lighthouse
lighthouse https://votre-domaine.com --only-categories=performance,accessibility,best-practices,seo --output=html --output-path=./audit.html

Le rapport HTML généré liste précisément ce qui plombe vos scores. Visez 90+ partout. Un portfolio design qui ne tient pas 90 en accessibilité envoie un signal négatif : votre travail manque de rigueur sur des fondamentaux qu’un recruteur sait vérifier en quinze secondes.

Étape 9 : suivre le trafic et itérer chaque mois

Un portfolio livré n’est pas un portfolio fini. Posez Plausible ou un équivalent respectueux de la vie privée — pas Google Analytics qui alourdit la page et inquiète les recruteurs européens sensibles au RGPD. Mesurez : pages vues, durée moyenne, étude de cas la plus lue, source de trafic.

Au bout d’un mois, regardez quelle étude de cas tient l’attention le plus longtemps : c’est votre projet phare, mettez-le en premier. Quelle source de trafic convertit en e-mail ? Investissez là, abandonnez le reste. Un portfolio qui n’évolue pas pendant six mois devient invisible aux yeux des moteurs comme à ceux des recruteurs qui repassent.

Étape 10 : préparer la suite — devis, contrats, missions

Si l’objectif est freelance, votre portfolio est une porte d’entrée vers des missions. Préparez en parallèle un modèle de devis simple en FCFA (1 EUR = 655,957 FCFA pour les conversions), des CGV adaptées au droit OHADA si vous opérez en zone CEDEAO, et un compte Mixx by Yas ou Wave pour encaisser sans friction. Sans cette infrastructure, un visiteur intéressé qui demande un devis attend trois jours et part chez un concurrent plus organisé.

Lectures complémentaires sur la structuration freelance, lisez notre guide gestion de projet pour freelances et notre dossier marketing digital pour devs et designers. Un portfolio est un actif ; comme tout actif, il rend ce que vous y investissez en suivi et en mise à jour.