IFOSUP Wavre | Webdesign | Ergonomie et Communication Web - Gérard Barmarin | Les Couleurs

Les Couleurs

• Ex.3.1 - Analyser du point de vue de l’utilisation des couleurs les deux sites suivants:

  • Biostory:
    • 3 couleurs (vert, rouge, orange) + noir et blanc.
    • Noir et blanc: Manque de douceur dans le texte (les faux noirs et les faux blancs ne sont pas utilisés).
    • Vert: Fait référence aux produits bio, aux aliments naturels verts, au petit pois présent sur le logo... Il est utilisé pour les éléments interactifs, les éléments animés et les titres. Bien que les couleurs soient inversées entre les boutons (texte blanc sur fond vert) et les titres encadrés (cadre/texte vert sur fond blanc), cela peut prêter à confusion. Il aurait été préférable de changer la couleur des titres ou éviter l'utilisation d'un cadre pour ces derniers (voir les deux...).
    • Rouge: Fait référence à la tomage provenant du logo. Son utilisation dans le but de marquer le bouton actif dans la barre de navigation est discutable. Il s'agit de la couleur la plus chaude présente sur le site, elle attire donc le regard sur le bouton actif, ce qui n'a aucun intérêt... Une opacité moindre aurait fait l'affaire pour signifier qu'il s'agissait du bouton actif et ça n'aurait pas perturbé la circulation du regard sur les pages.
    • Orange: Fait référence à l'orange du logo. Pourquoi est-il utilisé uniquement sur les titres de la page "nos coups de coeur" ? Et surtout, ne s'agissant pas d'un one-page et quoiqu'il en soit ne faisant pas parti des meilleures pratiques, pourquoi tous ces titres sont des balises H1 ?!?

    Conclusion: L'utilisation des couleurs "feux de signalisation" respectent les couleurs présentes sur le logo, cependant elles sont utilisées sans trop de cohérence. Il aurait été sans doute plus judicieux d'oublier le rouge dans le texte (sauf cas particulier comme les avertissements) et se contenter de l'employer avec parcimonie dans des éléments graphiques à proximité des points d'attention. Pour ce qui est des textes verts, on aurait pu se limiter aux titres de toutes les pages. L'orange quant à lui, n'est pas utilisé sur toutes les pages et il aurait pu remplacer le vert pour mettre en avant les éléments interactifs tels que les boutons. Finalement, un faux blanc et un faux noir auraient été les bienvenues pour adoucir le tout.

  • Globulebleu:
    • 1 couleur (jaune) + nuances de gris (blanc à noir).
    • Jaune: Issu du logo, il est en harmonie avec le message qu'ils veulent faire passer, une boîte dynamique et joyeuse. Il est principalement utilisé pour mettre les éléments important en avant (certains titres, les éléments actifs, certains éléments interactifs). Le design est pensé de telle façon (formes, les blancs, etc.) que l'emploi du jaune comme une couleur pour toutes ces différentes fonction ne pose pas de soucis d'ergonomie. De plus, il est présent de façon modérée évitant ainsi la nausée et les crise d'épilepsies.
    • Nuances de gris: Joli travail sur les contrastes qui permet une bonne lisibilité pour chaque environnement. Les pages étant essentiellement composées de nuances de gris et bien que le jaune soit utilisé par petite touche cela permet de le mettre en valeur. L'agence donne l'impression de vouloir s'approprier ce jaune dans le but que les clients associe cette couleur à la boîte (comme Milka et sa couleur lilas).

    Conclusion: Avec l'utilisation modérée d'une seule couleur en cohérence avec l'atmosphère recherchée (communication) et les nuances de gris (la Liste de Schindler), le site est lisible et ergonomique.

• Ex.3.2 - Dans le portfolio de Hypnotized choisissez un de leurs projets (autre que Biostory) et analysez-le d’un point de vue Typo et choix de couleurs:

  Le projet séléctionné - Docteur Zirak
  • 2 couleurs (argile, bleu nuit) + nuances de gris (blanc à noir)
  • Argile: Utilisé dans la plupart des titres, il s'agit d'une couleur naturelle souvent liées aux vertues qu'elle offre à la peau. C'est un excellent choix, une opération de chirurgie plastique s'apparente souvent à de la boucherie et à des procédés contre nature. Cette couleur vient rassurer le client, elle suggère qu'il ne s'agit que d'un simple soin de beauté.
  • Bleu Nuit: Utilisé comme couleur de fond pour les boutons et une partie du pied de page. Bien que peu présent, il ajoute une atmosphère de sérieux, de maitrise et de sécurité
  • Nuances de gris: Dans ce cas-ci, l'utilisation d'un vrai blanc en fond principal est pertinent. Il offre un aspect aseptisé ce qui est rassurant pour un établissement qui va ouvrir le client dans tous les sens. Les nuances de gris permettent d'apporter un peu de contraste à ces grandes surfaces blanches.
  • 2 polices (Bebas et Amiko)
  • Bebas: Utilisée pour les titres, tout comme les couleurs, elle se veut familière, simple, rassurante. Elle ne possède que des caractères majuscules et les lettres sont relativement hautes, elles donnent une impression d'autorité, de maitrise.
  • Amikos: Police principale, elle est familière, lisible, aérée avec une forme enbglobante se rapprochant d'un carré légerement plus haut que large. Pas de fioritures, on est en présence d'une police précise qui est là pour faire son travail. Vu le contexte, le choix d'une telle police se veut lui aussi rassurant et professionnel.
  • Les modifications de polices: Le texte principal a subi peu de modification. Le gras est utilisé avec beaucoup de prudence et le texte est aligné par défaut (à gauche). Les caractères des titres sont en majuscule et centré, cet alignement a sans doute été décidé pour équilibrer les blancs.

  Conclusion: Tant le choix des couleurs que celui des polices évoque des soins proposés dans une ambiance rassurante, professionnelle et propre.

• Ex.3.3 - Colorisez l’image suivante pour lui donner un sens inhabituel: