3 domaines de conception importants sur lesquels se concentrer pour chaque création de site Web

Bienvenue dans la partie 3, le dernier article de notre mini-série « Principes de conception Web efficaces de Divi » où nous explorons des pratiques de conception efficaces pour aider à responsabiliser les nouveaux concepteurs Web et ceux qui s'identifient comme quelqu'un sans « œil pour le design ».

Maintenant que nous avons couvert la préparation et l'apprentissage pour avoir un meilleur œil pour la conception et que nous avons passé en revue quelques principes de conception efficaces à avoir dans notre boîte à outils, nous allons nous concentrer sur 3 domaines de conception très importants qui sont essentiels pour atteindre un site bien conçu.

Allons droit au but !

3 domaines de conception importants sur lesquels se concentrer pour chaque création de site Web

Si vous avez suivi les deux premiers articles de cette série, vous m'avez entendu souligner qu'il n'y a pas de bien ou de mal en matière de conception, mais en plus des principes de conception efficaces que nous avons examinés, il y a quelques , des domaines pratiques de conception sur lesquels je me concentre pour assurer une création de site Web réussie et agréable à chaque fois. Et le meilleur, c'est que ces idées sont transférables à tout type d'industrie ou de style de conception de sites Web !

1) Typographie et polices

Votre site peut avoir de belles images, des couleurs attrayantes et des éléments de conception agréables, mais si le type semble étrange ou ne correspond pas au style du site, cela peut être un élément dissuasif majeur. Étant donné que nous n'entrons pas dans les bases de la typographie dans cette série, veuillez vous reporter à notre article sur les 50 termes de typographie que chaque concepteur de sites Web devrait connaître (et comprendre) si vous souhaitez en savoir plus sur les bases. Une compréhension du crénage, de l'interlignage, du suivi, des polices sans et sans empattement sera grandement utile à la personne qui cherche à s'améliorer en matière de typographie et de conception.

Permettez-moi de vous proposer quelques directives de typographie pratiques auxquelles je m'en tiens en tant que concepteur de sites Web Divi à succès avec des clients qui diffèrent grandement par les styles de conception et les différentes industries :

Utilisez des polices qui se marient bien avec l'industrie/la conception de vos sites - Dans le premier article de cette série, j'ai rappelé un exemple où j'ai moi-même conçu un site avec de superbes images et couleurs, mais la police ne correspondait pas bien. En bref, il s'agissait d'un site de fabrication industrielle et la police que j'ai initialement utilisée était un style plus moderne et élégant qui ne correspondait en effet pas à l'apparence et à la marque de l'entreprise.

Cela ne signifie pas que vous ne pouvez pas faire preuve de créativité avec les polices ou que vous devez respecter le statu quo de l'industrie, mais en pratique, si vous travaillez sur un site de service professionnel, vous ne voudrez probablement pas plus le top, la police artistique impliquée. Et vice versa, si vous travaillez sur quelque chose avec une ambiance unique, peut-être artistique, peut-être qu'Arial ou Helvetica ne correspondront pas à l'ambiance que vous recherchez. Cela m'amène à mon prochain point de mélange et de correspondance des polices.

Restez avec 2 à 3 polices – Un principe de conception de base qui a résisté à l'épreuve du temps pendant des décennies est de limiter le nombre de polices que vous utilisez. Trop de polices distraient le lecteur, confondent souvent la hiérarchie et, franchement, finissent par ressembler à un vieux dépliant occidental cherchant une récompense pour un hors-la-loi. Je m'en tiens souvent à une police pour les en-têtes et les titres, puis j'utilise généralement une police sans empattement facilement lisible pour tout mon texte de paragraphe. Parfois, j'aurai une police de 3e style pour le menu principal, mais la police de mon menu est souvent rationalisée avec mes titres.

Pour plus d'idées sur la façon de jumeler des polices, veuillez vous référer à cet article précédent sur le jumelage de polices dans la conception Web : 7 principes clés révélés et expliqués

Ayez des visuels avec votre texte – Une quantité décente de texte dans votre contenu est excellente. En fait, il est recommandé d'avoir au moins 300 mots par page pour aider du point de vue du référencement. Mais attention à avoir trop de texte et pas assez d'aides visuelles. Pour les livres, les blogs, les articles et autres contenus de longue durée, beaucoup de texte est attendu, mais si vous concevez une page de destination attrayante, trop de contenu ennuiera l'utilisateur avant qu'il ne cherche plus loin. Je conçois souvent avec l'état d'esprit que la page d'accueil devrait être l'entonnoir de vente qui amène les clients à franchir la porte PUIS ils peuvent plonger dans plus de pages, de blogs et d'autres ressources pour des informations plus détaillées.

La page d'accueil Elegant Themes en est actuellement un parfait exemple.

Dans cet exemple, nous voyons un titre engageant, un paragraphe de texte avec un bouton d'appel à l'action et un joli graphique visuel lié au message qui maintient l'utilisateur engagé. C'est un excellent exemple à suivre pour organiser une quantité décente de texte avec des visuels.

Une fois, j'avais une belle page d'accueil conçue avec du texte et des éléments visuels et lorsque je l'ai confiée à mon client pour effectuer des modifications de base, ils avaient jeté ce qui ressemblait à un petit chapitre d'un livre dans la page d'accueil, ce qui a complètement ruiné le flux de la conception. J'ai créé. Alors laissez-le être une leçon et sachez que même si le contenu est génial, il doit être placé en conséquence !

Une autre excellente ressource à laquelle se référer est 20 tendances typographiques auxquelles il faut prêter attention en 2016, car ces tendances sont toujours très valables aujourd'hui et continueront d'aller de l'avant.

2) Imagerie et gestion des couleurs

Semblable à la typographie, j'ai tendance à m'en tenir à au plus 2 à 3 couleurs primaires pour la création de mon site Web. À moins qu'il ne s'agisse d'une entreprise ou d'une organisation avec une pléthore de couleurs dans l'image de marque, je trouve que trop de couleurs (en particulier si elles ne correspondent pas bien) peuvent être très distrayantes et souvent déroutantes. Voici quelques directives auxquelles je m'en tiens lors du mélange de couleurs et d'images :

Couleurs de base et couleurs d'accent – Une méthode que j'ai trouvée très efficace dans des projets récents consiste à prendre la marque d'un client et, s'il ne le fait pas déjà, à choisir une belle couleur d'accent pour les appels à l'action, les liens, etc. Par exemple, à ce sujet site, j'ai pris la marque du logo avec le gris et l'orange et j'ai ajouté un subtil bleu sarcelle/bleu foncé pour aider à faire de l'orange « pop » comme couleur d'accent principale.

Rationalisez la couleur avec des images – Une façon de rassembler votre conception et vos images de manière optimale consiste à faire correspondre les couleurs du site Web avec certaines des images principales. Cet exemple est un peu rare car j'ai pu faire correspondre les couleurs du site Web à la tenue de mon client, ce qui a créé une très belle sensation de rationalisation entre l'imagerie et la couleur du site Web.

J'ai pris une belle couleur marron et orange de la tenue de mes clients et j'ai pu rassembler l'ensemble du site dans un joli look uniforme. Maintenant, vous serez rarement dans une situation où vous pouvez marquer un site entier à partir d'une image, mais ce même principe peut être appliqué lors de l'utilisation d'images d'arrière-plan avec un appel à l'action, etc.

En pratique, si vous ne savez pas comment choisir certaines couleurs, voici 10 outils de sélection de couleurs

Évitez les couleurs trop vives - je vois souvent de nouveaux designers utiliser des verts, des roses, des jaunes, etc. super brillants qui font loucher et s'éloigner de l'écran. Je ne citerai pas de mauvais exemples ici, mais je suis sûr que vous avez vu de nombreux sites où les couleurs vous ont fait vous détourner et ne jamais vouloir regarder en arrière. Il n'y a certainement rien de mal avec des couleurs vives, assurez-vous simplement qu'elles ne dégagent pas cet effet. C'est là que les critiques constructives et les commentaires d'autres concepteurs peuvent s'avérer payants.

Ma recommandation est d'utiliser des couleurs assez neutres pour les couleurs de base comme le texte, les graphiques d'arrière-plan, etc. Si vous débutez dans le design et que la couleur n'est pas un domaine confortable pour vous, n'hésitez pas à vous référer à nos Techniques de correspondance des couleurs pour les concepteurs de sites Web WordPress, qui vous fourniront de nombreuses options pour mieux choisir les couleurs.

3) Appels à l'action puissants

Enfin, un domaine très important de la conception Web est d'avoir des appels à l'action forts et clairs (CTA). L'un des problèmes les plus courants d'une mauvaise conception Web est d'avoir un contenu textuel lourd sans appel clair à l'action. Le contenu est génial mais s'il s'agit uniquement d'informations et d'aucune conversion, votre client ne sera certainement pas satisfait. Je recommande de faire en sorte que vos CTA se démarquent des autres éléments de votre conception avec une couleur d'accent ou un bel effet de survol.

Voici un exemple de la façon dont j'ai mis en œuvre un appel à l'action pour un client récent.

Dans ce cas, le principal appel à l'action du client pour les utilisateurs du site Web est de s'inscrire pour recevoir des mises à jour par e-mail. Dès le départ, le logo apparaît sur une image d'arrière-plan plus sombre, un peu de texte avec une possibilité immédiate de s'inscrire avant même de défiler vers le bas. Idéalement, vous souhaitez attirer l'attention de votre utilisateur sur votre appel à l'action. C'est là qu'avoir une couleur ou un effet d'accent vibrant sur un site est extrêmement bénéfique.

Voici quelques lignes directrices auxquelles je m'en tiens lorsqu'il s'agit d'appeler à l'action :

Terminez votre page d'accueil avec un appel à l'action fort – Le plus souvent, mes conceptions de page d'accueil sont presque un récapitulatif du site dans son ensemble. Par exemple, si un site a une structure comme celle-ci :

• À propos de nous
• Prestations de service
• Témoignages
• Blog
• Contact

Je vais lancer un appel à l'action pour chacune de ces sections de la page d'accueil, puis un design final et élégant pour l'appel à l'action principal, qui dans ce cas serait de s'inscrire. Voici un excellent exemple de ce que je veux dire :

La page d'accueil encapsule essentiellement l'ensemble du site et constitue un point de départ sur lequel les utilisateurs peuvent cliquer pour afficher des galeries, des vidéos et plus d'informations. Peut-être que cet état d'esprit vous aidera comme dans la conception de votre page d'accueil !

Ayez un appel à l'action dans votre barre latérale - N'oubliez pas l'opportunité d'un appel à l'action fort dans la barre latérale ! Surtout si vous avez un site avec des articles de blog ou d'autres pages qui utilisent fréquemment une barre latérale. C'est une excellente occasion de mettre une inscription supplémentaire par e-mail, un bouton de don ou un lien vers un autre CTA principal.

Semblable au site ci-dessus, l'un des principaux appels à l'action pour mon site personnel est une inscription par e-mail et bien que cela soit au premier plan sur ma page d'accueil, je voulais être sûr de le rendre également très apparent sur mon article de blog et mes pages de tutoriel .

Ici, je l'ai en haut à droite de chaque modèle de publication avec un visuel fort au-dessus et en dessous du formulaire d'inscription principal. Donc, si vous avez des pages avec des barres latérales, n'oubliez pas que ces zones sont des biens immobiliers précieux pour un appel à l'action fort ! Et vous voulez être sûr et faire en sorte que votre CTA soit visible et de préférence en haut de la barre latérale qui apparaîtra en premier sur le mobile sous le contenu principal.

Ayez un appel à l'action après le contenu de la sous-page - Enfin, et peut-être le plus négligé, n'oubliez pas d'avoir un appel à l'action sur vos pages normales ! J'admets que j'ai négligé cela jusqu'à récemment, lorsqu'un client l'a demandé. L'exemple ci-dessous a un fort appel à l'action à la fin de leurs principales pages de services.

Lorsqu'un utilisateur de site Web consultera cette page, il prendra toutes les informations, puis aura la possibilité de contacter mon client s'il est intéressé avec une image agréable et accueillante à droite et un bouton CTA à gauche soutenu par un orange vif qui aide cette section sortir de la page. Oui, je sais, j'ai dit dans un article précédent que je mettais généralement mes CTA au milieu ou à droite, mais cette mise en page semblait bien fonctionner

Conclusion de la série

Eh bien, j'espère que cette série vous a aidé à vous inspirer de bons principes et tactiques de conception de sites Web que vous pouvez appliquer à vos efforts de conception de sites Web ! Faisons un bref récapitulatif de ce que nous avons parcouru dans toute la mini-série :

Partie 1

• Préparer votre état d'esprit
• Comment apprendre les bonnes tendances de conception
• Obtenez des commentaires et des critiques constructives sur votre travail

Partie 2

• Suivez la règle des tiers
• Disposition et flux
• Hiérarchie visuelle

Partie 3

• Typographie et polices
• Imagerie et couleur
• Appels à l'action puissants

Encore une fois, des études universitaires entières ont été consacrées à une bonne conception, nous ne faisons donc qu'effleurer la surface ici, mais j'espère que ces principes et pratiques ont aidé ceux d'entre vous qui souhaitent s'améliorer en conception dans la bonne direction. Si vous souhaitez partager d'autres principes ou méthodes de conception qui vous ont aidé, n'hésitez pas à nous le faire savoir dans les commentaires ci-dessous !

À nous tous de devenir de meilleurs concepteurs de sites Web Divi chaque jour !

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !