Caractéristiques d'un site de portfolio moderne
De tous les types de sites Web, le site du portefeuille doit surmonter certains des obstacles les plus difficiles. Parlez à presque tous les concepteurs et ils seront d'accord, le lancement de votre propre site de portefeuille est un processus douloureux. Le plus souvent, ce processus comprend de nombreuses versions et, souvent, un lancement par pure frustration.
À mon avis, l'avantage réside dans le fait que le site du portefeuille peut être une fenêtre sur l'avenir du design Web. Je suggère cela parce que lorsqu'un individu conçoit son propre site, il ne fait que se limiter lui-même. Il n'y a pas de client pour dicter des choses, pas de comité pour détruire la conception, et pas de processus d'approbation pour traîner les choses et détruire l'élan.
Mais tous les sites du portefeuille ne sont pas créés égaux. Malgré la quantité insensée de sites de portfolio disponibles, il y a étonnamment peu de sites qui se sentent assez intéressants et intéressants pour en parler. Ce sont ces sites, cependant, qui élèvent la barre et exposent ce que l'avenir pourrait contenir pour la conception de sites Web.
Plongez dans un vaste ensemble de portfolios étonnants et recherchez des éléments communs qui les font fonctionner. Certains de ces éléments exposent les tendances de l’industrie, tandis que d’autres démontrent une conception simple et commune. Tous n'ont pas un sens énorme, mais ils ajoutent tous des conceptions fantastiques qui vous mettront au défi de créer un site de portfolio vraiment extraordinaire.
Raconter une histoire
L'un des aspects les plus intéressants d'un site de portfolio moderne est l'effort de création d'un environnement de narration. L'idée est de créer un flux de contenu qui contrôle essentiellement l'expérience et le message à l'utilisateur. Ce contrôle crée un flux de contenu dans l'ordre souhaité.
De nombreux sites tentent de faire ce genre de chose en plaçant la navigation principale dans un ordre souhaitable. Mais ces sites adoptent une approche globale et en font une partie incontournable de l'expérience.
Jan Ploch
L'utilisation d'un site d'une seule page n'a rien de nouveau et, par sa définition, oblige l'utilisateur à faire défiler la page. Cela crée un flux naturel de contenu qui a été utilisé d'innombrables fois. Sur ce site, cependant, nous trouvons une approche rarement utilisée avec un arrière-plan animé. Lorsque vous faites défiler la page, c'est comme si le soda en arrière-plan était aspiré par la paille.
Cet élément simple et décoratif fait quelque chose de vraiment puissant. cela vous encourage à faire tout le long de la page. Ceci est fondamentalement un aspect critique du site d'une seule page: garantir que les utilisateurs parviennent à la fin de l'histoire. Et la fin de l'histoire est généralement le point de conversion du site (comme c'est le cas ici).
Tam Cai
Le site de cette personne montre également le modèle à page unique, à raconter. Ce que je trouve intéressant à propos de ce site particulier, c’est que l’histoire est complétée par deux visuels puissants, avec toute la viande au milieu. Le grand ensemble d'illustrations en haut de la page crée une ambiance, démontre la personnalité de l'artiste et vous invite généralement à plonger dans son univers. La page est ensuite terminée avec un contact options (points de conversion) et une photographie spectaculaire de ce que nous supposons être le créateur.
Certainement pas un style pour tout le monde, mais quand une approche thématique est produite d'une manière aussi soignée, les résultats peuvent être géniaux. Et même si le site n’intéresse pas tous les visiteurs, il attirera les bonnes personnes et aidera le créateur à créer le type de connexion qu’il appréciera.
MacMillan Lynch
Cet exemple adopte une approche un peu différente. La partie histoire de ce site est brève, et toutes sont contenues dans le graphique principal de la page d'accueil. Dans ce cas, l'histoire est à peu près sans importance, sauf que cela crée un sentiment de mystère à comprendre. En atterrissant sur le site, je me suis demandé ce que c'était que cette personne. Parfois, vous voulez nourrir vos visiteurs à la cuillère; d'autres fois, il peut être très utile de les aspirer avec une histoire ou un mystère intéressant. Cela a aussi l'avantage de créer un site assez distinct et, espérons-le, mémorable.
Sallee Design
Sur le site de Sallee Design, nous trouvons une approche plus typique de la structure du site. Logo en haut à gauche, navigation principale en haut et diaporama standard. À bien des égards, c'est un site très normal (avec un beau design appliqué).
Ce que j'ai trouvé intéressant, cependant, c'est que leur diaporama sur la page d'accueil n'était pas simplement une série d'images Flash à rotation automatique. Au lieu de cela, le diaporama est lancé par l'utilisateur et commence par une invitation à commencer une visite. Une fois que vous plongez, vous êtes confronté à une série de diapositives qui résument ce que vous obtiendriez si vous parcouriez les différentes pages du site. Et tout est terminé avec des points de départ clés pour le reste du site.
Je pense que cette approche est intelligente. Pour les débutants, il est intéressant de voir un élément comme le curseur de la page d’accueil a un objectif bien défini. J'aime aussi le fait qu’ils bénéficient d’un argumentaire de vente sur une seule page et que le bonus SEO est offert en ayant un plus grand nombre de pages.
Design réactif
Le sujet de site Web adaptatif est pour le moins un sujet extrêmement chaud. Il ne faut donc pas s’étonner que cette approche se retrouve dans les nouveaux portefeuilles produits actuellement. Sans entrave, ces personnes ont adopté la nouvelle technique. Et sans surprise, les trois exemples présentés ici concernent des sites de portefeuille de développeurs front-end, exactement le type d'endroit auquel nous devrions nous attendre pour trouver une telle solution.
Ryan Taylor
Le site de Ryan suit la formule standard d'une page pour un portfolio personnel. Cette approche fonctionne parfaitement lors de l'intégration de techniques réactives dans le site. Avec une seule page à prendre en compte, il peut être beaucoup plus facile de tester et de construire un site comme celui-ci. Mais ne pense pas que ce soit facile. Il faut beaucoup d'efforts et de planification pour créer un site propre et beau qui se transforme de cette façon.
Aaron Shekey
La prochaine étape est le portefeuille d'Aaron Shekey. Ce magnifique petit site comprend de nombreuses techniques éprouvées pour un site de portfolio. Il est semi-minimaliste, a des couleurs tamisées pour permettre aux images de sauter, et son design est largement basé sur la typographie. Comme c'est ce site fonctionne magnifiquement et est extrêmement efficace pour montrer le travail de l'artiste. Mais avec l'avantage supplémentaire d'une mise en page réactive, le site est garanti pour bien paraître sur un large éventail de périphériques. Cela garantit à l'utilisateur une expérience positive, sans frustration liée au zoom et à la numérisation.
Andrew Cohen
Enfin, dans la catégorie responsive, nous trouvons le site personnel du développeur frontal Andrew Cohen. Tout comme les autres, il a une structure de page unique avec ce que j'appellerais un design basé sur l'arrière-plan. De cette manière, l’arrière-plan peut changer et évoluer sans grand besoin de changements structurels. Cela fait du site un candidat idéal pour introduire des techniques réactives.
Dispositions créatives
Parfois, le meilleur moyen de faire bonne impression est de se distinguer comme étant unique et différent. Et quoi de mieux pour y parvenir qu'avec une structure inhabituelle qui se moque des normes et des attentes que nous avons tous. Dans une certaine mesure, presque tous les exemples de cette collection montrent cet attribut particulier, mais j'ai sélectionné ce petit sous-ensemble pour le démontrer.
Et avant de me lancer, je tiens à souligner que ces sites ne font pas appel à des mises en page créatives uniquement pour la créativité. Ce sont toujours des sites fonctionnels extrêmement clairs et simples à utiliser. Pourtant, ils ont leurs propres personnalités distinctes qui leur permettent de se démarquer. Cela correspond exactement à ce qu'un site de portefeuille devrait faire: aider son créateur à se démarquer.
Krichevtsova Alexandra
Ce que j'aime beaucoup dans cet exemple sur le thème des mises en page créatives, c'est qu'il ne s'agit pas d'une mise en page radicalement différente. Oui, le site ne suit pas le logo normal en haut à gauche, la navigation dans l’approche supérieure. La mise en page est à quelques pas de là si. Je pense que cela démontre très bien le point.
L'objectif n'est pas d'inventer une mise en page pour être créatif. Mais plutôt, faire preuve de créativité en présentant la page de manière à communiquer les informations de la meilleure façon possible. Dans ce cas, le flux créé par la disposition légèrement atypique fonctionne à merveille.
David Desandro
Dans ce cas, la disposition semble totalement inhabituelle. À un certain niveau, il se sent incomplet et, en même temps, il se sent complètement organisé et facile à utiliser. Fouillez dans le portfolio et d'autres pages et vous serez facilement impressionné par la diversité de ce site. Il a certainement un attrait pour les créatifs, mais techniquement.
Deidre Bain
Ce site de défilement d'une page enfreint également les normes de la structure de mise en page. Dans cet exemple, presque toute la conception est basée sur des mises en page et des illustrations spécifiques à une page. En règle générale, cette approche ne fonctionne pas bien et entraîne des problèmes de maintenance. Mais dans le cas d'un site de portfolio personnel, c'est en fait un excellent moyen de démontrer certaines compétences utiles. Plus particulièrement, il existe une minutie sur le site qui vous laisse espérer que ce concepteur sera à la hauteur. Ce sont ces messages subtils qui peuvent être extrêmement puissants pour communiquer sur votre propre site de portefeuille.
Siddharth Arun
Au premier abord, ce site a l’impression d’être conforme au protocole standard. Mais interagissez un peu avec le site et vous vous sentez totalement unique. Parfois, trouver votre propre touche créative ne signifie pas que vous devez tout réinventer. Changez juste assez pour que les résultats soient surprenants (et fonctionnels).
Texte en gras
En observant les vignettes des sites collectés pour figurer ici, une chose est vraiment apparue: l'utilisation de texte extrêmement grand et gras. Les exemples listés ci-dessous présentent tous un texte énorme qui se distingue sur le site. La principale raison pour laquelle je peux trouver cette approche est la clarté.
Ce gros texte en gras garantit la communication d'au moins un message primaire. Dans certains cas, cela semble plus fonctionnel que d'autres, mais le résultat est toujours le même. L'attention de l'utilisateur est presque garantie d'être dirigée vers cette copie de taille gigantesque. Observez les échantillons et notez les différentes manières dont les créatifs ont mis cet élément à contribution.
Garth Humphrey
Justin Burns
Amman, Jordanie
Ross Angus
Alex Pierce
Garniture sur le dessus
Comme je l’ai déjà mentionné, certains modèles sont beaucoup moins fonctionnels et significatifs que d’autres. Dans ce cas, je me sens presque mal en plaçant les échantillons suivants dans un ensemble si frivole. Les sites présentés ci-dessous sont absolument magnifiques. veuillez ne pas considérer cette classification comme une insulte. En fait, deux de mes sites favoris de cet article se trouvent ici.
Fondamentalement, le motif est qu'une sorte de bande décorative, une ligne pleine ou un motif en zigzag apparaît en haut. J'ai limité cet ensemble à trois sites, mais si vous parcourez d'autres exemples, vous trouverez le même élément au travail.
Pourquoi un si petit détail est-il si courant? Peut-être qu'avec l'approche d'une seule page, il est bon de noter le haut de la page. De cette manière, les utilisateurs obtiennent un petit indice visuel indiquant où la page commence.
Mathieu White
Touch Nerds
Danilo Giagnoli
Texture texture texture
Un autre détail visuel extrêmement courant sur les sites du portefeuille est la texture. Cela est particulièrement vrai en ce qui concerne les éléments d'arrière-plan. Une partie du style visuel actuel intègre des textures subtiles dans l'arrière-plan.
Je trouve que cet élément fait un excellent travail en incorporant un élément organique dans la page, ce qui permet de le retirer de ses fondements techniques. Cet élément simple peut ajouter une touche chaleureuse qui, d’une manière ou d’une autre, insuffle une tonne de vie dans un design. Encore une fois, parcourez plusieurs des échantillons précédemment couverts et vous trouverez de nombreux exemples de cet élément au travail. Voici quelques échantillons qui le font extrêmement bien.
Bjarke Clauson-Kaas
Aaron Lumsden
DS Higdon
Andrew Ckor
Autres sites remarquables du portefeuille
Il existe d'innombrables candidats pour ce type de collection. Il est tentant d'inclure presque trop d'échantillons dans ce cas. Au lieu de cela, je me suis concentré sur une collection supplémentaire de sites présentant un large éventail de styles, de structures et d'approches globales.
Une chose que vous remarquerez est que certains de ces sites ne sont pas destinés aux concepteurs. J'ai trouvé très intéressant de voir comment d'autres industries ont utilisé le Web pour vendre un individu. Après tout, un site de portefeuille est censé faire exactement cela. Donc, pour des raisons d’inspiration et de nouvelles idées, j’en ai inclus quelques-unes en dehors de la communauté du web design.
Collin Henderson
Josh Miller
Nate Croft
Torsten Meb
Joey Rabbitt
Eric Salvail
Bekka Reese
Félix Ménard
Marija Zaric
Tobias Persson
Jake Dahn
Conclusion
Créer un site pour vous représenter en ligne n'est pas une mince affaire. J'espère que les sites rassemblés ici vous inspireront et vous défieront.
Certains des éléments présentés ici représentent des mécanismes très intentionnels pour contrôler l'expérience utilisateur et vendre l'individu. D'autres démontrent des tendances de conception plus ou moins visuelles. Je crois que ni l'un ni l'autre ne devrait être ignoré, ni contrôler seul les choses. C'est en remettant en question les normes, en adoptant des modèles fonctionnels et en évaluant votre image en ligne sous un nouveau jour qui peut mener à des idées révolutionnaires qui vous aideront à vous démarquer.
Et en ce qui concerne le sujet de la distinction, je me sens obligé de rappeler que le but ici n’est pas d’inventer l’interface la plus originale. Au lieu de cela, le but est de penser de manière créative dans les limites que nous avons.
J'espère toujours que nous trouverons les solutions créatives qui nous aideront à nous démarquer avec des résultats étonnamment fonctionnels. Si vous regardez les échantillons collectés ici, ils ne sont pas seulement beaux, mais ils fonctionnent incroyablement bien.
Quels sont les meilleurs sites de portfolio que vous avez vus? Avez-vous remarqué d'autres tendances dans les portefeuilles de designers récemment? Faites le nous savoir dans les commentaires!