Dispositions de grille dans les sites de portfolio WordPress : conseils et exemples de conception

La structure la plus courante de tout site de portefeuille WordPress est la grille. Il montre une poignée de travaux à la fois afin que le spectateur puisse numériser rapidement et choisir tout ce qui attire son attention.

Mais qu'est-ce qui rend une disposition en grille solide pour un portefeuille ? Et que devez-vous prendre en compte lors du lancement de votre propre site de portfolio ?

Dans cet article, je partagerai quelques astuces et conseils sur les meilleures conceptions de mise en page de grille pour les portefeuilles WordPress.

Conceptions de grille serrée

Lorsque vous utilisez une grille, il est sage de garder la conception serrée. De cette façon, les éléments sont proches les uns des autres pour naviguer rapidement et encourager les utilisateurs à interagir avec le contenu.

La structure de la grille diffère généralement en fonction du type de contenu du portfolio. Vous devrez peut-être augmenter ou diminuer le rembourrage en fonction de vos photos et de la mise en page. Par exemple, les illustrations peuvent sembler floues lorsqu'elles sont rapprochées, de sorte que les portfolios d'art numérique bénéficient d'un espace supplémentaire.

Mais un designer peut garder son travail rapproché car les captures d'écran sont toujours faciles à distinguer, même à distance. Vous pouvez voir un bel exemple dans le thème Ink pour WordPress.

Cela n'utilise absolument aucun rembourrage entre les éléments de la grille. Ces blocs carrés s'alignent étroitement pour que l'utilisateur voie tout en même temps.

Il utilise également des vignettes plus petites afin qu'elles aient tendance à attirer rapidement l'attention. J'aime vraiment ce style et c'est un favori personnel car il laisse une si forte impression. Remarquez comment chaque photo est clairement visible en contraste avec toutes les autres.

Si vous avez un travail qui peut bénéficier de ce style, examinez le thème Encre. C'est un moyen facile de créer ces types de grilles de portefeuille sans en coder une à partir de zéro.

Mais une belle alternative est Bramble, qui a un peu plus d'espace entre chaque pièce.

Ce thème WordPress est livré avec plusieurs présentations de portefeuille afin que vous puissiez réellement choisir le ou les styles que vous préférez. Certaines présentations de portefeuille ont des vignettes plus rapprochées, d'autres ont beaucoup de remplissage entre les éléments d'une grille.

Mais la première chose à considérer est la paralysie de l'analyse. Cela se produit lorsque trop de choix sont présentés, ce qui peut rendre quelqu'un incapable de choisir l'un d'entre eux.

Tant que vos entrées de portefeuille se sentent uniques et ont suffisamment d'espace (ou manque d'espace) pour se tenir debout, vous obtiendrez beaucoup de clics. Et n'est-ce pas là tout l'intérêt d'un portefeuille ?

Grilles de maçonnerie

Peu de gens connaissent les grilles de maçonnerie, mais elles existent depuis longtemps.

Ceux-ci utilisent généralement JavaScript pour organiser les éléments dans une grille en fonction de différentes hauteurs verticales. Ainsi, plutôt que d'ajouter des vignettes parfaites au pixel près de la même taille, vous pouvez ajouter différents éléments de portefeuille à différentes tailles tout en les adaptant.

Le thème Weston WordPress a cette fonctionnalité dans sa page de portfolio de photographie minimaliste. Cela cible naturellement les photographes qui souhaitent mettre leur travail en ligne, et la grille de maçonnerie est une option appropriée pour la photographie à hauteur variable.

Chaque photo trouve son chemin naturellement dans la grille en occupant juste la bonne quantité d'espace. Vous pouvez généralement personnaliser le nombre exact de colonnes et la hauteur des colonnes, mais n'oubliez pas que cela diffère en fonction de la taille de l'appareil.

Si vous aimez les mises en page plein écran, jetez un coup d'œil au thème Notio. Il utilise une conception de grille de maçonnerie avec des vignettes serrées et des effets d'animation personnalisés.

Notez que les grilles de ces deux thèmes varient également en étanchéité. L'un a un espace blanc supplémentaire entre les images tandis que l'autre a des vignettes alignées les unes contre les autres.

Les dispositions de grille suivent une poignée de tendances et c'est votre choix de suivre celles que vous préférez.

Détails du survol : oui ou non ?

De nombreux portefeuilles incluent des détails de survol qui apparaissent sur la vignette lors du survol. Cet effet ne se répercute généralement pas sur le mobile, mais c'est certainement une tendance courante pour les sites de portefeuille de bureau avec de grandes vignettes.

Chaque vignette doit être liée à la page interne de l'élément du portfolio, ou au moins ouvrir une galerie d'images liées à cet élément. Les miniatures ne doivent pas constituer l'intégralité du portfolio.

Mais l'ajout de détails peut encourager des clics plus élevés et inciter les gens à creuser plus loin dans le site. Le thème Créer WordPress utilise un effet d'animation personnalisé lors du survol pour attirer l'attention sur les détails du survol.

Lorsque votre curseur survole un élément du portefeuille, vous trouverez deux informations importantes :

• Le nom/titre de l'élément de parc
• La catégorie de l'article

Parfois, ces petits détails peuvent améliorer radicalement l'expérience utilisateur. Si quelqu'un recherche certains travaux de conception graphique, il peut parcourir par catégorie et consulter les titres avant de cliquer.

Mais d'autres fois, ces détails peuvent être inutilement verbeux et ils peuvent prendre trop de place. C'est pourquoi certains concepteurs ignorent ces détails, comme ce que vous trouverez dans le thème WordPress Gather.

Juste des vignettes simples avec des effets de survol simples. Facile pour les yeux et tous les détails se trouvent sous les vignettes afin qu'ils ne gênent pas l'image.

Cette tendance n'a pas de réponse « correcte » claire. Les détails de survol fonctionnent très bien pour certains, mais pour d'autres, cette fonctionnalité peut être une source de désagrément mineur.

Trouvez ce qui semble le mieux sur votre site et évaluez en fonction de vos propres goûts. Mais que les détails apparaissent au survol de la vignette ou sous la vignette, essayez de les ajouter quelque part sur la page.

Attirez les yeux avec des photos convaincantes

Chaque disposition de grille utilise des vignettes pour capter l'attention. Ces vignettes vendent généralement une partie de votre travail en encourageant les gens à cliquer et à lire davantage.

Votre travail peut être de l'art numérique, de la conception Web, de la conception d'icônes, de l'architecture UX ou de toute autre chose ayant un attrait visuel. Mais le fait est que vous avez absolument besoin d'un attrait visuel pour vendre. Et cela vient de photos convaincantes.

Le thème WordPress Mellow minimaliste utilise une variété de photos chacune avec des styles différents. Ce ne sont pas de "vraies" photos de projet puisqu'il s'agit principalement d'espaces réservés. Mais ils offrent un exemple clair de vente au visiteur dès le premier chargement de page.

Je suggère de parcourir d'autres sites de portfolio pour voir ce que d'autres designers utilisent pour leurs photos de galerie.

Voyez ce que vous pouvez utiliser pour votre propre site et quel type de travail pourrait attirer l'attention. Qu'est-ce qui met le mieux en valeur vos compétences ? Quelle partie de chaque projet est la plus attrayante visuellement ou aide à vendre votre travail aux autres ?

Encore une fois, c'est une question très ouverte, mais vous voudrez essayer de nombreuses stratégies différentes. Je trouve généralement que les photos en gros plan attirent beaucoup d'attention, en particulier sous forme de vignettes. Vous pouvez voir un mélange de ces exemples avec le thème Beckett sur la page du portfolio.

Dans une disposition en grille, vous ne disposez que d'un espace limité pour chaque projet. Faites en sorte que cet espace compte !

Si vous savez exactement quelle doit être la taille de vos vignettes, vous avez déjà un énorme avantage. Cela vous permet de recadrer de nombreuses vignettes différentes dans Photoshop pour voir quelles compositions vous préférez pour les éléments de votre portefeuille.

Avancer

Les conceptions de grille sont assez simples et de nombreux thèmes de portefeuille WordPress les accompagnent par défaut. Mais une disposition en grille n'offrira pas grand-chose sans un travail de conception spectaculaire à présenter.

J'espère que cet article offrira de précieux conseils aux concepteurs et aux créatifs qui lancent leurs propres portefeuilles. Les conceptions de grille sont les plus courantes sur les portefeuilles, de sorte que les visiteurs les attendront. En appliquant ces tendances (ou en utilisant ces thèmes), vous pouvez capter plus d'attention et idéalement apporter plus de travail client au fil du temps.