Idées pour présenter votre travail de portfolio en ligne

Un portfolio en ligne est principalement axé sur le contenu et l'utilisateur doit prendre l'initiative de parcourir le site Web. Votre objectif est de présenter clairement votre travail et d'inciter les utilisateurs à cliquer.

Dans cet article, j'aimerais partager quelques techniques pour aider les visiteurs à approfondir votre travail de portfolio. Il existe de nombreuses façons de le faire, certaines personnes ajoutent simplement des pages statiques tandis que d'autres ajoutent des diaporamas et des études de cas complètes.

Certes, le type de travail que vous effectuez jouera un rôle dans la conception de votre site. Mais ces conseils sont universels et peuvent s'appliquer à n'importe quel site de portfolio sur le net.

Catégories dynamiques

Si vous effectuez de nombreux types de travail différents, vous devriez essayer d'ajouter des balises de tri dynamiques sur votre page de portefeuille. Cela permet aux visiteurs de parcourir le travail qu'ils veulent voir plutôt que de parcourir tout ce que vous avez fait.

Par exemple, un concepteur numérique peut avoir de nombreux types de travail différents et chaque entrée de portefeuille peut présenter un ensemble de compétences différent. Ces catégories pourraient se décomposer comme ceci :

• Conception d'identité
• Conception d'icônes
• Sites Internet
• Application mobile
• Wireframing UI/UX

Si vous créez des catégories dynamiques, les visiteurs peuvent parcourir chacune d'entre elles individuellement. Cela rend la navigation sur le site beaucoup plus rapide et c'est le moyen le plus efficace de présenter le travail de portefeuille.

Le thème Hero est un bel exemple de cette catégorie de tri en action. La page principale du portfolio utilise de petits liens de balise près du haut pour organiser différents styles de projet.

Lorsque l'utilisateur clique sur un lien de catégorie, le portfolio masque automatiquement tous les projets autres que ceux ajoutés à la catégorie. Tout cela est contrôlé par WordPress sur le backend, il vous suffit donc d'ajouter des projets à votre site et de les organiser en conséquence.

De nombreux thèmes de portefeuille WordPress sont livrés avec ces fonctionnalités par défaut et ils sont fantastiques. Vous pouvez voir un autre exemple dans le thème Beckett qui utilise des liens texte simples.

Mais notez que les deux exemples sont essentiellement des conceptions en plein écran et que le portefeuille occupe la majorité de l'espace sur la page.

Les catégories dynamiques fonctionnent mieux lorsqu'elles sont faciles à utiliser et faciles à parcourir. Ces exemples offrent un excellent point de départ et vous pouvez même utiliser ces thèmes pour votre propre site s'ils correspondent à votre style de conception.

Diaporamas de photos du projet

La grande majorité des diaporamas de projets sont utilisés comme éléments supplémentaires sur une page de projet de portefeuille. Ces diaporamas ajoutent donc un certain niveau de détail dans la page où vous pouvez parcourir les photos en un clic.

J'aime les diaporamas car ils offrent un aperçu du flux de travail sans prendre beaucoup de place. Mais vous devez les utiliser avec parcimonie.

Parfois, les visiteurs préfèrent une galerie de vignettes à parcourir en une seule fois. Mais les diaporamas ont leur place s'ils ne sont pas trop volumineux et n'ont pas trop de diapositives (disons moins de 15).

Bramble prend en charge les diaporamas d'images sur les pages du portfolio et ils sont également entièrement réactifs. Cela vous permet de parcourir rapidement les photos et propose deux méthodes de navigation différentes :

• Flèches gauche/droite
• Navigation par points pour chaque diapositive

Les utilisateurs de smartphones peuvent toujours parcourir ce diaporama avec facilité et obtenir le plein effet. Mais il y a aussi un argument pour les vignettes puisque l'utilisateur peut appuyer pour agrandir la photo.

Votre diaporama de portfolio idéal dépend du type de travail que vous faites. Si vos prises de vue peuvent tenir horizontalement dans un curseur, envisagez certainement d'en ajouter un à votre page de projet.

Ou vous pouvez même en ajouter un à votre page d'accueil comme dans le thème Oshine. Plus précisément cette démo présentant le design d'intérieur et l'architecture.

Ce style unique fonctionne bien pour les photographes, les concepteurs numériques et les artistes numériques. Ces styles de travail ont tendance à être assez volumineux et s'intègrent bien dans un diaporama plein écran.

Les curseurs de la page d'accueil attirent immédiatement l'attention, ils aident donc également à vendre exactement ce que vous faites en un coup d'œil.

Assurez-vous simplement de lire un peu sur les carrousels pour connaître les meilleures pratiques en matière de navigation et de transfert automatique.

Boîtes modales

C'est ma technique préférée pour présenter un travail de portfolio. La fenêtre modale apparaît "en haut" de la page en grisant le contenu en dessous.

Cela se présente généralement sous la forme d'une galerie d'images où l'utilisateur peut cliquer (ou balayer) à travers de nombreuses images de projet à la fois. Étant donné que la fenêtre modale apparaît en haut de la page, elle peut occuper toute la page sans ennuyer l'utilisateur avec un nouvel onglet.

Un exemple fantastique de cela est le thème Vitae sur ThemeForest. Il est livré avec des modaux lightbox sur chaque page d'élément de portefeuille où vous pouvez cliquer pour voir une vue plus grande de l'image.

Personnellement, je préfère le fond plus sombre car cela ajoute vraiment du contraste entre la fenêtre modale et le contenu. Certains thèmes comme Vitae utilisent un arrière-plan plus clair et cela fonctionne bien aussi.

L'objectif est d'augmenter l'engagement des utilisateurs en forçant ce modal au-dessus de toute la page. Lorsque vous faites cela avec une fenêtre contextuelle modale, cela peut être très ennuyeux. Mais cela fonctionne étonnamment bien pour le contenu du portefeuille lorsque l'utilisateur l'attend.

Je le recommande surtout pour les éléments de galerie où vous avez de nombreuses photos que vous souhaitez présenter dans une série. Les fenêtres modales sombres peuvent également présenter des éléments de portefeuille complets, comme avec le thème Honshi.

Si vous avez une série de photos qui vont ensemble dans un ensemble, envisagez de les exécuter avec des diaporamas modaux. Ou si vous êtes un designer, vous pouvez ajouter différentes étapes de votre travail dans un diaporama, presque comme une progression du début à la fin.

Tout type de site de portfolio visuel peut bénéficier de fenêtres modales. Vous voulez juste trouver un thème de portfolio avec cette fonctionnalité et l'inclure naturellement dans vos pages de projet.

Études de cas pleine page

Il est toujours bon d'ajouter du contenu écrit à côté de votre travail de portfolio. De cette façon, les visiteurs peuvent avoir une idée de ce qu'est le projet, du travail que vous avez effectué et de la façon dont vous êtes passé de la phase de planification initiale à l'achèvement.

Les études de cas sont les meilleures pour présenter une image complète du projet. Vous devriez naturellement avoir beaucoup de photos sur la page, mais aussi inclure des anecdotes personnelles et des listes décomposant l'ensemble de votre processus créatif.

Les visiteurs veulent en savoir plus sur ce que vous faites. Ces études de cas renforcent la confiance et vous présentent comme une autorité en la matière.

Mandala est un excellent thème démontrant à quoi pourraient ressembler des études de cas simples.

La section supérieure comprend un exemple de photo du projet ainsi que des détails supplémentaires tels que la date du projet, la catégorie, le nom du client et un bref aperçu du projet.

Donnez aux lecteurs une chance de jeter un coup d'œil dans les coulisses et d'en savoir plus sur ce que vous faites. Les visuels aident mais ils ne montrent qu'une partie de l'histoire.

En écrivant des études de cas, vous pouvez expliquer vos problèmes courants et comment vous les avez résolus, ainsi que votre processus de brainstorming pour trouver des idées intéressantes.

Si vous faites de la photographie, vous n'aurez probablement pas autant de choses à écrire. Cependant, le thème Dazzle montre qu'un peu de contenu peut faire beaucoup.

Leur thème de portefeuille est livré avec des dizaines de styles. Certains ont peu d'informations sur le projet, d'autres ont plus de détails sur la page du projet. Mais dans tous les cas, vous pouvez en apprendre beaucoup en parcourant les nombreux styles proposés par ce thème.

Prenez des études de cas et faites-les vraiment vôtres. Ajoutez juste assez d'informations pour les rendre utiles aux visiteurs sans écrire une dissertation complète.

Emballer

Présenter le travail de votre portfolio n'est pas toujours simple. Cela diffère en fonction du type de travail et du nombre de projets que vous avez.

Mais les tendances que j'ai énumérées ci-dessus fonctionnent bien pour à peu près tout, de la conception graphique à la photographie, l'animation, le travail d'interface utilisateur ou toute autre chose. Les diaporamas personnalisés, le tri des catégories, les fenêtres modales et les études de cas peuvent tous augmenter radicalement l'engagement sur votre site Web de portefeuille.

Si vous n'avez pas encore créé votre propre site de portfolio, vous devriez consulter notre article sur la création d'un site de portfolio WordPress où nous expliquons comment configurer l'hébergement et un thème pour votre portfolio en ligne.