
UX & UI : Différences, Rôles et Méthode pour Booster vos Conversions
UX et UI : deux disciplines complémentaires qui déterminent la réussite de votre site web. Définitions, différences, salaires, méthode en 5 étapes et erreurs à éviter pour les PME.
Un portfolio UX UI designer est une vitrine structurée qui montre comment vous résolvez un problème utilisateur, pas seulement comment vous dessinez des écrans. En 2026, il doit permettre à un recruteur de comprendre en moins de 60 secondes votre méthode, votre niveau visuel et votre impact métier.
Les portfolios qui décrochent des entretiens partagent le même réflexe : ils remplacent la galerie décorative par des études de cas lisibles. Les recruteurs veulent voir un contexte, une contrainte, une décision de design et un résultat observable, pas une mosaïque Behance impossible à interpréter. C'est aussi la logique défendue par les contenus de NNGroup sur les case studies et par les conseils de recruteurs design relayés par Dribbble (source : NNGroup, 2025) (source : Dribbble, 2025).
Pour une PME qui cherche un profil capable de travailler avec des développeurs, le portfolio sert de preuve opérationnelle. Il doit montrer votre rigueur sur les maquettes, votre compréhension des parcours UX/UI et votre capacité à transformer une intention business en interface crédible. Si vous construisez aussi votre présence pour vendre une prestation, reliez le portfolio à une page de service claire comme design de site web afin de capter les demandes entrantes sans noyer le lecteur sous les options.
Ce que votre portfolio doit rendre visible
3
études de cas solides minimum
60 s
pour faire comprendre votre niveau
1
problème utilisateur clair par projet
0 blabla
si le résultat n'est pas mesurable

La structure la plus efficace reste simple : page d'accueil, promesse claire, trois études de cas, page À propos, contact. Vous pouvez ajouter une section ressources ou des explorations visuelles, mais jamais avant vos preuves principales. Un recruteur ou un prospect doit savoir immédiatement pour quel type de problème on peut vous confier une mission : refonte SaaS, tunnel e-commerce, back-office métier, application mobile ou design system (source : Dribbble, 2025).
La page d'accueil n'a pas besoin d'effets complexes. Elle doit répondre à quatre questions : qui êtes-vous, pour quel type de produit, avec quelle méthode, et quel résultat vous savez obtenir. Sur ce point, beaucoup de portfolios ratent leur cible parce qu'ils ressemblent à des galeries artistiques. Si votre ambition est de travailler sur des produits concrets, montrez des livrables concrets : flux, wireframes, tests, maquettes finales, décisions de priorisation. Votre travail doit sembler exploitable par une équipe produit, pas uniquement admirable.
Ajoutez aussi des indices de fiabilité : lien LinkedIn, adresse email visible, version mobile propre, temps de chargement correct et hiérarchie lisible. Google rappelle que l'expérience de page et les Core Web Vitals participent à la perception globale de qualité, y compris pour un site vitrine personnel (source : Google, 2025). Si vous publiez votre portfolio sur votre propre site, appliquez les mêmes standards que pour un portfolio UX UI designer conçu pour un client : lisibilité, responsive et vitesse.
La structure minimale d'un portfolio UX UI designer crédible
| Bloc | Ce qu'il doit contenir | Ce qu'il faut éviter |
|---|---|---|
| Accueil | Positionnement, type de missions, 3 liens vers vos cas | Hero vide ou slogan flou |
| Étude de cas | Contexte, rôle, méthode, écrans, impact | 20 captures sans explication |
| À propos | Parcours, spécialité, façon de collaborer | Bio générique sans angle |
| Contact | Email, calendrier ou formulaire court | Formulaire trop long |
| Mobile | Lecture facile, images légères, CTA visible | Version cassée sur smartphone |
Une étude de cas convaincante suit une logique proche d'un mini audit. Elle commence par le contexte : entreprise, produit, audience, problème initial, contraintes de délai ou de budget. Elle continue avec votre rôle exact et votre méthode, puis se termine par le résultat. NNGroup recommande une narration qui permet de relier le problème utilisateur aux décisions de design prises à chaque étape, au lieu de présenter seulement la solution finale (source : NNGroup, 2025).
Dans les faits, chaque étude de cas doit répondre à six questions. Quel était le problème ? Qui était concerné ? Qu'avez-vous fait précisément ? Qu'avez-vous arbitré ? Qu'est-ce qui a changé ? Qu'auriez-vous amélioré avec plus de temps ? Cette dernière partie compte beaucoup. Les portfolios trop lisses paraissent souvent scolaires. Montrer une contrainte réelle ou un compromis assumé renforce votre crédibilité bien plus qu'une série de mockups parfaits.
Un premier exemple PME parle immédiatement. Un client e-commerce de 14 salariés perdait du chiffre sur mobile, avec un tunnel à cinq étapes et un taux d'abandon panier élevé. Le designer a réduit le parcours à trois étapes, clarifié les états de formulaire et refondu la hiérarchie des boutons. Résultat : +22 % de conversion mobile en 8 semaines. Un second cas PME, dans le B2B logiciel, a revu un back-office utilisé par 11 commerciaux : temps de création d'offre réduit de 12 minutes à 7 minutes après simplification des filtres et des écrans de saisie. Ce type de récit vaut plus qu'une galerie anonyme.

Le piège classique consiste à gonfler des résultats impossibles à vérifier. Vous n'avez pas besoin d'afficher un +300 % partout pour convaincre. Vous avez besoin de montrer des indicateurs cohérents avec votre périmètre. Si vous avez travaillé sur un formulaire, parlez du taux de complétion. Sur un back-office, montrez le temps moyen gagné par tâche. Sur une refonte mobile, comparez le taux de rebond ou la profondeur de scroll. Cette précision fait immédiatement la différence entre un portfolio junior et un portfolio crédible.
Les indicateurs les plus utiles sont souvent simples : nombre d'étapes supprimées, clics évités, baisse des tickets support, adoption d'une nouvelle fonctionnalité, temps de tâche réduit, cohérence du design system. Google insiste sur la qualité de l'expérience réelle et mesurable via les signaux d'usage et de performance, notamment sur mobile (source : Google, 2025). Autrement dit, un portfolio UX UI designer gagne en valeur quand il parle le langage du produit et du business, pas uniquement celui de la forme.
Autre exemple PME parlant : une société de services de 22 salariés présentait ses offres via un site dense, peu hiérarchisé. Après refonte des pages services, réécriture des titres et simplification du formulaire, les prises de contact qualifiées sont passées de 9 à 14 par mois en 10 semaines. Le designer a bien fait une chose : il a relié chaque choix visuel à un objectif métier. Si vous savez expliquer ce chaînage dans votre portfolio, vous vous différenciez immédiatement des portfolios purement visuels.

Le premier écueil est le portfolio trop abstrait. Visuellement, il peut être impeccable, mais s'il ne dit pas ce que vous avez résolu, il laisse le lecteur avec une seule information : vous savez composer une belle page. Pour un poste produit, une mission freelance ou une collaboration PME, c'est insuffisant. Les recruteurs design soulignent régulièrement qu'ils cherchent la qualité du raisonnement autant que la qualité des écrans (source : Dribbble, 2025).
Le second écueil est la confusion entre inspiration et preuve. Behance, Dribbble ou Pinterest sont utiles pour se situer visuellement, mais un portfolio professionnel doit montrer votre niveau de décision, pas votre capacité à reproduire une tendance. Une belle interface sans contrainte, sans flux, sans test et sans résultat reste une démonstration esthétique. Elle n'aide pas un dirigeant à savoir si vous pouvez améliorer un tunnel, cadrer un design system ou collaborer avec un développeur sur un produit réel.
Le troisième écueil est technique : images trop lourdes, texte minuscule, contrastes faibles, navigation mobile pénible. Or un portfolio lent ou peu accessible contredit votre propre discours UX. Si vous parlez d'expérience utilisateur, votre site doit déjà l'incarner. Notre guide sur le responsive design et celui sur l'accessibilité web rappellent la même règle : la démonstration commence par votre propre interface.
Retenez seulement les projets capables de montrer un problème, une méthode et un résultat. Écartez les explorations jolies mais sans preuve.
Rédigez le contexte, le rôle, les arbitrages et les KPI avant de polir la mise en forme. Si l'histoire n'est pas claire, le design ne la sauvera pas.
Positionnement, spécialité, liens vers les cas, email et promesse claire. Supprimez tout ce qui détourne de ces éléments.
Vérifiez la lisibilité, compressez les images, corrigez les contrastes, demandez un retour à 3 personnes et publiez une version simple mais nette.
Retenez seulement les projets capables de montrer un problème, une méthode et un résultat. Écartez les explorations jolies mais sans preuve.
Rédigez le contexte, le rôle, les arbitrages et les KPI avant de polir la mise en forme. Si l'histoire n'est pas claire, le design ne la sauvera pas.
Positionnement, spécialité, liens vers les cas, email et promesse claire. Supprimez tout ce qui détourne de ces éléments.
Vérifiez la lisibilité, compressez les images, corrigez les contrastes, demandez un retour à 3 personnes et publiez une version simple mais nette.
Nous avons recruté le designer parce que son portfolio expliquait très bien ses arbitrages. En entretien, nous avons retrouvé exactement la même rigueur que sur les études de cas. Trois semaines après son arrivée, il avait déjà remis de l'ordre dans notre tunnel de devis.
Camille Roussel
Directrice marketing — Équip'Pro BTP (27 salariés)
Le meilleur format n'est pas le plus sophistiqué, c'est le plus lisible. Un site simple, rapide, bien hiérarchisé et maintenable vaut mieux qu'une expérience immersive fragile. Si vous êtes junior, commencez par un site propre avec trois cas détaillés. Si vous êtes confirmé, ajoutez éventuellement un système de filtres, une page ressources ou un angle sectoriel. Le niveau de détail doit augmenter avec votre expérience, pas avec votre goût pour les animations.
Ne publiez pas tout. Certaines captures client, certains chiffres ou certains flows internes doivent rester anonymisés. Le bon réflexe consiste à garder assez de matière pour montrer votre raisonnement, sans exposer des données sensibles. Vous pouvez aussi remplacer des volumes exacts par des ordres de grandeur et préciser ce qui a été anonymisé. Cette transparence renforce la confiance, surtout si vous ciblez des missions PME où la confidentialité compte autant que la compétence.
Enfin, pensez au portfolio comme à un actif commercial. Il doit pouvoir rassurer un recruteur, convertir un prospect et soutenir votre crédibilité sur Google. Si vous faites du freelance ou si vous vendez aussi une prestation design, reliez vos études de cas à une offre lisible sur design de site web. Votre portfolio ne doit pas seulement prouver que vous savez designer. Il doit prouver que vous savez faire avancer un produit ou un business.

Nous concevons des interfaces, pages services et études de cas qui rendent votre valeur compréhensible en quelques secondes. Si votre site montre mal votre expertise, on le corrige proprement.
Derniere mise a jour : Avril 2026
Mettez 3 études de cas maximum au départ, une page d'accueil claire, une bio courte, un contact visible et des preuves d'impact. Chaque projet doit montrer le problème, votre rôle, la méthode, les écrans clés et un résultat métier mesurable.
Trois projets solides suffisent largement. Un recruteur préfère 3 cas détaillés à 10 projets superficiels. La profondeur de raisonnement compte plus que la quantité d'écrans publiés.
Montrez seulement les étapes utiles à la compréhension : contexte, hypothèses, wireframes, décisions UI, tests et résultats. Il n'est pas nécessaire de tout publier, mais il faut rendre votre logique visible.
Pas toujours. Behance peut servir de vitrine visuelle, mais un site portfolio dédié reste plus convaincant pour expliquer votre méthode, votre positionnement et vos résultats. Pour des missions PME ou produit, la lisibilité des études de cas fait la différence.
Utilisez les indicateurs que vous maîtrisez réellement : nombre d'étapes supprimées, temps de tâche réduit, baisse des tickets support, adoption d'une fonctionnalité, retour utilisateur ou conversion observée. Mieux vaut un chiffre modeste mais honnête qu'une promesse spectaculaire invérifiable.
Le junior doit surtout prouver sa clarté, sa méthode et sa capacité à justifier ses choix. Le senior doit aller plus loin : arbitrages, collaboration produit, contraintes business, résultats et capacité à structurer un système de design. La différence se voit moins dans l'esthétique que dans la qualité de décision.

UX et UI : deux disciplines complémentaires qui déterminent la réussite de votre site web. Définitions, différences, salaires, méthode en 5 étapes et erreurs à éviter pour les PME.

Tout savoir sur le métier d'UI designer : définition, différence avec l'UX, compétences requises, salaire par niveau d'expérience, outils indispensables et parcours de formation.

Un guide concret pour comprendre le rôle d'un webdesigner freelance, ses tarifs, ses livrables, les compétences à exiger et la bonne méthode pour le recruter.
Comparez gratuitement les devis de nos partenaires sélectionnés et
économisez jusqu'à 30% sur votre budget IA.