Catégories
Astuces et Design

20+ tendances de conception de portefeuille en 2020

À quand remonte la dernière mise à jour de votre portfolio de design? (Si vous êtes comme moi, cela fait probablement un certain temps.) Le maintien d'un nouveau portfolio est un bon moyen de montrer vos compétences à des clients potentiels et peut être utile lorsque vous repensez au travail pour les inscriptions annuelles au concours.

Si vous avez pris du retard dans la conception de votre portefeuille, ou si vous avez simplement besoin d'un nouveau portefeuille en général, c'est une excellente occasion de créer quelque chose en utilisant des techniques et des visuels à la mode.

Un portefeuille moderne utilisant les tendances du design peut faire bonne impression. Un portfolio est aussi une représentation de vos compétences – alors concevez judicieusement! Voici un aperçu de certaines de nos tendances de conception de portefeuille préférées pour 2020.

Éléments graphiques en couches

conception de portefeuille

Des effets superposés sympas, en particulier ceux qui incluent des effets CSS astucieux tels que le défilement de parallaxe ou des indices d'animation peuvent créer des couches amusantes.

Cette technique de portefeuille gagne en popularité et offre une bonne opportunité aux concepteurs de jouer avec certains effets avant de les déployer sur un projet client.

Ce portfolio d'une page de Sophie Doukhopelnikoff utilise des transparents et des éléments de texte dans des couches qui créent de la profondeur et un intérêt visuel. Avoir des lettres à la fois derrière et devant les images est plutôt étonnant et vous attire dans le design. La typographie sans empattement confère une sensation encore plus classique à la conception globale.

Effets de couleur subtils

conception de portefeuille

Vous allez devoir cliquer et passer quelques minutes sur ce site Web de portfolio pour profiter pleinement de la conception.

Le simple «Hello There» se développe d'abord pour remplir l'écran avec d'autres éléments de texte qui expliquent mieux le portfolio, puis la couleur d'arrière-plan change doucement toutes les quelques secondes pour un effet arc-en-ciel. C'est simple, subtil et très beau.

Il s'agit d'un effet de couleur qui pourrait avoir de nombreuses applications ailleurs et qui témoigne de la nature créative d'un site Web de portefeuille lui-même.

Esthétique super simple

conception de portefeuille

Il semble qu'il existe une tendance dans la conception de portefeuilles où les concepteurs ne dirigent pas leur travail. Leurs sites Web sont simples et visuellement intéressants et ne vous conduisent ensuite dans leur projet qu'après un premier coup d'œil.

Le design simple ici est élégant et intrigant. Il fonctionne aussi bien avec des arrière-plans sombres ou blancs que des typographies et des éléments graphiques simples.

Valentin Semes tire le meilleur parti de l'esthétique ultra-simple avec des divots interactifs soignés – faites attention au survol de la souris – pour vous permettre de vous déplacer dans la conception afin que vous puissiez voir les éléments du portfolio.

Dispositions de style magazine

conception de portefeuille

Les mises en page de style magazine ont longtemps été populaires pour les blogs, mais peuvent également aider à montrer un portefeuille comme le montre cette tendance.

Chaque bloc peut être utilisé pour mettre en évidence un type de travail ou un projet individuel différent d'une manière qui donne à chaque pièce de conception sa propre.

Antoine Barres utilise ce format pour montrer une variété de pièces créatives d'une manière qui permet de voir facilement chaque dessin. Les blocs de fond gris avec la grille blanche ont un style incroyablement classique qui donne à chaque design encore plus d'espace pour briller.

Accueil Bios

conception de portefeuille

Il n'y a aucune règle selon laquelle votre biographie doit figurer sur la page À propos de votre site Web de portefeuille. L'une des tendances les plus fortes en matière de conception de portefeuille est de déplacer cette bio – ou du moins une version courte de celle-ci – sur la page d'accueil.

C'est un excellent moyen de dire aux gens exactement ce que vous faites dès le départ. Vous ne pourrez pas deviner en quoi consiste votre portefeuille et quel type de création vous êtes.

C’est un endroit où vous pouvez créer une déclaration personnelle ou même mettre en valeur divers projets. Le portfolio de Bill Chien fait cela à merveille avec une biographie de style générique qui défile sur la page d'accueil. Sa bio est simple, au point, et montre son esprit créatif.

Beaucoup d'interactivité

conception de portefeuille

Les portefeuilles interactifs sont disponibles.

Beaucoup de ces conceptions de portefeuille sont visuellement bruyantes, remplies de mouvements, de couleurs et d'éléments à cliquer ou de changements d'états de survol. Il existe une possibilité presque illimitée d’utiliser des effets et des techniques de conception.

Ce qui est bien avec un portfolio hautement interactif, c'est qu'il offre un endroit pour montrer certaines compétences UX suprêmes.

Le défi est que parfois les conceptions peuvent devenir un peu écrasantes. Assurez-vous de suivre le comportement et l'engagement des utilisateurs et si vous perdez des visiteurs, cela pourrait valoir une chance. (Cela peut également être un bon test pour déployer des techniques similaires dans d'autres projets.)

Modèles de conception inhabituels

conception de portefeuille

Les portefeuilles qui testent de nouveaux modèles de conception sont également à la mode. Le déplacement d'éléments de navigation traditionnels, l'obscurcissement du texte et même l'expérimentation des états d'animation sont tous courants.

Cette tendance pourrait être populaire car elle offre aux concepteurs l'occasion d'avoir un petit terrain de jeu pour tester les techniques et les effets. Ce qui est bien, c'est que cette tendance pousse notre idée de ce qui n'est pas la bonne façon de faire quelque chose.

L'exemple ci-dessus utilise à la fois quelques tendances visuelles et des motifs inhabituels. Il existe une typographie de contour partiellement masquée, un état de survol animé pour l'orbe de couleur et une navigation sur les bords verticaux de l'écran.

La tendance du portefeuille vous fait réfléchir aux normes de conception et à ce que vous ressentez à leur sujet lorsque vous plongez dans le travail.

Noir et blanc

conception de portefeuille

Les dessins en noir et blanc, souvent avec un accent de couleur, sont énormes en ce moment.

Le plus grand facteur contributif pourrait être que les motifs de conception en noir et blanc permettent de voir facilement les œuvres du portfolio, qui sont souvent en couleur. Cela donne à ce que vous voulez que les gens voient plus d'attention quand il apparaît à l'écran.

Associé à cette tendance noir et blanc est un autre facteur commun. Les éléments du portfolio n'apparaissent pas sur la page d'accueil; les utilisateurs doivent cliquer pour les trouver.

Typographie à la mode

conception de portefeuille

Vous ne pouvez jamais vous tromper avec une typographie incroyable. Que vous utilisiez un élément de type tendance, tel que les contours ci-dessus, ou simplement une belle police de caractères, cette tendance ne vieillit jamais.

De solides compétences en typographie aideront votre portfolio à briller et aideront les autres à comprendre la qualité de votre travail. Cette tendance montre pourquoi il est important de créer un portefeuille qui représente la force de vos compétences.

Les employeurs et clients potentiels auront souvent une impression du type de création que vous êtes simplement en consultant le site Web de votre portfolio. Presque tous les designers aimeraient être considérés comme des personnes possédant de solides compétences en typographie. L'utilisation de la typographie à la mode convient parfaitement.

Effets haute performance

conception de portefeuille

Le portefeuille de Victor Costa est un excellent exemple de la manière de créer un portefeuille de haute performance.

Étant donné que les concepteurs Web, les photographes et d'autres créatifs utilisent leurs portefeuilles pour montrer ce qu'ils peuvent faire, il y a un changement distinct vers des conceptions plus performantes. (Certains d'entre eux sont trop pour les écrans mobiles. Assurez-vous d'avoir une autre passerelle si vous suivez cette route.)

Ces conceptions hautes performances regorgent de JavaScript, d'animations et d'effets astucieux conçus pour épater les utilisateurs.

Le portefeuille de Victor Costa est un excellent exemple de la manière de créer un portefeuille de haute performance. Il s'ouvre avec une option pour les utilisateurs – standard ou haute performance. Le portfolio est rempli d'éléments interactifs, de fondus et d'actions de défilement et d'animation. Ces techniques correspondent aux éléments auxquels il fait référence dans sa biographie et ne sont pas seulement une vitrine de travaux antérieurs, mais un indicateur de ce qu'il peut faire d'autre pour les clients.

Beaucoup d'espace

conception de portefeuille

Quelque chose qui est apparu dans de plus en plus de conceptions à tous les niveaux fait également son chemin dans la conception de portefeuille – beaucoup d'espace entre les éléments et les objets.

Cette tendance semble avoir pour origine la garantie que les éléments sont séparés de manière appropriée sur les appareils mobiles et disposent de beaucoup d'espace pour les prises, mais l'espace supplémentaire peut également avoir fière allure sur les écrans de bureau. (Certes, j'ai toujours été fan des espaces blancs.)

Le portfolio de Lotta Nieminen est un parfait exemple de cette conception en action. L'en-tête ultra-profond occupe plus d'un tiers de l'écran tandis que l'espace vertical et horizontal entre les images du portefeuille est très large. Chaque élément se tient tout seul et l'espacement exagéré donne à chaque projet une pièce autonome, ce qui peut être particulièrement agréable pour une conception de portefeuille avec le potentiel de tant de types d'images différents.

Interface utilisateur Groovy

conception de portefeuille

L'association d'un design minimaliste avec des effets d'interface utilisateur élégants peut créer un portefeuille assez étonnant. Cette combinaison de simplicité visuelle et d'interaction complexe peut ravir les utilisateurs et les inciter à regarder à travers différents écrans et projets de portefeuille.

Cliquez sur l'exemple ci-dessus pour voir comment chaque projet de portefeuille glisse sur l'écran avec un effet d'entraînement sympa avant de s'arrêter. Le curseur se décale et se forme également, indiquant les éléments de clic pour guider les utilisateurs à travers chaque projet d'une manière qui ne se limite pas à la simple lecture de la façon dont la conception s'est produite.

C'est un portefeuille avec lequel vous pourriez passer des heures grâce à l'interface utilisateur groovy.

Grande typographie

portefeuille

La typographie et le texte font partie des éléments de conception les plus souvent négligés lors de la planification d'un projet ou d'un portefeuille.

Une typographie et un langage forts peuvent être une introduction parfaite à votre travail (et portfolio). La plupart des gens connaissent probablement Tobias van Schneider grâce à ses activités de concepteur ou de podcasteur, mais vous attendriez-vous à ce que la page d'accueil de son portfolio soit principalement du texte?

La typographie et le texte font partie des éléments de conception les plus souvent négligés lors de la planification d'un projet ou d'un portefeuille. La plupart d'entre nous sont tellement concernés par les visuels ou l'animation.

Cet exemple montre pourquoi tant de concepteurs optent pour des portefeuilles qui présentent une typographie forte. Cela donne le bon ton – vous savez ce qu'il fait et de quoi parle le site – avant d'entrer dans les visuels plus profonds. (Cette option met également en évidence sa force pour les conceptions contenant beaucoup de texte.)

Portefeuilles qui ne ressemblent pas à des portefeuilles

… En tant que designer, vous n’avez pas besoin de proposer quelque chose de complètement nouveau pour montrer votre travail

L'une des plus grandes tendances en matière de conception de portefeuille consiste à créer un portefeuille qui ressemble à un autre type de site Web.

Le portfolio de Robin Mastromarino ressemble à un site Web pour un bar, un créateur de mode ou un athlète professionnel, selon la partie du curseur que vous affichez en premier. C’est beau et simple et ce qui est le plus impressionnant, c’est la pièce dont chaque projet doit briller.

Des indices subtils aident les utilisateurs à comprendre les éléments du portefeuille, tels que les petits chiffres au-dessus du titre et la date ci-dessous. De plus, l'élément de diapositive qui encourage le défilement de gauche à droite avec des titres partiels d'autres projets.

Les autres choses qui sont si jolies à propos de ce style de portfolio sont qu’en tant que concepteur, vous n’avez pas besoin de proposer quelque chose de complètement nouveau pour montrer votre travail. Avec un grand «art» pour les projets, les travaux terminés sont au centre des préoccupations, plutôt que de créer quelque chose de complètement nouveau. (Comment est-ce pour créer quelque chose que vous pouvez mettre à jour rapidement?)

Navigation animée plein écran

portefeuille

Pendant un certain temps, de nombreux designers ont opté pour des portefeuilles d'une page. Cela est revenu aux projets de plusieurs pages avec une torsion – le manque de navigation traditionnelle.

La page d'accueil sert de navigation vers des projets individuels et des pages avec des effets animés dans ces projets pour créer une expérience plus immersive et entièrement interactive pour les utilisateurs.

Il établit une belle expérience utilisateur qui pourrait donner envie à un client de voir une technique similaire et est un bon moyen de mettre l'accent sur votre capacité à créer dans l'espace numérique, même si tous les éléments de votre portefeuille ne reflètent pas cela.

Motifs d'écran partagé

portefeuille

Les modèles d'écran partagé sont à la mode depuis un certain temps et de plus en plus de portefeuilles utilisent cette conception, même s'ils n'utilisent pas la fonctionnalité. Cela fonctionne parce que l'association des éléments aide les utilisateurs à prendre en compte tout ce qui se trouve devant eux sur l'écran.

Xavier Cusso utilise une conception en écran partagé avec d'excellents effets de défilement de parallaxe pour passer d'un projet à l'autre. La conception de l'écran en blocs de couleurs permet de souligner que le site Web est sa création, tandis que l'élément du milieu est le projet de portefeuille à examiner. Il met une certaine séparation entre le portefeuille et les conceptions de projet.

C'est une belle façon de gérer des projets de grands noms – notez le graphique d'Adidas Climaheat ici – tout en conservant votre identité dans la conception du portefeuille. (Assurez-vous de cliquer et de visiter les projets individuels ici; la conception globale du portefeuille est impressionnante.)

Design inspiré du minimalisme

tendances du portefeuille

La meilleure chose à propos d'un portefeuille inspiré du minimalisme est qu'il donne au design beaucoup d'espace pour briller. La conception du portefeuille réel devient relativement invisible de sorte que tout l'accent est mis sur les éléments que vous voulez que les gens voient.

Le designer Shawn Park a récemment écrit sur la façon dont il redessine son portfolio chaque année pour UX Collective – je vous recommande vivement d'aller lire cet article ici – et le design actuel (ci-dessus) montre une évolution des tendances du design en soi.

Park inclut des itérations de la conception de son portefeuille dans le post, à partir de 2013, et vous pouvez voir comment les tendances de conception ont impacté son portefeuille. Vous pouvez également voir comment ce style minimaliste frais permet de voir plus facilement son travail aujourd'hui que dans les incarnations précédentes.

Headshots de page d'accueil surdimensionnés

tendances du portefeuille

Les gros plans sont un gros problème, en particulier avec les développeurs et les concepteurs d'interactions.

Cette tendance de portefeuille peut être populaire, car il est plus difficile de montrer visuellement ce travail: Mettez-vous du code en évidence?

L'astuce pour faire fonctionner cette conception de portefeuille est une image forte. Il doit s'agir de plus qu'un tir dans la tête; il doit avoir une mauvaise humeur. Ensuite, associez-le à une typographie forte pour indiquer clairement qu'il s'agit d'un site Web de portefeuille et de ce que vous faites. Conservez toutes ces informations au-dessus du parchemin pour avoir les meilleures chances de faire bouger les visiteurs dans la conception.

Et quelques effets astucieux ne peuvent pas faire de mal non plus.

Grilles modulaires

portefeuille

Une tendance de conception de portefeuille qui ne semble jamais s'estomper est l'utilisation de grilles modulaires pour montrer les projets. C'est une excellente option – et fonctionnelle – car vous pouvez «flotter» des images de différents projets sur une seule toile.

Kimi Lewis fait quelque chose d'un peu différent avec son portfolio, ci-dessus. Plutôt que de nombreux petits blocs pour montrer les projets de portefeuille, cette conception est grande. Il mélange et associe des images horizontales plus carrées et longues dans une grille surdimensionnée.

Les utilisateurs ont une bonne idée de chaque projet dès le début. Ajoutez les images de grille surdimensionnées à un espacement exagéré entre les éléments et ce portefeuille pourrait être l'un des plus faciles à digérer que j'ai vu depuis un moment. Il existe également une animation de survol astucieuse sur chaque image avec le nom du client et le type de projet pour fournir des informations supplémentaires avant de cliquer.

Esthétique lumineuse et légère

tendances du portefeuille

Personne n'a dit qu'un portefeuille de design devait être ennuyeux. Bien que beaucoup de ces motifs soient sombres ou blancs – principalement parce que ces couleurs plates permettent de voir facilement les projets – des couleurs vives et folles peuvent également fonctionner.

Le portfolio de Denys Mishunov est un excellent exemple d'utilisation de la couleur et de l'illustration pour se démarquer. La palette de couleurs vives attire l'attention et l'illustration est une prise amusante d'une photo surdimensionnée.

Lorsque vous travaillez comme dans ce portefeuille – frontend, JavaScript, formation – un peu de créativité peut aller très loin. Non seulement cela aide à attirer les utilisateurs, mais cela en dit long sur votre style de travail et votre philosophie de conception. (Cela peut vous aider à trouver les clients qui conviennent.)

Superpositions de couleurs

tendances du portefeuille

Le portefeuille de Heather Shaw fonctionne parce que chaque projet est si différent, mais les superpositions de couleurs donnent à la page d'accueil une sensation de connexion.

L'un des aspects les plus difficiles de la création d'un portfolio est la page d'accueil. Comment prévisualisez-vous des sections de travail ou de projet de manière à inciter les utilisateurs à cliquer?

La réponse pourrait être d'obscurcir partiellement l'œuvre. L'utilisation de superpositions de couleurs intéressantes sur les liens d'image d'aperçu peut être un moyen visuellement attrayant d'encourager les clics vers des projets individuels. Cela gardera votre page d'accueil plus propre avec une apparence et un style cohérents pour les différentes sections du site Web, garantira qu'une page n'est pas trop lourde et trop lente à charger, et offre la possibilité de mettre en évidence quelque chose sur un projet avant le clic.

Le portfolio de Heather Shaw, ci-dessus, fonctionne parce que chaque projet est si différent, mais les superpositions de couleurs donnent à la page d'accueil une sensation de connexion. L'utilisateur sait également quel type de projet il est sur le point de visualiser grâce aux étiquettes avec les noms des clients et le type de projet directement là. Il s'agit d'un format hautement navigable et facile à comprendre qui séduit visuellement.

Vitrine de projet simplifiée

cartes mobiles

Et puis il y a l'extrémité opposée du spectre – des portefeuilles qui ont une apparence et une sensation plus rationalisées. Il peut être avantageux de ne montrer qu'une poignée de projets.
Cela garantit que les utilisateurs ne voient que ce sur quoi vous voulez qu'ils se concentrent et ne soient pas distraits.

Stefanie Bruckler utilise également un format de grille de module mais avec moins d'éléments dans un espace plus contenu. De plus, tout est sous le parchemin principal qui présente un design minimaliste de style de carte de visite.

Il a un look poli et élégant, donnant un ton distinct au travail de ce designer.

Conclusion

Vous n'êtes toujours pas prêt à refondre votre portefeuille? S'il s'agit d'un projet créatif, c'est aussi un investissement dans votre entreprise, que vous travailliez pour une entreprise ou en tant que pigiste.

Les clients potentiels vous recherchent avant même que vous sachiez qu'ils existent. Un portefeuille moderne et tendance avec vos meilleurs projets peut faire une bonne première impression.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *