Comment créer un site Web de portfolio de conception Web comme un pro ?

Êtes-vous à la recherche d’un guide pour créer votre site Web de portfolio de conception Web ? Êtes-vous un créatif qui souhaite présenter son travail pour attirer de nouveaux clients ?

Que vous souhaitiez partager votre travail avec le monde, le vendre en ligne ou fournir des exemples pour attirer de nouveaux clients, votre portfolio doit être un élément essentiel de votre stratégie marketing.

Aujourd’hui, nous allons partager un guide sur la façon de créer un portfolio de conception Web à partir de zéro. Les étapes sont simples et vous n’aurez besoin d’aucune expérience en codage.

Vous apprendrez également quelques conseils pour rendre votre portfolio aussi beau que les images, vidéos ou sites Web que vous y présentez.

Tout d’abord, commençons par expliquer pourquoi un designer a besoin d’un portfolio en ligne.

Avoir un portefeuille présente de nombreux avantages.

Si vos créations sont visuelles comme des images, des vidéos ou des sites Web, vous devez les montrer et les raconter. Un portfolio peut vous aider.

C’est également un endroit où vous pouvez démontrer de quoi vous êtes capable et permettre à des clients potentiels de voir ce que vous pouvez faire.

C’est votre vitrine où vous pouvez exposer vos créations et démontrer votre valeur au-delà de tout doute raisonnable.

Les portfolios sont également consultables.

Si vous souhaitez être trouvé sur les moteurs de recherche, votre copie Web n’est qu’un aspect du référencement. Les images peuvent en être une autre. Un autre très puissant, surtout s’ils sont indexés par Google Images.

Fonctionnalités essentielles d’un portefeuille de conception Web

Créer une superbe mise en page de site Web pour votre portefeuille de conception de sites Web est une excellente initiative.

Nous partageons ici ce que nous considérons comme des fonctionnalités essentielles pour que votre portefeuille de conception Web se démarque.

À propos de la page

La page À propos est l’endroit idéal pour montrer votre personnalité avec des mots. Ce serait formidable si vous partagez votre histoire ici. Par exemple, comment vous êtes devenu concepteur de sites Web ou graphiste ou comment vous avez découvert que vous étiez bon dans la carrière que vous aviez choisie.

Cela aide vos clients à comprendre votre parcours, votre expérience et votre passion pour le design.

L’ajout de votre nom et de votre photo donne une touche personnelle. Vous pouvez également parler de votre formation, de votre expertise et partager vos récompenses ou reconnaissances.

Page de services

La page de service est une page essentielle qui stocke toutes les informations sur vos services. Nous vous recommandons d’expliquer vos services et de vous concentrer sur la personnalité du client.

Vous pouvez également envisager de répondre à certaines questions pertinentes qui viennent à l’esprit d’un visiteur à propos de vos services afin de surmonter toute objection et faciliter la conversion.

Section Galerie ou Portfolio

Il est temps de vous montrer un peu en ajoutant vos meilleurs projets à la zone portfolio de votre site Web. Si vos visuels séduisent les visiteurs, ils peuvent décider de vous embaucher, c’est de cela qu’il s’agit.

Nous vous recommandons d’utiliser des vidéos, des diaporamas de photos ou des galeries lors de l’affichage de vos œuvres.

Nous vous recommandons fortement de rendre la mise en page flexible afin que les visiteurs puissent facilement consulter votre travail à partir de différents appareils. C’est quelque chose que de nombreux clients attendront de leurs propres projets, alors autant montrer vos capacités ici !

Espace témoignages

Les témoignages fonctionnent comme une preuve sociale. Obtenir des citations positives de vos clients et les ajouter à votre site Web contribue sérieusement à la conversion.

Vous faites probablement la même chose lorsque vous faites du shopping. Vous vérifierez les spécifications, puis lirez les critiques. Si vous êtes comme nous, ces avis auront une forte influence sur toute décision d’achat.

Utilisez la même approche pour votre propre site Web. Contactez les clients et demandez des commentaires positifs concernant votre travail ou offrez une sorte d’incitation pour les avis ou les témoignages.

Page de contact

Une page de contact est un élément essentiel de tout site Web. C’est le premier endroit où les visiteurs recherchent vos coordonnées pour savoir où vous vous trouvez et consulter vos réseaux sociaux.

Si vous avez des appels à l’action sur votre site, il y a de fortes chances qu’ils soient liés à votre page de contacts.

Vous pouvez avoir des formulaires de contact et des réseaux sociaux ailleurs sur votre site, mais c’est le premier endroit où les gens vérifieront.

Si vous avez d’autres coordonnées comme Behance et Dribbble, nous vous recommandons de les ajouter également. C’est une autre façon pour un client potentiel d’entrer en contact. Plus vous proposez de canaux, plus ils seront susceptibles de vous contacter.

Comment créer un site Web de portfolio de conception Web

Passons maintenant à l’événement principal, comment créer un portfolio de conception Web.

Suivez les étapes ci-dessous pour créer votre site Web de portfolio de conception Web en moins d’une heure :

1. Conditions préalables à la création de sites Web WordPress
2. Installez et activez le thème Astra
3. Installer et activer les modèles de démarrage
4. Sélectionnez un modèle de site Web de portfolio
5. Installer et activer WP Portfolio
6. Créez votre portfolio de conception Web
7. Personnalisez votre site Web de portfolio de conception Web

Commençons!

Étape 1 : Ce dont vous avez besoin pour créer un site Web WordPress

Lorsque vous envisagez de créer un site Web, vous avez besoin des éléments suivants :

Un nom de domaine : Chaque site Web possède un nom de domaine. C’est une adresse lisible par l’homme comme la nôtre https://wpastra.com/.

Un plan d’hébergement : l’hébergement est l’endroit où vous stockez les fichiers et les ressources de votre site Web afin que les gens puissent le visiter. Il est également utilisé pour connecter votre nom de domaine au serveur de noms.

Il existe de nombreuses sociétés d’hébergement sur le marché. SiteGround, Cloudways et Kinsta fournissent un hébergement de première classe. Nous vous recommandons d’explorer chacun d’eux.

WordPress : WordPress est un système de gestion de contenu (CMS) très populaire utilisé pour créer des sites Web. C’est gratuit et dispose d’un nombre illimité de logiciels de support tels que des thèmes et des plugins.

La plupart des sociétés d’hébergement proposent une installation WordPress en un clic.

Étape 2 : Installez et activez le thème Astra

Astra est l’un des thèmes les plus populaires de l’écosystème WordPress. Il s’agit d’un thème réactif, moderne et personnalisable, entièrement compatible avec les constructeurs de pages WordPress populaires.

La bonne nouvelle est qu’il est gratuit et comprend tout ce dont vous avez besoin pour créer un site Web de portfolio de conception Web.

Pour ce tutoriel, nous allons utiliser notre thème Astra.

Installons-le.

Accédez au tableau de bord WordPress > Apparence > Thèmes .

Appuyez sur le bouton Ajouter un nouveau en haut de la page ou utilisez l’icône « + » pour ajouter un nouveau thème.

Utilisez le champ de recherche pour trouver le thème Astra . Cliquez ensuite sur le bouton Installer .

Maintenant, appuyez sur le bouton Activer .

Vous avez installé et activé avec succès le thème Astra sur votre site Web !

Étape 3 : Installer et activer les modèles de démarrage

Starter Templates est un plugin WordPress populaire auquel plus d’ un million d’utilisateurs font confiance pour concevoir leurs sites Web.

Il est livré avec des tonnes de modèles de sites Web de portfolio gratuits compatibles avec différents constructeurs de pages. Vous pouvez rapidement créer le site Web de vos rêves à l’aide du modèle gratuit en quelques minutes.

Installons le plugin.

Accédez à Plugins > Ajouter un nouveau .

Tapez « modèles de démarrage » dans le champ de recherche pour trouver le plugin. Appuyez ensuite sur le bouton Installer maintenant .

Cliquez maintenant sur le bouton Activer .

Félicitations, vous avez activé les modèles de démarrage sur votre site Web !

Étape 4 : Sélectionnez un modèle de site Web de portfolio

Les modèles de démarrage sont livrés avec une gamme de modèles de portfolio gratuits et premium.

Ici, nous allons sélectionner Portfolio & CV. Il s’agit d’un modèle gratuit qui comprend la plupart des fonctionnalités dont vous aurez besoin pour créer un site Web de portfolio.

Importons le modèle.

Accédez à Apparence > Modèles de démarrage .

Cliquez sur le bouton Créez votre site Web maintenant pour commencer.

Choisissez un constructeur de pages que vous aimez utiliser pour concevoir votre site Web. Nous avons sélectionné le constructeur de pages Elementor pour le nôtre.

Tapez « Portfolio » dans la barre de recherche et sélectionnez Modèle de portfolio et de CV .

Vous pouvez ajouter le logo de votre site Web ici si vous en avez un. Vous pouvez l’ajouter plus tard si vous ne le faites pas.

Cliquez sur le bouton Continuer .

Si vous souhaitez modifier les polices et la couleur par défaut de votre site Web, vous pouvez le faire ici.

Cliquez à nouveau sur le bouton Continuer lorsque vous êtes prêt.

Fournissez votre nom et votre adresse e-mail si vous souhaitez recevoir des newsletters de notre part. Cliquez ensuite sur le bouton Soumettre et créer mon site Web .

Le système importera les plugins essentiels et les ressources requises sur votre site Web.

Enfin, cliquez sur le bouton Afficher votre site Web pour voir le design.

Jetons un coup d’œil rapide à votre site Web.

 

Étape 5 : Installer et activer WP Portfolio

 

WP Portfolio est un plugin WordPress pratique conçu pour vous aider à créer un superbe portfolio en quelques clics.

Vous pouvez créer des portefeuilles d’images, de vidéos et de sites Web. Il est compatible avec les créateurs de pages WordPress populaires et offre des possibilités infinies pour rendre votre portefeuille plus attrayant.

Voici quelques fonctionnalités notables de WP Portfolio :

Modèles de portfolio prêts à l’emploi

• Chargement paresseux
• Mises en page illimitées
• Grille de maçonnerie
• Prise en charge des codes courts

Le modèle que nous avons importé comporte une section portfolio sur la page d’accueil. Il est conçu avec le widget de galerie d’images Elementor mais nous pouvons ajouter plus de fonctionnalités au portefeuille avec WP Portfolio.

Tout d’abord, installez le plugin sur votre site Web. Le processus d’installation du plugin est similaire aux modèles de démarrage, nous ne le répéterons donc pas.

La différence est que vous devez ajouter la clé de licence pour activer le plugin, car il s’agit d’un outil premium.

Vous devrez créer un compte sur WP Portfolio et payer pour le plugin. En échange, vous recevrez une clé de licence.

Une fois l’installation terminée, vous trouverez l’option d’activation de la licence sur la page de vos plugins.

 

Paste the license key into the field and hit the Activate License button.

 

 

You’ll get the success message if you provide the valid license key.

 

 

Étape 6 : Créez votre portfolio de conception Web

Il est maintenant temps de créer votre portfolio de conception Web !

Accédez à WP Portfolio > Paramètres.

Ici, vous obtiendrez trois paramètres différents, Général, Style et Avancé.

L’onglet Paramètres généraux propose quatre options.

Vous pouvez sélectionner un seul générateur de page ou permettre à tous d’importer des modèles en tant que portefeuille à partir des modèles de démarrage.

Cliquez ensuite sur le bouton de synchronisation et attendez la fin de l’importation.

Consultez le guide et découvrez comment répliquer WP Portfolio avec des modèles de démarrage.

Pour utiliser le portfolio, vous devez copier le shortcode et le coller à l’endroit où vous souhaitez l’afficher.

[wp_portfolio]

L’option d’affichage vous offre certaines fonctionnalités pour gérer votre portefeuille.

 

Cliquez sur le bouton Enregistrer les modifications et passez à l’onglet suivant.

L’onglet Style vous donne plus de contrôle pour personnaliser le portefeuille.

Vous pouvez afficher votre portfolio par défilement ou par clic.

Vous pouvez définir le style de survol des vignettes comme un défilement d’image et définir la barre d’aperçu en haut ou en bas. Vous pouvez également ajouter un appel à l’action (CTA) à votre portefeuille.

L’option de mise en page fournit d’autres paramètres pour régler le portefeuille.

Vous pouvez activer la disposition en maçonnerie et gérer les colonnes et les éléments par page dans cette zone.

 

N’oubliez pas d’appuyer sur le bouton Enregistrer les modifications pour enregistrer le paramètre.

Si vous souhaitez personnaliser les slugs par défaut, vous pouvez visiter l’onglet Avancé.

Réécrivez ensuite les slugs selon vos besoins.

Comment créer un portfolio de conception Web

Ensuite, accédez à WP Portfolio > Ajouter un nouveau.

Ajoutez un titre pour votre portfolio et choisissez un type.

Nous voulons créer un portefeuille d’images, nous avons donc défini le type sur Image.

Cliquez ensuite sur le bouton Ajouter un élément de portefeuille.

 

 

Maintenant, ajoutez une vignette et une image de portfolio au portfolio.

Vous pouvez utiliser les bons paramètres pour définir la catégorie du portefeuille, les balises, l’image sélectionnée et autres.

Enfin, cliquez sur le bouton Publier.

 

 

Remarque : Pour activer la disposition en maçonnerie, vous devez ajouter l’extrait de code suivant à votre fichier function.php de thème.

Accédez au fichier function.php en sélectionnant Apparence > Éditeur de fichiers de thème sur la gauche.

Sélectionnez ensuite function.php dans le menu Fichiers de thème à droite.

add_filter( ‘astra_apply_flex_based_css’, ‘__return_false’ );

Après avoir ajouté le code, cliquez sur le bouton Mettre à jour le fichier.

 

Étape 7 : Personnalisez votre site Web de portfolio de conception Web

Ajoutons le portefeuille nouvellement créé à votre site Web.

Accédez à Modifier avec Elementor > Paramètres du site.

Appuyez sur l’icône « X ».

La page est maintenant ouverte sur le panneau de l’éditeur Elementor.

Accédez à la zone de votre portefeuille de modèles. Faites un clic droit sur la section du portfolio et appuyez sur le bouton rouge Supprimer.

Faites glisser et déposez le widget Elementor Shortcode dans la nouvelle section.

Collez le shortcode [wp portfolio] dans le widget et appuyez sur le bouton Appliquer.

Enfin, appuyez sur le bouton vert Mettre à jour pour enregistrer tous les paramètres.

Remarque : Vous pouvez également appliquer les mêmes étapes pour ajouter le portfolio à la page de portfolio dédiée de votre site Web.

Toutes nos félicitations! Vous avez ajouté avec succès le portfolio à votre site Web.

Maintenant, vérifions-le.

Exemples de sites Web de portfolio étonnants à utiliser pour vous inspirer

Vous venez d’apprendre à créer un site Web de portfolio de conception Web.

Partageons maintenant quelques exemples qui pourraient vous aider à être plus créatif lors de la conception de votre portfolio.

1. Jacek Jeznach

Jack Jeznach

est un développeur Web front-end professionnel et un expert WordPress qui vit en Pologne. Il décore son site Web de portfolio avec un fond sombre et un menu de navigation accrocheur dans la barre latérale.

Ce site Web est très épuré avec un design élégant.

Il y a cinq éléments de menu dans lesquels il met généralement toutes les informations pertinentes. La page de travail présente ses principaux projets avec des effets de survol sympas et un curseur d’image pratique.

2. Marie-Marie

Maria Marie est un chercheur de lumière, un conteur visuel et un designer doté d’une âme créative. Elle conserve sa créativité non seulement dans son travail mais aussi sur son site internet.

Elle a un site Web de portfolio simple mais artistique. Cet incroyable site Web a une page d’accueil détaillée avec un menu hamburger en haut de la page et un menu de pied de page riche.

Ce site Web de plusieurs pages dispose également d’une belle page de portfolio où elle affiche ses œuvres et ses photographies sous forme de grille.

3. Dutch Uncle

Dutch Uncle est une société de gestion d’artistes.

La page d’accueil affiche les images à l’aide d’une disposition de grille élégante. Il comporte également un élément de menu permettant de rediriger les visiteurs vers leur page Instagram.

Vous trouverez également les pages essentielles telles que à propos, les actualités, la soumission et une page de contact dédiée pour entrer en contact sur leur site Internet.

4. Adrian Portfolio

Adrian est un designer chez Apple qui s’occupe principalement de l’interface humaine. Il possède un site Web unique avec des fonctionnalités fantastiques.

L’ensemble du site Web a un fond sombre avec la couleur du texte blanc. Cela rend le site Web plus attrayant et procure une sensation apaisante aux visiteurs.

Adrian affiche ses œuvres remarquables juste après la zone des héros du site Web en appliquant des effets de survol et d’animation exclusifs. Son site Web dispose également d’une zone de pied de page montrant ses réseaux sociaux.

5. Mike Kus

Mike Kus est un autre exemple concret d’un beau site Web de portfolio. Le design est simple et très facile à utiliser.

Un en-tête élégant en haut avec trois liens sociaux aide les visiteurs à voir ses autres travaux professionnels sur différentes plateformes de conception.

Conseils supplémentaires pour vous aider à faire ressortir votre portefeuille

Vous savez maintenant comment créer un portfolio de conception Web pour faire passer votre carrière de concepteur au niveau supérieur.

Partageons quelques conseils pour améliorer un peu plus votre portfolio.

Focus sur la sélection des projets

Voici la partie qui change la donne. Présentez vos meilleurs projets dans ce domaine car la quantité compte. Nous vous recommandons d’ajouter uniquement vos meilleurs travaux, même si vous n’en avez pas encore beaucoup.

Raconter une histoire

Il y a une histoire derrière chaque travail créatif et derrière chaque conception créative.

Aujourd’hui plus que jamais, les clients s’intéressent aux personnes derrière le produit ou une œuvre.

cela les aide à vous comprendre un peu mieux.

C’est l’occasion de partager votre histoire et de raconter une histoire avec vos créations.

Partagez vos œuvres personnelles

Certains clients pourraient être intéressés à voir vos travaux personnels en plus de vos projets professionnels.

C’est une astuce que de nombreux clients appliquent pour comprendre à quel point vous êtes passionné par votre travail. Ce serait formidable si vous présentiez certains de vos travaux personnels si vous en avez. Cela aide à attirer l’attention de vos clients et constitue en fin de compte une autre façon de montrer votre créativité.

Gardez-le numérisable

Envisager une présentation simple de portfolio pour votre site Web est idéal car cela aide les visiteurs à explorer facilement votre travail.

Même s’ils sont occupés, les visiteurs peuvent le scanner rapidement et se faire une idée de vos capacités.

Concentrez-vous sur le référencement de votre site Web

L’optimisation des moteurs de recherche (SEO) est la clé si vous disposez d’un site Web de portfolio en ligne.

Pensez à utiliser des outils de référencement modernes comme Schema Pro. Il s’agit d’un outil d’optimisation des informations sur le schéma de votre site Web qui peut aider à améliorer l’apparence de votre site Web dans les résultats des moteurs de recherche.

Consultez ce blog pour savoir comment optimiser le référencement de votre site WordPress.

Emballer

Créer un site Web de portfolio est un excellent moyen de partager votre travail avec les visiteurs et, espérons-le, de les transformer en clients.

WordPress, Astra et des plugins comme WP Portfolio simplifient le processus. Vous pouvez vraiment créer un portfolio convaincant en quelques clics !

Avec des outils comme ceux-ci et un peu de temps, vous pourriez créer votre propre site Web et un portfolio qui vous montre sous votre meilleur jour.

Si vous débutez en tant que professionnel de la création, il y a toutes les raisons de les essayer !

Avez-vous utilisé un portefeuille pour attirer de nouveaux clients ? Avez-vous des conseils d’aménagement ou des astuces pour convertir les visiteurs en clients ? Partagez votre histoire ci-dessous !