11 erreurs de conception que les acheteurs de thèmes WordPress commettent habituellement

Vous êtes-vous déjà retrouvé à créer un site Web avec un thème WordPress, mais le résultat final ne ressemblait en rien à la démo du thème ? J'ai répertorié 11 erreurs de conception courantes qui sont souvent négligées par les créateurs de sites Web.

Vous avez trouvé le thème WordPress parfait. La démo du thème avait l'air impeccable. Votre client l'a beaucoup aimé et a convenu avec vous de faire un achat. Vous l'avez acheté, installé et commencé à modifier le thème en fonction des besoins du client.

Vous avez changé le logo, changé les couleurs du thème, inséré les images du curseur et le contenu, mais au final, le site Web que vous avez créé ne ressemble tout simplement pas du tout à la démo. Vous savez que quelque chose ne va pas, mais vous ne pouvez tout simplement pas détecter quoi. Sonne familier?

Au cours des 5 dernières années, en tant que concepteur dans le domaine des thèmes WordPress, j'ai vu d'innombrables exemples de beaux sites Web créés avec nos thèmes WordPress.

Mais de temps en temps, je vois un site Web avec une base solide mais avec quelques petites erreurs de conception, qui gâchent l'expérience globale. Je parle de petites petites choses qui peuvent être facilement réparées par n'importe qui.

Je sais qu'il est difficile de repérer ces défauts, surtout si vous n'êtes pas designer. Pour cette raison, j'ai décidé d'écrire un article de blog sur la façon d'améliorer le site Web de votre client pour qu'il soit encore meilleur.

Ajoutez cet article de blog à vos favoris et parcourez la liste ci-dessous la prochaine fois que vous créerez un site Web avec le thème WordPress. Cela ne vous prendra qu'une heure ou deux pour éliminer toutes les imperfections, mais le résultat sera 100% meilleur.

1. Mauvais contraste du texte sur le curseur

J'ai parlé des choses à faire et à ne pas faire à propos des images de curseur, donc je vais être bref maintenant. Les principes sont simples :

• Si la couleur du texte sur le curseur est blanche, choisissez un fond sombre. Si le texte du curseur est sombre, choisissez un arrière-plan clair.
• Assurez-vous que la zone où le texte apparaît n'a pas trop de bruit visuel en arrière-plan. L'arrière-plan encombré réduit la lisibilité du texte sur le devant et une proposition de valeur principale écrite sur le curseur pourrait être manquée.

Heureusement pour vous, la majorité de nos thèmes incluent une option d'arrière-plan solide semi-transparent derrière le texte. Nos nouveaux thèmes WordPress ont également une ombre appliquée à tout le texte sur le curseur, de sorte que le contraste est encore meilleur.

2. Trop grandes images de curseur

Lorsque je regarde les sites Web réalisés avec nos thèmes WordPress, je remarque assez souvent que les utilisateurs utilisent des images de curseur trop grandes. Avoir une image de curseur qui prend 100% de la hauteur de l'écran n'est acceptable que si vous êtes un photographe et que les photos sont votre produit final. Dans d'autres cas, restez prudent et respectez les recommandations de thème. Il préservera le parfait équilibre visuel de votre site web.

3. Mauvais espace blanc (négatif)

L'espace blanc ou négatif dans la conception Web est un espace vide entre les widgets, les blocs de texte, les images ou toute autre partie du site Web, qui permet de tout organiser et de fournir un flux clair et logique à l'utilisateur final.

Peu importe à quel point nous essayons, comment nous protégeons tous les aspects possibles du thème WordPress, les utilisateurs trouvent toujours un moyen de détruire l'espace blanc.

Heureusement pour vous, nous utilisons un puissant générateur de pages dans nos thèmes, ce qui signifie que vous pouvez facilement ajuster vos espacements sur le site Web. Page Builder vous permet de modifier les rembourrages du widget, les rembourrages de la ligne et vous permet de modifier la taille de la gouttière entre les colonnes.

Je ne vais pas parler de détails et je préfère vous donner quelques exemples pratiques.

• Dans la plupart des cas, les créateurs de sites Web utilisent trop peu d'espace blanc, ce qui ne permet pas au contenu de respirer, donc généralement, plus vous appliquez d'espace blanc, meilleur est le résultat que vous obtenez.
• Montrer la relation entre les éléments avec espacement. Les éléments qui vont ensemble, par exemple, le titre de l'article de blog et la date de l'article, doivent être plus proches que les éléments qui ont un objectif différent, comme la date de l'article de blog et l'en-tête de la page.
• Soyez cohérent avec l'espacement. Cela signifie que chaque ligne de votre site Web doit avoir la même quantité d'espace blanc en haut, en bas, à gauche et à droite.

Donc, il s'agit de widgets. Ils doivent avoir une quantité égale de rembourrages et de marges appliquées, peu importe où ils apparaissent sur la page. La cohérence apportera un équilibre à votre site Web et attirera l'attention sur l'essentiel : le contenu.

4. Mauvaise compatibilité avec les mobiles

La procédure et les règles sont les mêmes que sur le bureau ci-dessus. Vous devez toujours faire attention à l'espace blanc, mais pour le mobile, il y a quelques règles supplémentaires :

• L'un d'eux est un design convivial pour les doigts. Étant donné que les doigts sont nos outils pour se déplacer sur le site Web lors de la navigation sur mobile, nous devons leur adapter la page. Lorsque nous concevons un thème WordPress, nous nous assurons que les boutons et les éléments cliquables ne sont pas inférieurs à 50px. Si vous ajoutez des éléments tiers au thème WordPress, assurez-vous qu'ils sont suffisamment grands. Assurez-vous également que ces composants exploitables ne collent pas trop ensemble pour éviter les erreurs de clic.
• Optimisez les images pour la vitesse. De nombreuses personnes accèdent à des sites Web en déplacement, ce qui signifie une connexion peu fiable, parfois médiocre. Essayez d'éliminer un chargement lent du site (sur mobile) et optimisez vos images.
• Testez votre site Web sur un appareil mobile réel. Vous pouvez redimensionner la fenêtre du navigateur pour voir la vue mobile, mais lorsque vous avez terminé tous les ajustements, regardez à quoi ressemble le site Web sur l'appareil mobile réel.

Les systèmes d'exploitation, les navigateurs et l'expérience utilisateur globale font la différence entre les ordinateurs de bureau et les appareils mobiles, ce qui peut entraîner certaines inégalités.

Google a développé un test adapté aux mobiles, un outil permettant de vérifier si votre site Web est adapté aux mobiles.

Nous nous assurons que chacun de nos thèmes WordPress le passe facilement.

5. Utiliser des couleurs qui ne vont pas ensemble.

Choisir la bonne combinaison de couleurs est une chose délicate. Si vous êtes talentueux, vous pouvez suivre votre intuition. Sinon, utilisez les outils spécialement conçus pour cela.

Je vais vous montrer un exemple :

La plupart de nos thèmes WordPress sont composés de couleurs primaires et secondaires. Si votre logo ressemble à celui de Shell, la décision de choisir la couleur primaire et la couleur secondaire est simple. Le rouge sera utilisé comme couleur principale pour les appels à l'action. Le jaune sera une couleur secondaire, utilisée pour les arrière-plans et les éléments de soutien.

Si votre logo ressemble au logo de Starbucks et qu'il est composé d'une seule couleur, vous devrez trouver la couleur secondaire.

Une option consiste à choisir la même couleur verte pour la couleur primaire ainsi que pour la couleur secondaire, mais je déconseille fortement cela.

Si vous ne possédez pas les tripes d'un designer et que choisir les combinaisons de couleurs est difficile pour vous, j'ai une solution pour vous, appelée Coolors. C'est un outil simple à utiliser pour créer de belles combinaisons de couleurs.

Allez sur leur application et insérez le code couleur hexadécimal (dans mon cas #006241) de votre couleur primaire en bas de la colonne. Ensuite, verrouillez-le en cliquant sur l'icône de verrouillage et appuyez sur la barre d'espace.

Astuce : Vous ne savez pas comment obtenir le code hexadécimal de votre logo ? Vérifiez s'il existe une extension Chrome utile pour cela.

Mon résultat ressemble à ceci.

Comme vous pouvez le voir, toutes les couleurs ont changé, mais votre couleur primaire reste la même. Si vous n'obtenez pas la couleur que vous aimez, continuez d'appuyer sur la barre d'espace.

Si votre seule raison de choisir la couleur secondaire est de l'utiliser sur le site Web et que cette couleur n'apparaîtra nulle part ailleurs, ne choisissez pas une couleur trop puissante. Dans notre cas, l'orange vif est sorti.

Vous devez choisir une couleur plus subtile, qui ne détruira pas votre marque et soutiendra en douceur votre couleur principale, dans notre cas, le vert.

Mon choix personnel serait le deuxième beige (#d8c99b) car il fonctionnerait parfaitement avec le vert et il ne le dépassera certainement pas.

Peut-être que cette couleur beige particulière n'est pas la couleur parfaite, mais c'est une assez bonne option. Voici pourquoi. Lorsque vous choisissez une couleur, essayez de penser à quoi ressemblera un texte sombre ou blanc dessus.

Dans mon exemple, le texte sombre aurait l'air très bien, mais ajouter un peu plus de contraste et choisir une couleur beige un peu plus claire le rendrait encore meilleur.

Heureusement pour vous, l'application Coolors a une autre fonctionnalité intéressante. Vous pouvez sélectionner différentes nuances de chaque couleur. Passez la souris sur une colonne colorée et cliquez sur la première icône, appelée "Nuances alternatives". Sélectionnez ensuite les nuances les plus claires ou les plus foncées et gardez toujours le contraste à l'esprit.

J'ai fait une démonstration rapide sur la façon dont ces deux couleurs fonctionneraient ensemble. À cette fin, j'ai pris notre thème WordPress Adrenaline et l'ai converti en site Web Starbucks.

J'ai été impressionné par la rapidité avec laquelle j'ai changé le thème Adrenaline WordPress en quelque chose d'autre complètement, en littéralement 2 minutes. Tout ce que j'avais à faire était de changer deux couleurs, de télécharger l'image du héros personnalisé et de télécharger un logo personnalisé. Essayez-le vous-même.

6. N'encombrez pas la navigation de votre site Web

Structurez la navigation de votre site Web de manière lisible et digestive. Regroupez les éléments moins importants dans des listes déroulantes ou incluez-les dans la barre supérieure ou le pied de page. Rendez la hiérarchie de navigation logique et assurez-vous que tous les mêmes niveaux du menu auront la même priorité.

Par exemple, les termes et les accords sont généralement moins importants que l'appel à l'action principal, ils ne peuvent donc pas apparaître tous les deux au même niveau. Mettez les conditions dans un pied de page et l'appel à l'action principal dans l'en-tête.

Gardez votre navigation principale propre, avec un maximum de 5 ou 6 options.

7. Le logo est trop grand

Il y a une phrase célèbre, que nous recevons tous de notre client à un moment donné - "agrandir le logo". Votre travail, en tant que créateur de site Web, consiste à éduquer votre client sur le fait qu'il n'est pas nécessaire d'avoir un logo de 400 px de large, car les visiteurs du site Web ne viennent pas sur votre site Web pour voir à quel point votre logo est beau.

Téléchargez le logo dans la taille recommandée par l'auteur du thème WordPress. Ils savent probablement mieux quelle taille de logo fonctionne le mieux avec le thème particulier.

Le logo n'est qu'une des nombreuses choses sur le site Web et il doit jouer harmonieusement avec d'autres contenus.

Si vous ne me croyez pas, regardez n'importe quelle grande marque sur le World Wide Web et vous verrez que 98% d'entre elles ont un logo, juste assez grand pour supporter tout le contenu. L'utilisateur doit savoir quelle marque se cache derrière le site Web, mais il doit également se concentrer sur les services, les offres et les principaux appels à l'action.

8. Mauvaise qualité du logo

Il m'est arrivé une fois d'avoir le logo au format Microsoft Word (.doc). Ce que je veux dire, c'est que les clients trouveront toujours un moyen de vous surprendre.

En ce qui concerne le logo, il est important de l'avoir dans le meilleur état possible, au pixel près. Pour cela, vous allez avoir besoin d'un format vectoriel (.pdf, .ai, .svg, .eps). Ensuite, vous devez accéder à votre application vectorielle préférée (par exemple, Adobe Illustrator) et exporter ce logo à la taille recommandée par le créateur de thème. C'est la meilleure possibilité pour vous d'obtenir le logo le plus net.

Si vous obtenez le logo dans un .png, cela pourrait bien fonctionner, mais il peut perdre de la netteté lors du redimensionnement. Si le redimensionnement ruine le logo, rendez-vous sur fiverr.com et investissez 5 $ pour le redessiner dans un format vectoriel. Encore un petit investissement pour un gros résultat.

9. Mauvaise qualité d'image

La situation s'améliore chaque année, mais je trouve toujours des entreprises qui n'accordent pas suffisamment d'attention ou de ressources aux photos de qualité.

Si vous avez un site Web vendant un produit particulier, les images de qualité ont probablement le plus grand impact sur le prospect et jouent un rôle crucial lorsqu'un client potentiel décide d'acheter ou non un produit.

Si votre client ne vous a pas fourni de photos de haute qualité ou s'il ne les a pas, c'est à vous de le convaincre d'investir 100 $ et de les acheter en ligne.

Une excellente source de photos de haute qualité est Shutterstock, où vous pouvez obtenir 50 images pour 99 $ par mois. C'est suffisant pour un petit site Web et aura un impact considérable sur les utilisateurs de votre site Web et la confiance globale dans la marque de votre client.

Conseil : Lorsque vous choisissez une photo, essayez d'éviter les photos génériques, raffinées et irréalistes. Un exemple de cela est un homme de race blanche, avec des dents super blanches et une peau impeccable.

Cela peut avoir un effet contraire, mais n'aura certainement aucun impact sur les visiteurs. Essayez de trouver des images avec une certaine authenticité. Pour faire simple, utilisez des images qui ont un aspect réaliste.

10. Ne pas styliser les plugins tiers

Dans le processus de création d'un nouveau thème WordPress, nous effectuons toujours une recherche de la niche pour laquelle nous créons un thème. Nous sommes toujours désireux d'inclure toutes les fonctionnalités nécessaires dans le thème, mais parfois votre client veut juste autre chose. C'est le moment où les plugins WordPress viennent jouer.

Aucun problème avec ça. Après avoir installé et inclus le plugin dans le thème WordPress, regardez à quoi il ressemble sur le front-end.

Je remarque souvent que nos clients oublient de styliser les boutons, les formes et les couleurs dans le même style que le reste du thème.

Appliquer des classes CSS déjà écrites à votre plugin tiers ne vous prendra que 10 minutes, mais cela aura un impact significatif au final.

Si vous n'avez pas les connaissances nécessaires pour le faire, nous pouvons le faire pour vous.

11. Mauvaise lisibilité

Il existe une affirmation célèbre selon laquelle la typographie représente 95% de la conception Web - alors faites-le bien.

Si vous utilisez des widgets de la même manière que nous avons fait la démo du thème, il n'y aura pas de problèmes, car nous avons mis beaucoup d'efforts sur une bonne lisibilité, mais si vous modifiez la disposition et le style des polices, faites assurez-vous de suivre les règles ci-dessous :

• Chaque ligne doit comporter 60 à 80 caractères , espaces compris.
• Si vous configurez une hauteur de ligne personnalisée, multipliez la taille de la police par 1,4 à 1,6. Si vous avez une taille de police de 16 pixels, la hauteur de votre ligne doit être comprise entre 22,4 et 25,6.
• Laissez suffisamment de place autour du texte.
• N'utilisez pas une couleur de texte trop claire. Tout ce qui est plus brillant que #777777 a un impact négatif sur la lisibilité.
• N'utilisez pas de polices plus petites que celles recommandées. Le minimum que vous pouvez atteindre est de 14px, mais je vous recommande de choisir 16px ou 18px .
• Soyez prudent lorsque vous installez des polices personnalisées dans le thème. Certaines polices sont conçues pour les titres uniquement et ne fonctionnent pas bien sur les petites tailles. Certaines polices sont conçues pour l'impression et ne fonctionnent pas bien sur les écrans et certaines polices sont simplement mal conçues. Réfléchissez à deux fois lorsque vous souhaitez remplacer la police du thème WordPress par défaut par autre chose. Si vous voulez toujours le changer, restez prudent et choisissez les plus populaires.

• Utilisez le bon alignement. Dans 95% des cas, l'alignement du texte à gauche est la solution. Dans les 5 % restants, je vous autorise à utiliser l'alignement centré, mais assurez-vous de l'utiliser uniquement pour un texte de soutien court.

L'alignement à droite (sauf pour les langues de droite à gauche) et l'alignement justifié sont hors de question. Point final.

Conclusion:

La prochaine fois que vous créerez un site Web pour votre client, parcourez la liste ci-dessus et essayez de corriger toutes ces petites imperfections. Cela ne prendra qu'une heure ou deux, mais au final, vous obtiendrez un bien meilleur résultat, ce qui signifie un client plus satisfait et une meilleure référence. En plus de cela, vous nous ferez une faveur car nous aurons un fantastique exemple en direct à montrer.

Si vous avez des questions, n'hésitez pas à commenter ci-dessous.

EDIT : Cet article a été traduit en néerlandais - faites-moi savoir dans les commentaires ci-dessous si vous souhaitez le traduire dans votre langue.