Comment créer l’image de héros parfaite pour votre site de portfolio

Cet article a été créé en partenariat avec BAWMedia. Merci de soutenir les partenaires qui rendent SitePoint possible.

Il ne faut que quelques secondes aux visiteurs pour se faire une idée d’un site Web. Étant donné que l’image du héros sur la page d’accueil est le premier élément de contenu que la plupart des visiteurs rencontrent, quelle sorte d’impression voulez-vous qu’ils aient lorsqu’ils voient la vôtre ?

Pour tirer le meilleur parti de ces premières rencontres, votre image de héros doit être bien pensée et exécutée. Il doit indiquer quel type de créateur vous êtes, offrir un aperçu de vos talents et donner aux visiteurs une raison d’explorer davantage.

Pour créer l’image de héros parfaite pour votre site Web de portefeuille, il y a 6 éléments sur lesquels se concentrer. Dans cet article, nous examinerons ces éléments ainsi que des exemples de sites Web prédéfinis à partir de BeTheme – l’un des thèmes WordPress les plus populaires et les mieux notés au monde avec plus de 264 000 ventes et une note de 4,83 sur 5 étoiles – et d’autres marques qui démontrent diverses façons de les réunir astucieusement.

Concevoir l’image de héros parfaite pour votre site Web de portefeuille

En général, il y a 6 éléments qui s’assemblent pour former chaque section héros, quel que soit le type de site que vous construisez. Voici quelques éléments à prendre en compte lorsque vous créez votre image de héros à l’aide de ces composants essentiels :

1. Choisissez des images qui reflètent le mieux ce que vous faites

L’imagerie que vous choisissez pour votre image de héros doit avoir un lien direct avec le type de travail que vous faites.

Par exemple, Lauren Waldorf Intérieurs est un studio de design d’intérieur boutique. À ce titre, la section héros contient une galerie photo coulissante des projets terminés :

Pour les photographes, vidéastes, concepteurs de sites Web et autres artistes visuels, vous avez probablement beaucoup de graphismes que vous pourriez montrer dans le héros. Pour les artistes qui travaillent avec d’autres types de médias, il peut être difficile de décrire visuellement ce que vous faites.

Dans ce dernier cas, vous pouvez décider de faire de votre visage l’image principale dans la section héros, comme nous le voyons dans le Site Web pré-construit BeDJ 2 image du héros :

Le visage du DJ donne aux visiteurs quelque chose de plus intéressant visuellement à regarder qu’un simple tas de couleurs et de graphiques liés à la musique. Il crée également un lien direct entre le corps de l’œuvre et l’artiste.

Lors de la conception de votre image de héros, tenez compte des points suivants :

• Quel ou qui devrait être le sujet principal de la section ?
• L’image appartient-elle au premier plan ou se fond-elle dans l’arrière-plan ?
• L’image sera-t-elle intacte ou existe-t-il un moyen de la rendre plus artistique ?

De plus, avez-vous même besoin d’images? Par exemple, si vous êtes un concepteur de polices ou un rédacteur, vous pouvez décider d’ignorer les images et de laisser votre texte parler.

2. Utilisez l’arrière-plan pour donner plus de détails sur ce que vous faites

Il existe différentes façons de gérer l’arrière-plan de la section des héros.

Dans certains cas, votre travail peut occuper la toile de fond. Par exemple, un vidéaste pourrait mettre un diaporama de ses vidéos en arrière-plan. Non seulement cela rendrait le site Web plus vivant, mais cela donnerait également aux visiteurs un aperçu rapide de votre travail.

Dans d’autres cas, vous voudrez peut-être donner un petit aperçu de votre travail dans la section héros, comme cet exemple du BeInterior 6 site Web pré-construit:

La galerie de photos occupe environ un quart de la largeur de la section. Alors que le designer aurait pu utiliser un fond de couleur pour encadrer le travail, il a choisi d’ajouter une photo texturée à la place. La feuille fournit non seulement une couleur réconfortante à la toile de fond, c’est une façon créative d’ajouter du contexte à ce que fait le décorateur d’intérieur.

Votre autre option serait d’utiliser des couleurs unies ou des dégradés (avec des illustrations) en arrière-plan de la manière dont Mindgrub Est-ce que:

Pour les créations numériques, cela pourrait être votre meilleure option. Bien que vous puissiez montrer des captures d’écran de sites Web que vous avez créés ou des kits d’interface utilisateur que vous avez développés, vous pouvez utiliser cet espace pour créer votre propre chef-d’œuvre numérique. Vous pouvez enregistrer le travail que vous avez créé pour les clients pour une autre section ou page.

3. Donnez du style à vos polices pour que votre voix devienne cristalline

Même si vous n’écrivez pas le texte qui apparaît dans la section héros, les choix esthétiques que vous faites peuvent communiquer autant aux clients potentiels que les mots eux-mêmes.

Il existe plusieurs façons d’ajouter une voix à la messagerie de votre héros. Le premier concerne le type de police que vous utilisez. Par exemple, BeDetailing 4 site Web pré-construit utilise une police Google appelée Italiana :

Cette entreprise d’esthétique automobile exprime un penchant pour les voitures classiques et vintage dès le départ. Le libellé, l’imagerie de la voiture et l’élégante police inspirée de la calligraphie nous en disent autant.

Une autre chose à considérer est la façon dont le style de vos phrases peut rendre votre message différent. Par exemple, Obtenez Em Tiger fait un certain nombre de choses pour changer la façon dont le texte de leur image de héros sonne dans la tête des personnes qui le lisent :

Premièrement, le titre principal est en majuscules. Le texte ainsi stylisé est généralement interprété comme un son fort et gras.

Deuxièmement, les mots « STAND OUT » sont surlignés en orange. Ceci est destiné à remplacer les italiques ou les caractères gras qui seraient normalement utilisés pour mettre l’accent sur le texte brut.

De plus, le sous-titre est écrit en casse de phrase. Lorsque les visiteurs liront ceci, cela prendra probablement un ton plus amical et plus conversationnel dans leur tête.

4. Déterminez le rôle que joueront les couleurs

Au moment où vous êtes prêt à créer l’image du héros pour votre site de portefeuille, vous avez probablement déterminé quelles seront les couleurs de votre marque.

En règle générale, la palette de couleurs de la marque est utile pour styliser les boutons ainsi que pour ajouter des accents aux zones clés de votre site Web. Cependant, vous pouvez décider de vous en inspirer fortement pour créer votre section héros en tant que G Conception pointue a fait:

La palette de couleurs de cette section héros est relativement simple. Pourtant, le rouge et le jaune vifs qui dominent le design rendent impossible d’en détourner les yeux.

Bien que ce spectacle de couleurs fonctionne bien pour cette agence, il peut ne pas convenir à d’autres types de créations. Par exemple, un site Web de photographie pré-construit comme BePhoto 2 utilise un thème sombre :

L’image du héros a un curseur de photo au centre où une touche de couleur vive est révélée avec chaque photo suivante. Parce que le reste du site est de style gris foncé avec du texte blanc cassé, les photos attirent instantanément l’attention.

Ainsi, lorsque vous décidez de votre propre palette de couleurs, posez-vous les questions suivantes :

• De combien de couleurs avez-vous besoin ?
• Quelles couleurs de la palette de couleurs de votre marque allez-vous utiliser ?
• Y a-t-il d’autres couleurs que vous voulez tirer?
• Quel rôle chaque couleur jouera-t-elle en termes de création d’ambiance, d’action inspirante, etc.

La couleur n’a pas besoin d’être omniprésente pour être efficace. Tout dépend de ce que vous en avez besoin pour faire pour vous dans cette section.

5. Rendez-le plus impressionnant avec des interactions

Sans animation, votre image de héros n’est rien de plus qu’un panneau d’affichage statique.

Maintenant, il n’y a rien de mal avec la publicité sur panneau d’affichage – quand elle mesure plus de 200 pieds carrés et se tient à plus de 10 pieds du sol. Sans la grande présence des panneaux d’affichage dans le monde réel, les conceptions statiques sur un site Web peuvent sembler sans vie et sans inspiration.

Tout comme les autres éléments que nous avons examinés aujourd’hui, il existe différentes façons d’ajouter du mouvement et de l’interaction à la conception de votre image de héros.

Par exemple, Génial Inc est un studio d’animation et de design. Ce serait bizarre si nous ne voyions rien de leur travail d’animation de haut niveau après avoir accédé au site Web :

D’un autre côté, si vous êtes un créatif qui ne fait pas de travail d’animation, il n’y aurait aucune raison de le pousser à cet extrême. Cela ne signifie pas pour autant que votre image de héros doit être dépourvue de mouvement.

Par exemple, Site Web pré-construit BeModel 3 a une conception d’image de héros dynamique :

Ce n’est pas seulement le curseur d’image qui est animé. La palette de couleurs du curseur change en synchronisation avec les changements de photo.

Même cela peut sembler beaucoup de mouvement pour vous. Si tel est le cas, il existe des moyens plus subtils d’utiliser des animations pour rendre votre image de héros plus attrayante, comme ajouter des transformations de survol aux boutons ou des animations de transition à la section.

6. Choisissez un seul appel à l’action

Enfin et surtout, vous voudrez déterminer quelle devrait être la prochaine action logique pour les visiteurs.

Une option consiste à les faire défiler vers le bas de la page. Si tel est le cas, vous ne voudrez peut-être même pas inclure de bouton d’appel à l’action. La majorité des visiteurs commenceront naturellement à défiler après avoir vu tout ce qu’ils doivent voir.

Une autre option consiste à les inviter à visiter une autre page de votre site Web. Si tel est le cas, quelle page devrait-il être? Sur un site de portfolio, vous souhaiterez probablement que les visiteurs accèdent à votre page Portfolio ou Services.

BePhotography 2 site Web pré-construitpar exemple, dirige les clients potentiels vers la page Portfolio :

Pourtant, une autre option consiste à encourager les visiteurs à interagir avec l’image du héros avant de leur donner la possibilité d’aller ailleurs. Cela sera utile si votre image de héros propose un diaporama de votre travail avec lequel les utilisateurs peuvent interagir. C’est quoi Perky Bros Est-ce que:

Le curseur du visiteur changera d’apparence en fonction de la partie du curseur sur laquelle il survole. Sur le côté gauche ou droit de l’écran, une pointe de flèche bleue apparaît, leur faisant savoir qu’il y a plus de travail à explorer. Au centre de l’écran, les mots « Afficher le projet » apparaissent. Une fois cliqué, le visiteur sera redirigé vers une page d’étude de cas pour le projet.

Concevez une image de héros qui rende justice à votre travail créatif

La conception de l’image du héros est particulièrement critique sur les sites de portfolio, car elle doit non seulement refléter ce que les visiteurs trouveront sur votre site, mais également refléter vos talents de créatif. Vous devez donc vous assurer de créer une image de héros qui vous prépare correctement le terrain.

Ce qui est bien d’utiliser un thème WordPress comme BeTheme est qu’il est livré avec 101 sites de portefeuille pré-construits. Chacun d’entre eux est livré avec une conception d’image de héros fabriquée à la main qui facilitera la mise à jour des 6 composants cruciaux que nous avons examinés ci-dessus.