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.
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.
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.
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.
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.
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.
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 , Xona Le logotype est une police sans empattement en majuscules discrète qui laisse les lettres s'exprimer pleinement.
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é.
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.
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 , lululemon La 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.
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.
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.
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.
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.
Un portfolio conçu pour décrocher un emploi à temps plein est structuré différemment d'un portfolio classique. prospection de clients indépendants Dé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.
Cinq erreurs faciles à manquer et rapides à corriger une fois repérées.
Vous n'avez pas besoin de coder ni d'embaucher un développeur. Le processus est rapide.
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.
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.
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.
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.
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.
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.
Pixpa Les 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.
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.
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.