Quelques notions de mise en page : images et couleurs

Voici la suite de mes articles sur les notions de base de la mise en page.

En fait, ce n’est pas vraiment une suite, plutôt un complément de l’article précédent : Quelques notions de mise en page : Les couleurs et les contrastes.

Je me rends bien compte que j’ai un peu trop survolé le sujet, donc je vais essayer de reprendre certaines parties dans une série de billets, pour éclaircir certains points.

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 :

Un mignon petit bébé dragon tenant un biberon

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

capture d'écran du site internet oyoyo.fr

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 :

capture du thème dotclear hibou par Kozlika

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:

D’autres sont à venir.

Cordialement,
Aymeric Jacquet

Tags : ,

Be Sociable, Share!

4 Commentaires pour Quelques notions de mise en page : images et couleurs

  • Florent V.

    À propos de la gestion des couleurs, deux articles intéressants dernièrement sur 24ways.org :
    24ways.org/2006/photograp… (par Dave Shea)
    24ways.org/2006/cheating-… (par Jason Santa Maria)

    Pas de théorie sur la couleur, juste des exemples/cas pratiques parlants. C’est assez instructif (et efficace), et les auteurs ont le bon gout de rappeler qu’il n’y a pas de recette miracle applicable à toutes les situations. :)

    Le 23 décembre 2006 à 4 h 00 min

  • Aymeric Jacquet

    Je viens de prendre le temps de les lire, merci Florent, ce sont effectivement de très bonnes ressources.

    Le 28 décembre 2006 à 16 h 15 min

  • cc
    sa va moi oui tu fe qoi 2 bo
    cest trop mimi
    bis

    Le 21 avril 2007 à 0 h 46 min

  • J’adore ce dernier commentaire. Aymeric je crois qu’elle te prend pour ce gentil bébé dragon.

    Le 20 septembre 2008 à 18 h 56 min