L'objectif de cet article est de vous apporter un certain degré d'informations nécessaires pour vous aider à identifier un ensemble cohérent de couleur. Dans cet article, j'aborde ce point principalement dans le cadre de la conception de site web mais c'est applicable pour tout autre élément de communication, le but est de favoriser une harmonie de couleur.

Cela s'inscrit totalement dans une démarche de création de charte graphique. Et si vous ne savez pas encore vraiment de quoi se compose une charte graphique, je vous invite à lire cet article "Qu'est-ce qu'une charte graphique".

L'article sera en 2 parties.

Je commencerai par vous présenter les différentes couleurs attractives qui font vendre (idéales pour vos appels à l'action). En tant que freelance en création de site web, c'est un point que je ne néglige pas afin de vous apportez des résultats.

Je vous expliquerez ensuite comment est-ce que les couleurs ont un impact sur le comportement de vos internautes et donc sur vos ventes, prises de contact, demandes de devis etc. ainsi qu'une

Puis, je vous exposerai le principe du cercle chromatique simplifié avec l'harmonie monochrome, l'harmonie 3 couleurs, le cercle de couleur primaire etc.

C'est parti !

Les couleurs attractives

Il y’a eu un certains nombre de tests qui ont été effectué sur le sujet. Lors de ces tests, il a, par exemple, été montré qu’un bouton rouge amenait plus de clics qu’un bouton vert.

En l'occurrence, ce test avait été fait sur un site qui était déjà vert. En amenant ce contraste de couleur, le bouton ressortait nécessairement. Ce qui incitait les gens à cliquer davantage.

Cela ne signifie pas que vous devez absolument utiliser une couleur contrastante sur tous vos boutons (cela dépendra aussi du degré d'importance du call to action) mais c'est un moyen efficace à retenir.

Le rouge

Pour revenir aux couleurs, le rouge est en effet très souvent conseillé. La plupart des tests qui ont pu être fait ont démontré que le rouge entraine plus de clics qu’une autre couleur. A condition bien-sûr que votre site ne soit pas à dominante rouge.

L’idée est toujours d’amener un contraste ; quelque chose de différent du général.

Mettons-nous dans la peau d'un internaute qui arrive sur un site. Tout est harmonieux avec les couleurs d'une même tonalité, les polices de caractères, les titres etc. Puis tout à coup, il y'a un élément qui diffère de par sa couleur. Cela attire forcément l’œil et l’attention de cet internaute.

Choisir une couleur (pour les éléments sur lesquels vous souhaiter attirer l'attention) qui casse la couleur ambiante générale de votre site est efficace. L'enjeu est simplement de s'assurer de ne pas obtenir un résultat criard.

C'est ce que le cercle chromatique simplifié dans la seconde partie va permettre d'éviter.

Le jaune

Aussi, pour illustrer avec un exemple sans doute enfantin, les camions de pompiers sont toujours rouges … de manière “traditionnelle” je dirai. Cela dit, on voit de plus en plus à l’étranger et notamment en Belgique, des camions de pompiers jaune fluo.

De la même façon, les gilets de sécurité que l’on utilise lorsque notre voiture est en rade au bord de la route, ainsi que ceux utilisés par tous les travailleurs sur la chaussée aux endroits où ils ont besoin d’être vus, sont maintenant toujours jaunes fluo, plus qu’une toute autre couleur.
Pendant une période, on voyait pas mal d’orange fluo. Mais il y’a très probablement eu des tests qui ont été fait déterminant que la couleur la plus visible est le jaune, en en faisant la couleur réglementaire.

Le jaune attire davantage l’attention que n’importe quelle autre couleur. Le jaune attire plus l’attention que le rouge.

Pour résumé

Le jaune est la couleur la plus visible et celle qui attire le plus l’attention.

Le rouge est, quant à elle, la couleur qui incite le plus à l’action.

Dans le cadre d'un site internet, ce qu’il est envisageable de faire, c’est simplement d’utiliser le jaune pour mettre en avant des éléments importants mais sur lesquels vous n'attendez pas une action particulière comme un clic. Ce peut être pour des éléments importants d'information par exemple. Ou pour mettre en valeur une partie de votre slogan si cela s'y prête.

Par contre, pour vos éléments sur lesquels vous souhaitez une action comme un clic, le rouge est la couleur qui incite davantage à l'action. C’est sans doute la couleur qui vous apportera le plus de clics.

Maintenant, ces deux couleurs en sont pas forcément toujours aisées à utiliser. Vous pouvez vous inspirer de cette base pour choisir des variations de ces couleurs ou de leurs familles. Aussi, cela pourra aussi dépendre des pages de votre site. Vos pages de vente ou celles présentant vos services ont besoin d'attirer l'attention et d'inciter à l'action. Ce sont donc sur ces pages, que l'utilisation de couleurs attractives importent le plus.

Voyons maintenant comment assurer une harmonie de couleur avec le cercle chromatique simplifié.

Le cercle chromatique simplifié

Le choix des couleurs qui constituent votre site web est un choix à faire avec la plus grande attention. Les couleurs ont, en effet, un rôle très important sur les « réactions » que les internautes auront face à votre site et de leur interprétation de ce dernier.

Les couleurs véhiculent des messages, font émerger des pensées, excitent ou calment, incitent à agir. Connaître le sens des couleurs est donc primordial pour construire un site web en correspondance avec ce que vous voulez.

A titre d’exemple simpliste, vous êtes en train de consulter un site traitant de la Nature et de l’Environnement. Que dites-vous si le site est à prédominance rouge ?
En lisant « Nature » et « Environnement », la couleur verte vous est sans aucun doute venue à l'esprit. Dans tous les cas, vous êtes d’accord avec moi que le rouge n’est pas le bon choix et que le vert est la couleur la plus adéquate.

Cet exemple est simpliste mais traduit, on ne peut mieux, le rôle des couleurs et l’attention que vous devez porter au choix de celles-ci.
En parallèle de cela, il vous faut également savoir comment accorder les couleurs afin d’obtenir un mélange cohérent.
C’est d’ailleurs ce que vous allez apprendre juste après.

Combinez les couleurs peut sembler simple de prime abord mais ce n’est pas une mince affaire … à moins d’avoir certaines bases de compréhension.

Les 3 catégories de couleurs

Les couleurs primaires

Ce sont le Jaune, le Bleu et le Rouge. Ce sont les couleurs de bases dont découlent toutes les autres couleurs.

Les couleurs secondaires

Ce sont le Violet, le Vert et le Orange. Ces couleurs secondaires ou binaires s’obtiennent en mélangeant deux des couleurs primaires. Violet = Rouge + Bleu / Vert = Jaune + Bleu / Orange = Rouge + Jaune.

Les couleurs tertiaires

Ces couleurs tertiaires ou intermédiaires sont le fruit d’un mélange entre une couleur secondaire et une couleur primaire.

Afin de simplifier le travail de visualisation, toutes ces couleurs ont été portées sur le cercle chromatique suivant (ou roue chromatique).

Le cercle chromatique

Voici à quoi ressemble ce fameux cercle sur lequel :

• P signifie Primaire ;
• S signifie Secondaire. Obtenue en mélangeant les deux P l’entourant ;
• T signifie Tertiaire. Obtenue en mélangeant la S et la P l’entourant.

C'est une version très simple de la roue chromatique. Il est bien sûr possible d’envisager des nuances parmi ces couleurs comme le suggère la version suivante de manière plus élaborée.

Maintenant, que fait-on avec cela ?

En effet, tout cela est bien beau mais la question de « comment fait-on des accords de couleurs ? » est toujours en suspens. Et bien c’est à partir de ce cercle chromatique que nous pouvons les effectuer. Il existe des règles simples non absolues permettant de s’assurer de la complémentarité des couleurs, d’obtenir un contraste vif, une harmonie etc. Voici ces accords.

Les accords de couleurs

En résumé

Gardez en tête que le choix des couleurs de votre site est important. Que ce soit en faisant appel ou non à un prestataire, il vous faut prendre le temps d’y réfléchir.

Et le cas échéant, d’en discuter convenablement avec le prestataire de votre choix.

Afin de vous aider à débuter votre réflexion sur le choix de vos couleurs, je vous conseille vivement de vous orienter sur les accords complémentaires à deux, trois ou quatre couleurs. C’est-à-dire :

• l’accord avec deux couleurs complémentaires,
• l’accord isocèle ou,
• l’accord en T.

La raison est simple. Il vous faut absolument être en capacité de créer du contraste afin de pouvoir orienter le regard de vos internautes sur ce que vous souhaitez. Cela peut-être vos boutons de paiement, votre offre du moment, une rubrique d’information « immanquable » etc.

Ces trois accords sont suffisants pour vous permettre de le faire avec plus ou moins de choix. A vous de voir !

Aussi et je le répète ici, ce ne sont pas des règles absolues. La créativité n’a pas de limites et un site peut être esthétique sans forcément suivre ces accords.
Cependant, ces derniers offrent une palette de choix solides.

Quelques outils et ressources

Coluzzle des accords

Pour vous aider dans votre réflexion sur les accords voici un coluzzle simple qui vous y aidera.
Pour ce faire :

1. imprimer ce coluzzle de couleur. Imprimez en couleurs bien entendu :),
2. découpez les deux cercles,
3. percez leurs trous noirs centraux,
4. placez le 2ème sur le 1er et maintenez-les avec une attache quelconque (parisienne par ex),
5. faites tourner et trouvez vos accords de couleurs !

Adobe Color

Je vais vous donner un outil en ligne qui permet de faire les accords de couleur à la manière du coluzzle papier que vous avez plus haut. Cela peut-être pratique si … vous n’êtes pas très manuel par exemple.

Il s'agit d'Adobe Color.

Afin de vous en servir vous avez besoin du code rvb ou hexadécimal de la couleur à partir de laquelle vous souhaitez tester des accords.
Je ne m’étendrai pas dessus mais en gros, ce sont ces codes qui permettent à votre ordinateur de distinguer les couleurs.
Pour obtenir ces codes, voici un outil ultra simple (parmi bien d'autres) portant très bien son nom, la boite à couleurs. Après l'voir téléchargé et installé ; imaginons que vous êtes sur un site internet, une photo de vacances, un document … et qu’une couleur vous intéresse :

1. Cliquez sur la pipette,
2. Baladez la pipette là où vous souhaitez récupérer la couleur,
3. Cliquez et récupérer son code RVB ou héxadécimal,
4. Insérez le code dans Adobe Color.

Si vous faites appel à un prestataire (Mémento)

Si vous faîtes appel à un prestataire, voici la démarche à suivre que je vous conseille.

1. Dressez la liste de vos valeurs, de vos objectifs, de ce que vous voulez susciter chez vos futurs internautes,
2. Identifiez le plus important, le numéro 1 de cette liste,
3. Déterminez alors, avec ce que vous avez appris, la couleur correspondante à cet(te) objectif ou valeur numéro 1. Si vous pouvez affiner avec les nuances, tant mieux.
4. Utilisez un des outils pour envisager les accords de couleurs. Conseil : privilégiez les accords complémentaires à deux ou trois couleurs.
5. Echangez sur ces bases avec votre prestataire.

Si vous êtes en train de monter une activité, vous êtes en somme en train de créer une marque. Cette marque aura son identité propre.

Aussi et même si j'encourage un(e) entrepreneur(se) en début de parcours à ne pas se focaliser à 100% sur son positionnement de marque et donc son image, il reste important de connaître ce qu'est une charte graphique notamment lors de la conception de votre site web.

Cet article vous présente le concept de charte graphique avec ses différents composants, puis une méthode à suivre simple et rapide pour déterminer vos familles de couleur lors de votre création de charte graphique.

On y va ?

Qu'est-ce qu'une charte graphique

La charte graphique représente l'ensemble des éléments visuels qui vont formater l'image de votre marque. Cette charte graphique impacte donc le positionnement de votre marque.

Elle va se composer de différents éléments dont le logo est central. Cette charte graphique représente un point de repère qui détermine les conditions pour utiliser tel ou tel élément visuel.

La charte graphique est l'expression visuelle de l'entreprise, de ses valeurs, sa mission, son univers, et ce qu'elle souhaite communiquer.

Les objectifs d'une charte graphique

L'utilité première d'une charte graphique est d'avant tout assurer que tous vos supports de communication soit harmonisés et cohérents.

Cela assure que votre marque, votre entreprise puisse être reconnu facilement (liste non exhaustive) à travers :

• votre carte de visite,
• vos flyers et plaquettes commerciales,
• vos affiches,
• votre enseigne pour un magasin physique,
• votre site web,
• vos emails,
• vos vidéos,
• vos devis et factures,
• etc.

L'uniformisation des éléments visuels à travers tous vos éléments de communication doit permettre de rendre rapide l'identification de votre marque et entreprise.

Le respect de votre charte graphique à travers tous vos leviers de communication est l'assurance que votre image de marque véhiculée soit identique partout.

De quoi se compose une charte graphique

Alors c'est bien tout ça. Mais encore faut-il savoir précisément sur quoi appliquer toutes ces règles.

Le logo

Le logo est au centre de votre charte graphique. C'est le pilier de votre image de marque et de son positionnement. Il est présent partout. N'importe quel support physique ou virtuelle attaché à votre entreprise comportera votre logo.

L'enjeu d'un logo est de renvoyer l'âme de la marque. La marque se veut elle jeune, dynamique, classique, rigoureuse ? Le logo se doit de refléter cela.

Puis la charte graphique doit encadrer son utilisation en déterminant sa taille minimale, ses proportions et comment il se place en fonction d'autres éléments tels que des titres, des marges, du texte.

La typographie

La typographie joue un rôle essentiel dans la communication.

Elle détermine :

• la police d'écriture,
• le corps de police c'est-à-dire sa taille,
• la mise en page

La combinaison de ces éléments crée une perception de vos textes. Une perception qui peut changer du tout au tout en modifiant la police, sa taille, son espacement etc.

Si la perception change, l'importance du message se modifie également.

Le plus important à privilégier sera le confort de lecture.

Si vous cherchez à approfondir le sujet de la typographie et des polices d'écriture, je vous invite à consulter cet article à propos des polices de caractère assurant la meilleur lisibilité.

Création de charte graphique

En tant que webmaster freelance, je vous donne tout de suite une méthode concrète, simple et rapide afin d'identifier des couleurs et familles de couleurs lors de votre création de charte graphique. Pas besoin d’avoir fait de longues études en graphisme pour l’utiliser, c’est promis.

Il s'agit ici de ne plus perdre de temps !

Si vous avez un projet de création de site internet actuel ou futur, vous ferez forcément face à un moment ou à un autre à la question du design. Si vous faîtes appel à un prestataire, celui-ci vous posera nécessairement la question.
Si vous n’êtes pas prêt sur ce sujet, le problème est que soit vous perdrez du temps, soit vous ne serez pas tout à fait en accord avec le résultat.

En effet, le prestataire vous soumettra des choix que vous devrez prendre, bien sûr, mais la direction première ne sera alors pas de votre ressort et il y’a donc un risque de décalage avec ce que vous auriez souhaité. Ou alors, il vous faudra revenir en arrière et donc perdre du temps.

Aussi, il n’y rien de plus frustrant que d’avoir un moment « Eurêka » après que le processus enclenché ou le résultat finalisé. Il est donc préférable de se poser les questions en amont.

Suivez cette méthode et vous déterminerez ainsi vos couleurs ou au moins les familles des couleurs qui vous correspondront.

Une valeur égale une couleur

Pour faciliter les choix des couleurs et donc la définition de votre charte graphique, nous allons partir de vos valeurs et du ressenti que vous souhaitez faire transparaître à travers votre site.
Votre charte graphique doit refléter vos valeurs. C’est un moyen sûr, efficace et concret de procéder afin de ne pas se tromper.

Transmettre une émotion

Chaque couleur ou famille de couleur transmet une émotion, une sensation, un sentiment. L’enjeu est donc de faire correspondre ces émotions à vos valeurs.

Si vous avez quelques difficultés, prêtez-vous à l’exercice de répondre à la question suivante :

« Qu’est-ce que je souhaite faire ressentir aux internautes qui visitent mon site Internet ? »

Et si vous avez une boutique physique ou si vous rencontrez déjà physiquement des clients, demandez-vous également :

« Qu’est-ce que j’apporte ou souhaite apporter à mes clients ? »

A ce stade, vous n’avez pas besoin de définir des couleurs précises. Si vous faîtes appel à un freelance, ce n’est pas votre boulot. Votre boulot est de l’orienter là où vous souhaitez aller. Définissez donc des familles de couleurs qui lui serviront de base concrète. Et si toutefois, vous identifiez des couleurs précises, tant mieux, c’est du temps de gagné !

Mais commencez par le début, réfléchissez à vos valeurs, écrivez tout ce qui vous passe par la tête puis vous identifierez les 3 plus importantes. Ensuite, utilisez la liste de correspondance ci-dessous entre couleurs et les valeurs/émotions véhiculées.

Liste de correspondance entre couleur et valeur/émotion

Ici, vous allez comprendre le sens des couleurs, quels sont les messages et les émotions qu’elles véhiculent.
En fonction de vos objectifs et valeurs, et aussi de votre secteur, vous saurez lesquelles utiliser ou du moins leurs familles.
Chaque couleur possède des nuances. Ce que vous allait découvrir n’est donc pas un cadre fermé.

Couleurs chaudes

Le rouge

C’est la plus chaude et la plus dynamique des couleurs. Le rouge est stimulant, ardent, excitant, puissant. Il évoque la joie, la fête, la vitalité, le triomphe.
Dans sa forme la plus pure, il est à utiliser de manière minime afin d’attirer l’attention, l’intérêt ou marquer l’importance.

Exemples de secteurs : Luxe, mode, sport, médias, humanitaire, vin et gastronomie.
Ne pas en abuser : Trop de rouge pur évoque la colère, la violence, le danger.

L'orange

C’est une couleur équilibrée, énergique et attirante. L’orange véhicule des valeurs de créativité et de communication en transmettant de la chaleur ainsi que de l’optimisme.
Bien utilisé, l’orange crée une impression accueillante et engageante. Il donne du positif en illuminant vos pages et/ou vos textes.

Exemples de secteurs : Communication, divertissement, sport, forme et fitness, agro-alimentaire (fruits)
Ne pas en abuser : Trop d’orange devient agressif. Cela peut également vieillir votre graphisme.

Le jaune

Couleur du soleil, c’est la plus lumineuse et énergique. Le jaune reflète le bonheur, stimule et invite au mouvement.
Le jaune provoque un sentiment de bonheur, de dynamisme et représente le contact social. De fait, C’est une couleur adéquate pour une publicité ou une communication évènementielle.

Exemples de secteurs : Tourisme, agro-alimentaire, assurance et crédit, musique, information
Ne pas en abuser : Trop de jaune fatigue les yeux et peut s’associer au mensonge, à la jalousie.

Couleurs froides

Le vert

Couleur de la Nature par excellence, le vert évoque le renouveau, l’univers des possibles et donc l’espoir.
Le Vert a un effet calmant et rafraichissant. Il apporte de l’équilibre et de l’harmonie. Dans ses tonalités plus foncées, telle que le vert émeraude, il symbolise le courage, l’intelligence et l’aisance.

Exemples de secteurs : Nature, environnement et écologie, loisirs.
Ne pas en abuser : Le vert peut parfois symboliser l’échec et la solitude.

Le bleu

Historiquement associé aux hommes et garçons, il est à la fois ciel et mer. Par ses nuances claires, il est symbole de rêve, de sérénité, de bienveillance. Par ses nuances plus foncées, il est synonyme de connaissance, de sérieux et de protection.
Idéale pour la communication, il inspire la fiabilité, la constance et la croissance.

Exemples de secteurs : Les bleus foncés sont adéquats pour des graphismes liés aux affaires, aux technologies et à l’informatique. Représentant le calme et la bienveillance, les bleus clairs sont parfaits pour des sites sociaux.
Ne pas en abuser : Sur-utilisé, il peut inspirer le dirigisme, la peur et la mélancolie.

Le violet

Le violet ou mauve représente la noblesse, l’abondance et la dignité. Symbole d’éveil de l’esprit, il peut servir à renvoyer un message de créativité et d’imagination.
Contradictoire, le violet peut être différemment perçu entre les hommes et les femmes. Les premiers y ressentent potentiellement de l’inquiétude et de l’instabilité, tandis que les dernières y perçoivent des signes positifs de réussite sociale et de luxe.
Dans ses tons plus clairs, il s’associe avec le printemps et la romance.

Exemples de secteurs : Art et culture, luxe, musique, études, croyance, business et féminité
Ne pas en abuser : De par sa contradiction entre hommes et femmes, il est préférable de l’utiliser de manière secondaire afin de valoriser d’autres couleurs.

Le rose

Couleur socialement associée aux femmes et filles, le rose représente la sensualité, le romantisme, le bien-être, et bien sûr la féminité. Il renvoie également directement à l’enfance.
En tant que couleur principale, il transmet un fort message de bonheur. Utilisé sporadiquement en contraste avec d’autres couleurs, il apportera un dynamisme certain et de la délicatesse.

Exemples de secteurs : Enfance, confiserie et pâtisserie, loisirs, art et peinture, femmes.
Ne pas en abuser : Trop l’utiliser peut donner une impression de naïveté et d’immaturité. Un aspect rétrograde ou kitch peut également apparaitre.

Couleurs neutres

Les couleurs suivantes sont conseillées pour être utilisées en tant que couleurs de fond accompagné de couleurs plus vives et lumineuses.
Les trois couleurs monochromes
NB : Ici, je resterai simple en considérant le noir, le gris et le blanc comme des couleurs.

Le noir

Couleur profondément ancrée, il symbolise la mort et le deuil quand il est seul. Accompagné de couleurs vives, il met en valeur leur lumière et apporte de l’élégance et du style.
Il évoque aussi la notoriété et le pouvoir, ainsi que la modernité.

Exemples de secteurs : Cinéma, art, photographie, luxe.
Ne pas en abuser : Ne pas l’utiliser seul ou avec du gris, ce qui donne une impression de tristesse et de monotonie. Ne pas l’associer avec du rouge vif (mort + sang).

Le gris

Associé à la tristesse, la mélancolie et la vieillesse, le gris n’est pas très positif en tant que tel. Toutefois, utilisé ponctuellement et marié avec des couleurs vives, il apporte de l’élégance et un sentiment de sobriété qui inspire le respect.
Il évoque la sagesse, la neutralité et l’équilibre.

Exemples de secteurs : Construction, design, école, argent, informatique et technologie de pointe.
Ne pas en abuser : Trop l’utiliser renvoie automatiquement un manque d’énergie, de monotonie et de tristesse.

Le blanc

Couleur de la pureté et de l’innocence, le blanc est équilibré et neutre. Relié au mariage, au paradis et à la virginité, le blanc est intrinsèquement très positif.
Il évoque la justice et la liberté, l’espoir et la clarté. Renvoyant à la propreté, il permet visuellement d’aérer l’espace et de mettre en valeur les autres couleurs.
Idéal comme couleur de fond, préférez tout de même des nuances crèmes ou pastels pour éviter un effet de vide et de creux.

Exemples de secteurs : Mode, actualités, mariage.
Ne pas en abuser : Trop de blanc atténue fortement l’identité visuelle. Il peut s’associer aux notions de vide et de stérilité.

Les marrons

NB : Je traiterai ici le marron avec ses deux nuances plus claires que sont l’ivoire et le beige.
Le marron représente le bienfait et la fiabilité et trouve ses racines dans la Nature. C’est une couleur rassurante et équilibrée qui s’associe à l’expérience et au confort.
Couleur naturelle qui suggère la force, la chaleur et la sécurité, le marron est aussi synonyme de volupté et de douceur de par l’imaginaire du chocolat et du café.
Le marron et ses nuances sont parfaits en toile de fond et se marie avec quasiment la totalité des autres couleurs, notamment le noir, le blanc, le rose, le violet et le bordeaux.
Pour ses nuances, l’ivoire représente le calme, l’élégance et la pureté. C’est une bonne alternative au trop blanc.
Le beige est relié au conservatisme et à la piété.

Exemples de secteurs : Culture, histoire, environnement, confiserie, luxe.
Ne pas en abuser : Trop de marron entraine un effet d’obsolescence voire de ringardise. Trop de beige renvoit une impression d’ennui et de manque d’intérêt.

Harmonie de couleurs

Vous avez ici un topo des éléments composant une charte graphique puis un focus sur les couleurs, leurs sens et émotions qu’elles portent avec elles et comment identifier celles qui vont correspondre à votre entreprise et l'image que vous souhaitez véhiculer.

À ce propos, je vous conseille vivement de réfléchir à ce que vous souhaitez transmettre à travers votre site afin de déterminer les couleurs et tonalités qui vous correspondent. Il n'est absolument pas nécessaire de passer énormément de temps dessus surtout si vous commencez.

Ayant cela en tête, vous serez à même de discuter convenablement et efficacement avec votre prestataire, si vous décidez de vous faire accompagner de manière approfondie.

Aussi, le travail pour obtenir une harmonie de couleur est également à votre portée si vous souhaitez y réfléchir.

Aujourd’hui, je vais vous montrer quelles polices de caractères utiliser pour être bien lu et beaucoup plus facilement. En dehors du contenu en lui-même, sa lisibilité est aussi importante afin d’obtenir de vos internautes qu’ils aillent bien au bout de leur lecture.

Notez bien que ce sont des conseils et non pas une obligation absolue. La lisibilité est également liée à la taille de votre police, et la lisibilité a été également grandement (et l'est toujours) améliorée du fait de la qualité grandissante des écrans.

C'est un point que je prends en compte en tant que freelance wordpress lors de la conception d'un site web pour un client.

Allons-y.

Choisir la meilleure police d'écriture

Vous le savez sans doute, tout comme moi, que lorsque l’on visite une page d’un site internet, n’importe laquelle sur le web, et bien on a que quelque secondes pour être convaincu de continuer la lecture ou pas.

Je le fais, vous le faîtes, vos clients le font.

Et la majorité des clients que vous perdez, qui n’achètent pas vos produits ou services et/ou qui ne deviennent jamais des lecteurs fidèles de votre site ; c’est très souvent et très simplement pour une seule raison. C’est souvent pour cette même raison qu’ils commencent à lire une page, un article qu’ils décident de ne pas continuer.

Et la plupart du temps, cette raison c’est que soit votre texte ne les accroche pas car votre discours est pour le coup un peu chiant ou soit, que votre contenu est difficile à lire.

De la même manière que j’en parle dans ce Plan Rédactionnel Marketing, il est très important de commencer, dès les premières secondes, par vous adresser aux lecteurs en disant “voilà ce que vous allez découvrir …” et de ne pas passer par une introduction tournant autour du pot.

Commencer par une promesse, par quelque chose d’enthousiasmant, quelque chose qui va titiller leur curiosité pour voir la suite.

Mais il y’a aussi autre chose qui est important. Et c’est tout simplement de rédiger quelque chose qui soit lisible.
Et heureusement, des études ont été faîtes sur les différences de lisibilité de plusieurs type de police de caractères.

Je vais donc tout de suite vous montrer quelles polices de caractères utiliser pour être plus facilement lisible.

Les deux types de polices de caractères

Alors, il y’a eu plusieurs études qui arrivent aux même conclusions.

Vous le savez peut-être, il existe deux types de police. Il y’a les polices sans serif et les polices serif. Elles sont également appelée les polices avec empattement et sans empattement.

Comme leurs nom l’indique, les polices sans serif (sans empattement) n’ont pas de pattes en-dessous. Ce sont les polices telles que Arial, Verdana, Helvetica etc.

Puis vous avez les polices serif (avec empattement) sont celles qui possèdent des “pattes” en-dessous telles que Times New Roman, Garamond, Georgia etc.

Polices serif ou sans-serif ?

Il existe une étude référence sur le sujet. Celle de Worden faîtes en 1991. Puis également une autre, effectuées par Hartley en 1994.

Le fait est que ces deux études ont aboutis aux mêmes résultats. Leur conclusion commune est que les polices les plus agréables à lire sont les polices serif avec un empattement telles que Times New Roman, Garamond ou encore Georgia.

Pour obtenir ces résultats, un texte était proposé à la lecture à plusieurs personnes. La police de caractère utilisé pour le texte changeait à chaque fois.

Alors, vous vous êtes peut-être renseigné sur ce point. Il y’a des études qui contredisent ça pour la lecture sur écran. Ceci dit, ces études ont été faîtes lorsque les écrans utilisés étaient les vieux écrans CRT à tube cathodique. Du coup, ces études n’ont plus d’impact étant donné qu’ils n’avaient absolument pas le niveau de définition et de finesse des écrans d’aujourd’hui.

Donc effectivement, sur ces vieux écrans, les polices Sans-Serif (sans empattement) du type Arial et Verdana étaient plus faciles à lire.

Mais aujourd’hui, les écrans que nous utilisons, que ce soit sur ordinateurs, tablettes et smartphones, sont infiniment plus performants que les meilleurs CRT de l’époque.

Du coup, les résultats des études de Worden et Hartley à l’époque menées sur papier sont applicables à la lecture que l’on opère sur nos écrans actuels.

Conseils pour le web

Un peu comme pour votre harmonie de couleur, veillez à garder une cohérence visuelle pour vos textes en utilisant pas plus de 2 ou 3 polices d'écritures différentes appliquées telles que :

• Une police pour vos titres,
• Une police pour vos textes,
• Voire une police pour vos appels à l'action.

Cela permettra, outre les différents éléments stylistiques, de structurer votre contenu en différenciant les titres, les sous-titres et les paragraphes etc.

Google Fonts

Pour trouver les meilleures polices d'écriture correspondant à ce que vous voulez, le service Google Fonts est parfait.

Le service est open-source et propose 847 polices de caractères. Elles n'ont pas de licence d'utilisation. Vous pouvez donc les utiliser commercialement sans vous poser de question juridique particulière.

Si vous ne trouvez pas ce que vous cherchez sur Google Font, vous pourrez doubler votre recherche avec le site Dafont. Toujours gratuites à l'utilisation, les auteurs de ces polices restent par contre les propriétaires. Vous pourrez consulter la licence qui est mentionnée pour chacune d'entre elle.

En résumé

La typographie est importante pour assurer la bonne lisibilité de vos contenus. Le lecteur ne doit pas avoir à plisser des yeux pour lire :). La typographie a un rôle à jouer pour donner une cadence de lecture, une tonalité. Elle sert également à mettre en valeur le contenu en le hiérarchisant, en l'aérant.

Tout cela combiner apporte in fine le confort de lecture.

Nous sommes tous passés par là.

Vous avez travaillé dur pour finaliser votre conception de site web, écrire un article de blog ou pour construire une nouvelle page d'accueil pour votre site web etc.

Mais vous êtes maintenant confronté à la tâche difficile de trouver les images parfaites qui vous aideront à illustrer votre propos. Bien sûr, vous savez qu'il ne faut pas se contenter de balayer n'importe quelle image trouvée sur Google - vous ne voulez pas que des avocats spécialisés dans la violation des droits d'auteur viennent frapper à votre porte, n'est-ce pas ?

De plus, vous ne souhaitez pas utiliser les images fades que nous retrouvons un peu partout car elles ont un impact négatif sur les conversions.

Alors comment trouver des images convaincantes à utiliser dans votre contenu en ligne ?

Comment savoir si une image est libre de droit pour vous éviter d'avoir recours au droit d'auteur ?

Cet article va vous montrer comment faire et trouver vos images gratuitement. Ce sont ces mêmes ressources que j'utiliseen tant que freelance wordpress.

Vous êtes prêt à résoudre ce problème de contenu visuel pour votre site web ? Génial. Commençons ...

Où trouver les meilleures images visuelles, gratuites et libres de droits

Commençons par apprendre où chercher les images libres de droits pour accompagner vos contenus en ligne.

Voici des plateformes d'hébergement d'images et d'illustrations que vous pouvez utiliser sans avoir à dépenser un sou.

Voici 4 ressources où vous pourrez faire des recherches (dans l'ordre recommandé) la prochaine fois que vous aurez besoin d'une image libre de droits pour votre site ...

1. Votre propre Smartphone !

Et oui !

Cela peut sembler évident, mais cela est important de le rappeler.
Si vous avez un smartphone, alors votre capacité à produire la photo que vous recherchez est là, dans votre poche.

Prenez une ou deux lampes pour obtenir un bon éclairage, puis prenez quelques photos pour essayer d'obtenir au moins ce dont vous avez besoin. Vous avez peut-être déjà la photo parfaite dans votre appareil photo !

A vrai dire, prendre vos propres images (si vous pouvez les rendre décentes) est génial parce qu'elles :

1. ne vous coûtent rien, et
2. Vous donne le droit d'auteur par défaut.

Alors n'ayez pas peur...

Prenez quelques photos rapides avec votre smartphone et voyez si cela vous aide à publier votre prochain contenu avec les visuels auxquels vous pensiez.