Aujourd’hui ce sera :

S’inspirer d’une image ou d’un visuel pour choisir les couleurs de son design

Parce que franchement, je me rend compte, en relisant le précédent article, que j’ai donné des informations, pourtant importantes, mais sans réelles explications.

Et cette phrase ci :

Si vous avez un visuel fort qui habille votre site, image, illustration, ou simplement votre logo, utilisez ses couleurs pour habiller votre site, uniquement pour une question d’uniformité graphique.

Mérite tout de même que l’on étoffe un peu la réflexion.

Pour changer, ou plutôt pour illustrer l’idée, nous allons travailler à partir d’exemples.

premier exemple le site oyoyo.fr

Oui je sais, j’en ai déjà parlé plusieurs fois, mais il rentre totalement dans la démonstration, donc…

C’est même plus insidieux que ça, car je me suis rendu compte avec le recul que la chose avait été inconsciente, je me suis laissé « guider » (pour ne pas dire diriger) par le visuel qui avait été choisi initialement pour être le visuel « fort » de la communication de la boutique OYOYO, le bébé dragon.

Voici le fameux bébé dragon :

Et voici une capture du site OYOYO au naturel (il est actuellement en version noël) :

Vous ne remarquez rien? Bon avouons que ce n’est pas SI évident que ça, surtout que la capture oyoyo est quand même de mauvaise qualité.

Il y a deux bleus sur le site oyoyo, un bleu très clair que vous allez retrouver au niveau de l’oeil, et un bleu plus foncé, plus profond qui est le bleu « basique » du dragon.

Ensuite, l’orangé « or » utilisé comme couleur contraste, que l’on retrouve au niveau de la tétine du biberon.

Le gris structurant, ailes, griffes, cornes, ventre et queue du dragon.

Et pour finir, le rouge, qui a été « adouci » sur l’image du dragon, que l’on retrouve au niveau de sa bouche, mais également en petites touches un peu partout sur le corps sous forme de violet (bleu + rouge). Sur le site on retrouve le rouge uniquement en survolant les liens ou pour quelques informations. On aurait pu s’en passer et uniquement se focaliser sur les trois couleurs principales : le bleu, le gris et le orange.

deuxième exemple : le thème dotclear « Hibou » de Kozlika

Une petite capture pour commencer :

Ensuite, allez faire un tour sur le blog (http://www.kozlika.org/kozeries) et regardez les couleurs utilisées, leurs variations au niveau de certains blocs d’information (commentaires, rétroliens, etc…), et revenez, enfin essayez, parce qu’on peut rester scotché longtemps sur son blog.

Outre le fait que ce thème est une parfaite illustration de l’optimisation du gris typographique et des blancs (voir : Quelques notions de mise en page : Les bases, du texte et des blancs), il est aussi très intéressant pour notre sujet du jour, car l’ensemble des couleurs utilisées dans ce thème sont tirées du visuel utilisé en haut (le petit carré de fleurs).

Vous me direz, oui mais il n’y a que deux couleurs, le vert et le orange, et vous aurez partiellement raison. Nous n’avons pas besoin ici de couleur d’appoint structurante, il n’y a pas de colonnes d’informations, toute la structure principale se créée par le contraste entre le blanc central et les couleurs de fond.

Au passage, pour le fond, Kozlika a utilisé des couleurs qui « frottent », c’est à dire des couleurs dont la force visuelle est égale, l’équilibre est là, aucune couleur ne prend le pas sur l’autre, nous pourrions avoir un fond uni que l’effet serait le même (bon ce n’est pas totalement vrai, le orange est en fait légèrement plus sombre d’à peu près 10% je pense.).

Tout le site est réalisé en camaïeu de vert et de orange, il n’y a pas réellement besoin de couleur « contraste » complémentaire, le simple usage de variations de vert ou de orange suffit.

Pour finir

Pour habiller un site internet de façon élégante, vous n’avez pas forcément besoin de vous prendre la tête, une bonne technique et simple à mettre en oeuvre :

Trouvez un visuel qui convienne au thème ou à l’esprit de votre site et utilisez les couleurs que ce visuel contient. En général cela vous évitera des fautes de gout, hélas trop fréquentes.

Les articles de la série:

• Quelques notions de mise en page : Les bases, du texte et des blancs
• Quelques notions de mise en page : Les couleurs et les contrastes
• Quelques notions de mise en page : images et couleurs

D’autres sont à venir.