Les meilleurs portfolios UX/UI constituent en eux-mêmes un test d'expérience utilisateur. Le visiteur est un recruteur ou un client, la tâche consiste à « comprendre ce designer en moins de deux minutes », et le site réussit ou échoue.
Les designers qui décrochent un entretien ont rarement le site le plus tape-à-l'œil. Leur site est clair et concis : leur rôle est énoncé en une phrase, deux ou trois études de cas illustrent le processus, et la mise en page ne gêne pas la compréhension du travail.
Vous trouverez ci-dessous huit portfolios UX et UI réalisés par des designers professionnels sur Pixpa, regroupés par thème et issus d'une galerie plus vaste de Exemples de portfolio UI/UX.
Chacune présente des choix de design, de couleur et de typographie qu'il convient d'étudier, et une décision qu'il vaut la peine d'emprunter.
Qu'est-ce qui constitue un portfolio UX/UI solide ?
Une forte Portfolio UI/UX Elle décrit en une phrase quel type de designer vous êtes et présente deux ou trois études de cas qui vont du problème au résultat.
Son interface discrète met en valeur le contenu. Le chargement est rapide et la lecture sur téléphone est possible.
Chaque site ci-dessous a été sélectionné selon quatre critères : la pertinence du design au service du travail, la clarté de la structuration des études de cas, l’efficacité du site pour décrocher un poste ou un client, et son fonctionnement sur mobile.
Portfolios de concepteurs UI/UX
Ces quatre exemples sont des portfolios UX/UI de contributeurs individuels : un designer, quelques études de cas et une mise en page optimisée pour permettre à un responsable du recrutement de se familiariser rapidement avec le travail.
Elizabeth Lodvikov
Conception d'interface utilisateur/d'expérience utilisateur. New York.
Elizabeth Lodvikov L'image s'ouvre sur un fond crème chaud, son rôle étant indiqué par une ligne gris anthracite et un portrait cadré en arc de cercle se trouvant à droite.
La palette est volontairement douce : crème, texte anthracite et une simple touche de terre cuite discrète sur le bouton « Dire bonjour ».
Cette chaleur paraît bien plus humaine que le mode sombre par défaut, et la police sans empattement géométrique et épurée permet de se concentrer sur ce que le visiteur est venu chercher.
Gaelle Monin
Conception UX/UI. Londres.
Gaelle Monin La page d'accueil met en valeur le travail accompli. Sous un logo fin et aérien et une étiquette « Conception UX/UI » soulignée d'un trait pêche dessiné à la main, la page débouche directement sur une grille de projets, sans biographie à faire défiler.
La palette reste proche du blanc, la couleur provenant du contenu lui-même : un tableau de bord financier avec un graphique en anneau des dépenses, une application de recettes avec un processus d’importation, des écrans mobiles intégrés à des maquettes d’appareils. Une touche de couleur chaude évite à la grille un aspect froid et impersonnel.
Sasank Anipeddi
Conception UX/UI. Maryland.
Sasank Anipeddi Il gère un site éditorial sombre, construit avec une police à empattements, ce qui est rare dans un domaine qui utilise par défaut la police sans empattements.
Le fond presque noir, le texte blanc et la mise en valeur verte de son nom lui confèrent un ton calme et assuré, plus proche d'un magazine que d'un modèle.
La navigation divise les sections Études de cas, Blog et GitHub dans des destinations distinctes, et chaque étude de cas comporte des étiquettes de méthode (Recherche utilisateur, Analyse concurrentielle, Tests d'utilisabilité) afin que la structure du travail soit visible avant même de l'ouvrir.
Matthew Park
Conception UX et illustrations conceptuelles. Sunnyvale.
Matthew Park La page d'accueil se transforme en une galerie aux blocs de couleur. Chaque projet est présenté dans une vignette pleine page, déclinée dans une couleur saturée différente : bleu, turquoise, magenta, indigo, beige, et illustrée par une maquette du produit sur ordinateur portable ou téléphone.
C'est bruyant, mais à juste titre, car la couleur sert de signalétique et le travail qui se cache derrière est un véritable SaaS : Lacework, Endgame, XonaLe logotype est une police sans empattement en majuscules discrète qui laisse les lettres s'exprimer pleinement.
Concepteurs de produits et responsables du design
Les rôles liés aux produits et à la stratégie mettent autant l'accent sur le jugement que sur le savoir-faire ; ces deux rôles sont donc caractérisés par un travail reconnu et un point de vue affirmé.
Marcin Spiewak
Conception de produits. Berlin.
Marcin Spiewak L'article s'ouvre sur un titre principal gras et imposant, sur fond anthracite, énumérant tous les postes qu'il a occupés : graphiste, web, UI, UX, puis les barrant un à un jusqu'à « Concepteur de produits », avec « Berlin » en vert. C'est le récit d'une carrière en une seule ligne, racontée par la typographie.
Une photo prise sur le vif, en pleine largeur, le montrant dans le champ, réchauffe la palette sombre, et les vignettes du projet renvoient à Figma pour tous ceux qui veulent aller au fond des choses.
Michael Collins
Conception et stratégie produit.
Michael Collins Le site web, minimaliste et centré, utilise une police sans serif épurée sur fond blanc cassé, avec un logo rouge foncé comme seule touche de couleur. Cette sobriété est stratégique.
La grille du projet est composée de photographies pleine page sur lesquelles sont superposés les noms reconnaissables des clients. Silvertree, ExxonMobil, lululemonLa crédibilité repose donc sur les logos, et non sur la mise en page. Un petit cadenas signale les études de cas soumises à un accès restreint, un signal discret indiquant la présence d'un accord de confidentialité interne.
Concepteurs multidisciplinaires
Lorsqu'un cabinet couvre plusieurs disciplines, le risque est de se retrouver avec un site web qui ressemble à plusieurs portfolios assemblés. Celui-ci, au contraire, conserve sa cohérence.
Forest
Design multimédia et d'interface utilisateur.
Forest Il opte pour un titre principal surdimensionné, mettant en avant le texte : « Salut, je suis Forest ! », écrit en énormes caractères noirs gras sur fond gris clair, avec un bandeau défilant horizontal affichant ses disciplines : conception d’interface utilisateur, graphisme animé, conception graphique, montage vidéo.
La palette monochrome évite toute impression de dispersion malgré la diversité des activités proposées, et le bandeau défilant présente l'étendue des compétences sans encombrer la grille. L'interface utilisateur côtoie les animations et les graphismes, sans revendiquer une spécialisation exclusive en expérience utilisateur ; le site l'assume pleinement.
Isabella Zelasko
Conception UX/UI et arts médiatiques. Phoenix.
Isabella Zelasko Le site couvre les domaines de l'UX/UI, de la recherche UX, de la conception de jeux et des médias interactifs, et présente le tout sur un fond prune foncé avec une typographie serif crème qui évoque davantage une galerie qu'un modèle.
Les projets sont présentés un par un, chacun étant étiqueté avec les disciplines et les outils sous-jacents (conception de jeux + conception d'interface utilisateur, ou conception Web, HTML et CSS), et une grille de compétences à six cartes transforme une pratique générale en domaines de compétences facilement repérables.
Il s'agit d'un travail de début de carrière, une maquette d'interface utilisateur de jeu et un projet web réalisé dans le cadre d'un cursus universitaire, mais il est présenté avec une clarté qui fait souvent défaut aux portfolios de jeunes professionnels.
Points communs des meilleurs portfolios UX/UI
Si on examine les huit projets, on constate que les mêmes décisions reviennent sans cesse. Aucune n'est une question de goût. Leur seul objectif est d'intégrer rapidement un visiteur à l'œuvre.
- Le rôle est résumé en une seule ligne. Lodvikov et Sasank Anipeddi Tous deux indiquent clairement leur activité dès la première phrase, il n'y a donc pas lieu de deviner s'il s'agit du type de designer recherché.
- La page d'accueil met l'accent sur le travail accompli, et non sur une biographie. Gaelle Monin s'intègre directement dans une grille de projet et Matthew Park Il utilise des blocs de couleur pour ses œuvres, ce qui fait que l'œuvre est la première chose que l'on voit.
- Les études de cas illustrent la méthode, et pas seulement les captures d'écran. Sasank Anipeddiles balises de méthode et Marcin Spiewaklié Figma Les fichiers prouvent qu'il y avait une réflexion derrière les pixels, et c'est ce qu'un responsable du recrutement recherche.
- Ce sont les œuvres reconnues qui persuadent. Michael Collins conduit avec ExxonMobil et lululemon et Matthew Park avec de véritables produits SaaS, car un travail reconnaissable inspire confiance plus rapidement que n'importe quelle mise en page.
- Une idée visuelle, conservée. Chaque site web de qualité présenté ici s'engage à utiliser une seule palette de couleurs et un seul système typographique, plutôt que de mélanger trois esthétiques et de donner une impression d'indécision.
- La vitesse et la mobilité ne sont pas optionnelles. La plupart des premières relectures se font sur un téléphone entre deux réunions, donc un mur de captures d'écran d'ordinateur est illisible là où c'est le plus important.
Comment structurer votre portfolio par objectif
Un portfolio conçu pour décrocher un emploi à temps plein est structuré différemment d'un portfolio classique. prospection de clients indépendantsDéterminez la finalité du site, puis construisez-le autour de cet objectif.
Pixpa's Templates de portfolio UI/UX Elles sont construites autour d'études de cas et de grilles de projets ; la ligne que vous choisissez ci-dessus dépend donc principalement des sections que vous activez.
Erreurs courantes à éviter dans un portfolio UX/UI
Cinq erreurs faciles à manquer et rapides à corriger une fois repérées.
- Protection par mot de passe de chaque étude de cas. Les accords de confidentialité existent bel et bien, mais un portfolio où rien n'est visible sans vous contacter au préalable risque de faire fuir le visiteur qui n'a que trente secondes à y consacrer. Conservez au moins un projet entièrement public.
- Rédiger l'étude de cas sous forme de journal intime. « J’ai d’abord fait une phase de découverte, puis j’ai créé des personas, puis des wireframes » est une liste de tâches. Commencez par exposer le problème et le résultat attendu, et laissez le processus en arrière-plan, comme preuve à l’appui.
- Mettre l'accent sur les artefacts de processus. Ouvrir sur un mur de post-it et de plans de parcours noie le message. Présentez d'abord le résultat ; la recherche est la preuve, pas le titre.
- Oublier son portfolio est en soi un test d'expérience utilisateur. Chargement lent, zones tactiles minuscules, un menu hamburger masquant les deux seules pages importantes. Analysez l'expérience utilisateur de votre propre portfolio. comme vous le feriez pour un client.
- Une esthétique pour la page d'accueil, une autre pour les études de cas. L'incohérence des caractères et des couleurs entre la structure et le contenu donne l'impression d'un site assemblé à partir de modèles plutôt que conçu sur mesure.
Comment constituer son propre portfolio UX/UI
Vous n'avez pas besoin de coder ni d'embaucher un développeur. Le processus est rapide.
- Démarrez un essai gratuit, aucune carte de crédit n'est requise.
- Choisissez une Modèle conçu pour les concepteurs d'interface utilisateur/d'expérience utilisateur.
- Ajoutez deux ou trois études de cas, en commençant par un problème écrit. Si vous ne savez pas quoi montrer, commencez par celles-ci. idées de projets UX/UI.
- Définissez une seule couleur d'accentuation et un seul système de typographie, et limitez la navigation à l'essentiel.
- Connectez votre domaine, vérifiez-le sur votre téléphone et publiez.
Conclusion
Un portfolio UX/UI est jugé de la même manière que n'importe quelle interface : aide-t-il le visiteur à accomplir sa tâche rapidement ?
Présentez brièvement votre rôle, illustrez le problème par deux ou trois études de cas, mettez en avant le travail accompli et laissez le design s'effacer. Chaque site mentionné ci-dessus remplit parfaitement cet aspect. Inspirez-vous de la méthode, pas du style.
Donnez à votre travail le portfolio qu'il mérite, gratuitement pendant 15 jours.
FAQ sur les portfolios UX/UI
Combien de projets un portfolio UX/UI doit-il contenir ?
Deux à quatre. La profondeur prime sur l'étendue : une étude de cas complète et approfondie démontre que votre réflexion vaut bien plus que six galeries de projets superficielles.
Les examinateurs déterminent si vous êtes capable de raisonner sur les problèmes, et non pas le nombre de réponses.
Les études de cas en UX doivent-elles être protégées par un mot de passe ?
Ne publiez rien sans accord de confidentialité, et même dans ce cas, conservez au moins un projet entièrement public. Un portfolio où rien n'est visible sans vous contacter au préalable risque de faire fuir le visiteur qui n'y a consacré que quelques secondes.
Si la majeure partie de votre travail est soumise à un accord de confidentialité, créez un projet personnel que vous pourrez présenter ouvertement.
Que doit contenir la page d'accueil d'un portfolio UX ?
Une phrase qui présente votre entreprise et vos domaines d'expertise, un gage de crédibilité, des liens vers deux ou trois études de cas et un moyen de contact clair.
Oubliez l'énoncé de mission. Il existe une liste plus complète de éléments à inclure dans votre portfolio si vous le souhaitez, mais le rôle de la page d'accueil est de diriger rapidement le visiteur vers le contenu.
Ai-je besoin de savoir coder pour avoir un portfolio UX ?
Non. La plupart des portfolios UX/UI de qualité sont réalisés sur un outil de création de sites web, et cela ne fait aucune différence pour un responsable du recrutement.
Vous feriez mieux de consacrer votre temps à rédiger des études de cas concises plutôt qu'à déboguer du CSS.
Quelle est la différence entre un portfolio UX et un portfolio UI ?
Un portfolio UX met l'accent sur le processus et les résultats : le problème, la recherche, les décisions et le résultat mesurable. Un portfolio UI, quant à lui, privilégie le savoir-faire visuel : la mise en page, la typographie, les couleurs et la finition de l'interface.
La plupart des designers en activité présentent les deux, avec une prédominance de celui qui correspond au cœur de leur rôle.
Combien coûte un site web portfolio ?
PixpaLes forfaits de [Nom de l'entreprise] commencent à 5.40 $ par mois pour un forfait annuel de base, et chaque forfait comprend un essai gratuit de 15 jours sans carte de crédit et une garantie de remboursement de 30 jours. Tarifs des derniers forfaits est ventilé par niveau.
Quelle est la meilleure plateforme pour un portfolio UX/UI ?
Il n'existe pas de plateforme unique idéale. Pixpa Idéal pour les designers qui souhaitent un portfolio, un blog intégré et un système de modèles épuré, le tout au même endroit, avec une assistance humaine en direct.
Si vous souhaitez comparer les différentes options, voici une analyse détaillée de meilleurs outils de création de sites web pour les concepteurs d'interface utilisateur (UI/UX) les compare côte à côte.
Dois-je présenter des projets non sollicités ou des projets conceptuels ?
Oui, surtout en début de carrière ou lors d'une reconversion. Une refonte bien structurée et menée de votre propre initiative prouve que vous êtes capable d'analyser un problème en profondeur même sans avoir encore de réalisations publiées et reconnues à présenter.
Étiquetez-le clairement comme un concept.