Comment bien choisir les couleurs de son site internet ?

Comment choisir les couleurs d'un site internet

Comment bien choisir les couleurs de son site internet ?

“Les goûts et les couleurs, on ne discute pas”… quoique… Tout le monde connaît cette expression mais si elle est vraie dans le monde réel, elle ne l’est pas forcément dans le monde virtuel.

« Les bonnes couleurs pour impacter un maximum les visiteurs de votre site internet »

L’importance des couleurs

Tout comme la typographie, les couleurs de votre site ont une grande importance. Tout d’abord en terme de signification (on voit mal un site traitant d’écologie mettre du rouge en couleur principale) , ensuite en terme d’accessibilité visuelle.

Il ne faut jamais oublier que les personnes malvoyantes sont également vos lecteurs/clients. Certaines souffrent de difficulté pour voir les contrastes, d’autres ont des soucis avec certaines couleurs, donc on évite les couleurs que sont trop proches ou qui ne sont pas suffisamment contrastées.

Infographie répertoriant la signification des couleurs

Le choix des couleurs

Combien ?

Personnellement, je me limite à 3 couleurs. Pourquoi? Parce que c’est plus facile à gérer d’une page à l’autre et l’on évite ainsi l’effet “sapin de Noel” qui fait mal aux yeux et qui est totalement “has-been”

Donc, on choisit tout d’abord une couleur neutre pour le fond (blanc / noir /anthracite / beige) puis la couleur principale qui va donner le ton du votre site (souvent il s’agit de la couleur de votre logo) enfin, on choisit également une couleur de contraste pour mettre en évidence les éléments importants comme les boutons par exemple.

Les bonnes associations de couleurs

Tout d’abord, il faut savoir que sur le web, les couleurs se notent exclusivement en hexadécimale, c’est à dire un hashtag suivi de 6 chiffres et/ou lettres.

Après si vous avez du mal à associer les bonnes couleurs, il existe des sites sympas qui peuvent vous y aider.

Entrez dans la barre de recherche le thème de votre activité et le site vous générera les couleurs qu’on y associe. Dans chaque carré de couleur, vous y trouverez sa référence hexadécimale. Vous pouvez même épingler vos préférées pour vérifier qu’elles matchent bien ensemble.
Aperçu du site Picular
colorhunt

Vous y trouverez des palettes de couleur prêtes à l’emploi. Survolez la palette qui vous intéresse pour voir apparaître les codes couleurs.

Vous pouvez aussi filtrer selon 4 grandes catégories:
New / Trendy / Popular / Random

En plus d’avoir un générateur de couleurs complémentaires, ce petit site vous explique les différentes harmonies de couleurs de base. Vous pourrez ainsi apprendre ce que sont des couleurs complémentaires, triadiques, tétradiques etc…

Le générateur est simple d’utilisation. Vous choisissez votre couleur principale dans la nuancier puis, à l’aide du menu déroulant, vous optez pour l’harmonie de couleurs qui vous plaît. Vous n’avez plus qu’à relever les codes couleurs et à les appliquer sur votre site internet.

aperçu du site htmlcolorcodes

Voilà, à présent, vous n’avez plus d’excuses pour mal assortir vos couleurs et surtout, on n’oublie pas de penser aux personnes déficientes visuelles quand on choisit son thème couleur !

Vous avez besoin d’un site internet professionnel et nous sommes sur la même longueur d’onde ? Alors…

« On attends quoi pour se rencontrer ? »

Partagez

Mettre en page son site internet de façon efficace

Mise en page web

Mettre en page son site internet de façon efficace

Il m’arrive souvent de tomber sur des sites professionnels faits “maison”. J’entends par là que leur propriétaire n’a pas fait appel à un pro pour sa mise en page. Ces sites là, on les repère au premier coup d’oeil.

Parfois j’ai des bonnes surprises mais on ne va pas se mentir, souvent on frise la catastrophe. Parmi les erreurs courantes que j’ai pu voir: trop de polices différentes, taille de texte inadaptée, mise en avant de mots inintéressants, absence de titres ou au contraire trop de titres.

« Une mise en page soignée = un meilleur référencement »

Les titres et les sous-titres

Les titres d’une page ou d’un article sont essentiels à un bon référencement, alors autant ne pas les négliger et faire n’importe quoi.

Globalement, ils sont nommés sous les termes H1, H2, H3, H4, H5, H6. Ils n’y en a jamais plus de 6 appellations. Ils servent à structurer votre texte à la manière des “grand 1”, “petit 1”, “petit a” de l’écriture traditionnelle.

Seul le H1 se doit d’être unique; pour tous les autres, vous pouvez en utiliser autant que vous le désirez.
On ne saute ou inverse jamais un chiffre. Par exemple, un H3 ne sera jamais avant un H2 ou on ne passe pas d’un H1 à un H4 directement.

 En résumé

  • H1 = je l’utilise pour le titre de ma page.
  • H2 = je l’utilise pour les titres des différentes parties de ma page.
  • H3, H4, H5, H6 = je l’utilise pour les sous-titres des différentes parties de ma page.
Titres et sous-titres internet

La typographie

Un seul mot d’ordre: pensez à vos lecteurs! Certains peuvent avoir des déficiences visuelles et il faut le prendre en compte car ils sont aussi vos lecteurs. Vous l’avez compris, le but de la typographie est avant tout de faciliter la lecture des pages de votre site avant de faire joli.

On réservera les polices fantaisies aux seuls titres et on utilisera une police adaptée au web (de type Open Sans ou Roboto) pour le reste. Oubliez la Police Arial et autres typos Windows! Vous trouverez plein de polices sympas et libre d’usage sur Google Fonts.

On écrit aussi suffisamment grand (sans tomber dans l’énorme non plus) pour les malvoyants. On privilégiera donc une taille de police de 14px ou 16px. Si vous descendez en dessous de 14px, cela commence à poser des problèmes de lisibilité. On évite !

Typographie web

 En résumé

  • Police des titres = j’utilise une police fantaisie si je veux mais elle doit rester lisible.
  • Police du texte = j’utilise une police adapté au web de type Open Sans, Roboto ou Lato.
  • Taille de la police = j’utilise une taille de 14px ou 16px ce qui facilite la lecture.

Les mots en gras

Tout comme les titres, les mots en gras (strong) servent au référencement. Alors on réfléchit à ses mots clés et à son domaine d’activité et on évite de mettre en gras tout et n’importe quoi.

Que mettre en gras ? Simple. On met en gras les mots ou parties de phrases importants, ceux qui se raccrochent au thème abordé par votre page et ceux qui font référence à vos mots clés.

Comment ça marche? Quand Google vient visiter votre page, il choisit d’abord les mots en gras pour son référencement. Autant éviter de mettre en avant des mots comme “c’est super!” quand on parle de ces produits ou de son métier. Cela n’apporte rien en terme de professionnalisme et pourrait nuire à votre crédibilité.

Vous avez besoin d’un site internet professionnel et nous sommes sur la même longueur d’onde ? Alors…

« On attends quoi pour se rencontrer ? »

Partagez

Comment bien choisir son nom de domaine?

choisir son nom de domaine

Comment bien choisir son nom de domaine?

Vous avez visité un super site qui vous a fait de l’oeil mais le lendemain, plus moyen de vous souvenir de son nom. On a tous été au moins une fois dans cette situation. La raison ? Un nom de domaine la plupart du temps mal pensé. La liste des erreurs pourrait être longue à répertorier alors, on va plutôt se concentrer sur l’essentiel.

« Avoir un bon nom de domaine, c’est faciliter le retour de vos clients sur votre site »

Voici quelques points à ne pas négliger:

  • On choisit un nom facile à écrire et facile à retenir.
  • On évite les noms à rallonge parce que ça n’aide pas à la mémorisation.
  • On évite de mettre des chiffres et/ou de tirets car ça prête à confusion.
  • On choisit son extension (.fr, .com, .org, .biz etc…) en fonction de la clientèle visée. Si vous ne vendez qu’en France le .fr suffit largement.
  • On réserve son nom de domaine dès que possible pour ne pas se le faire piquer. Si vous devez le racheter, cela peut vous coûter très cher d’autant que certains sont spécialisés dans ce type de business.
  • On n’oublie pas de vérifier le prix du nom de domaine. Même s’il est souvent gratuit la 1ère année, son renouvellement les années suivantes peut vite se révéler onéreux.
  • On choisit bien son registar (fournisseur de nom de domaine). Privilégiez ceux qui sont connus pour éviter toute déconvenue.

Vous avez besoin d’un site internet professionnel et nous sommes sur la même longueur d’onde ? Alors…

« On attends quoi pour se rencontrer ? »

Partagez