Présentation sur les couleurs

1. L E S C O U L E U R S

2. • Permet de hiérarchiser visuellement le contenu
• Contribuent à véhiculer le message
• Définit l’atmosphère du site de manière générale
• Représente l’identité de la marque
L’INFLUENCE DES COULEURS

3. • Pourquoi viennent les visiteurs sur le site ? Pour des
informations ou des conseils ? Pour acheter des
biens ou des services ? Pour être distraits ?
• Qui visite le site ? Hommes ou Femmes ?
Adolescents ou adultes ? Quel est le cœur de cible ?
• Quels résultats espère obtenir le client ? Générer
plus de ventes ? Accroître sa notoriété ?
DÉTERMINER LE PUBLIC CIBLE

4. Désir Excitation Amour Énergie Mouvement Guerre Violence
SIGNIFICATION DES COULEURS
Sophistication Sincérité Romance Amour Douceur
Compétence Bonheur Joie Optimisme Jeunesse
Énergie Bonheur Joie Chaleur Ambition Excitation Enthousiasme
Compétence Qualité Fiabilité Constance Sagesse Loyauté Sécurité
Croissance Santé Nature Richesse Calme Générosité Fertilité Chance
Royauté Créativité Autorité Richesse Mystère Sagesse Relaxation
Terre Robustesse Fiabilité Stabilité Amitié Nature
Formalisme Professionnalisme Sophistication Pragmatisme Force
Blanc – Pureté Propreté Vertu Bonheur Sincérité Sécurité
Sophistication Élégance Autorité Force Formalisme Intelligence

5. ATMOSPHÈRE DU SITE
Couleurs neutres
Couleurs «néons»
Couleurs pastels
Combinaisons
monochromes

6. LA COULEUR ET LE GENRE

7. 3 COULEURS !

8. • Les teintes de votre couleur maitresse doivent
couvrir 60% de votre espace.
• Votre deuxième couleur doit couvrir 30% du design
de votre page Web.
• La couleur complémentaire, qui recouvre les 10%
restants, sert à accentuer des éléments stratégiques
tels que les boutons et autres appels à l’action.
LA RÈGLE DE 60-30-10

10. AGENCER UNE PALETTE DE COULEURS
• Paletton
http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
• Adobe Kuler
https://color.adobe.com/fr/create/color-wheel/
• Colourco
http://colourco.de/
• Colourlovers
http://www.colourlovers.com/
• Colrd
http://colrd.com/
• Rude Color
http://rudecolor.com/

11. LE CERCLE CHROMATIQUE

12. LE CONTRASTE
http://snook.ca/technical/colour_contrast/colour.html#fg=B9A48A,bg=FFFFFF

13. METTRE LE CONTENU EN VALEUR

14. Est-ce que votre palette de couleurs convient à l’objectif du
site et au public cible?
Explication
Si vous demandez à une personne autour de vous qui n’est
pas au courant de votre projet de vous indiquer ce qu’elle
récent en voyant votre palette de couleur, est-ce que celle-ci
est en mesure d’exprimer le bon objectif de votre site ainsi
que le public visé?
QUESTION 1

16. Votre site web a-t-il un nombre de couleurs raisonnable?
Explication
Évidemment, le nombre de couleurs utilisées dans un site web peut
varier, mais il a tout de même quelque standard à respecter.
Le nombre de couleurs doit se situer autour de 3
• La première est votre couleur maitresse (ex. : couleurs de fond)
• La deuxième est votre couleur secondaire (ex. : titres, icônes)
• La troisième est une couleur pour inciter à l’action (ex. : boutons,
liens)
Si vous avez plus que 3 couleurs, ça ne signifie pas que c’est mauvais,
mais il faut toujours éviter de finir avec un sapin de Noël.
QUESTION 2

17. Respectez-vous plus ou moins la règle de 60-30-10?
Explication
Cette règle est utile pour répartir vos couleurs de façon proportionnelle.
Par exemple, il faut éviter de trop utiliser la couleur choisie pour inciter à
l’action, sinon celle-ci en perd son utilité.
• Les teintes de votre couleur maitresse doivent couvrir 60% de votre
espace.
• Votre deuxième couleur doit couvrir 30% du design de votre page Web.
• La couleur complémentaire, qui recouvre les 10% restants, sert à
accentuer des éléments stratégiques tels que les boutons et autres
appels à l’action.
Cette règle peut bien sûr varier, mais c’est pour nous rappeler de ne pas
répartir toutes nos couleurs de façon égale.
QUESTION 3

18. Le contraste de votre couleur de fond et celle du texte assure-t-il une
bonne lisibilité?
Explication
Vous pouvez aller sur Snook.ca, un outil qui vous indique clairement si
votre contraste est bon ou non :
http://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333
QUESTION 4

19. Est-ce que votre design met le contenu du site en valeur?
Explication
Le choix des couleurs ne devrait pas rendre le design du site plus
prédominant que le contenu présenté. Le design devrait rester en
arrière-plan, de manière à mettre en valeur le contenu. D’un premier
coup d’œil, êtes-vous plus attiré par les couleurs d’arrière-plan ou par le
contenu (le texte, les images, etc.)?
QUESTION 5