Cet article s’insère dans une série d’articles consacrée aux éléments du design. La transparence est une caractéristique intéressante pour élaborer des compositions graphiques significatives. Nous allons voir quelques exemples d’utilisation de la transparence en webdesign.

Introduction

La transparence possède une connotation plutôt positive. Dans le langage courant, la transparence peut signifier l’honnêteté, la franchise, le signe de l’ouverture.

En architecture, l’utilisation de matériaux transparents va permettre à la lumière de rentrer dans les intérieurs et d’apporter de la clarté.

En graphisme, la transparence peut être utilisée pour réaliser des superpositions d’aplats, de textures, de motifs et d’images. Le résultat aboutit à de nouvelles couleurs, lignes, formes qui, en se juxtaposant, donneront des compositions inédites.

La transparence d’une matière dépend de sa nature physique et de son opacité mais la transparence peut également être obtenue par la perforation d’une surface à l’origine complètement opaque.

Grâce aux logiciels de traitement d’images, le graphiste peut modifier la transparence de n’importe quel élément et lui affecter l’opacité qu’il désire dans une gamme allant de l’opacité complète à la transparence totale. Le réglage de la transparence, via ces outils, est donc d’une grande malléabilité et offre au graphiste une multitude d’effets.

Utilisation de la transparence

Voici quelques unes des utilisations que l’on peut faire de la transparence :

Fasciner, séduire le spectateur

La transparence cache tout en révélant, elle suggère plus qu’elle ne montre. C’est pourquoi on la retrouve souvent dans l’imagerie érotique qui utilise des matières comme la dentelle des sous-vêtements, le tulle, les voiles des lits à baldaquin.

Créer des compositions complexes

La transparence permet la superposition de nombreux éléments dans un espace limité tout en conservant leur intégralité pour créer des compositions riches et complexes.

Apporter de l’esthétisme

La transparence maniée avec créativité peut améliorer l’esthétisme d’une réalisation graphique en faisant par exemple varier l’interaction d’une image avec son arrière plan.

Combiner deux idées ou deux éléments

En fusionnant deux concepts, deux images, par transparence, il est possible de suggérer le lien qui les unis.

Mettre en valeurs certains éléments

La transparence permet d’atténuer, dans une composition, la présence de certains éléments au profit d’autres éléments qui deviennent alors plus remarquables.

Simuler la présence de plusieurs plans

La transparence couplée à un effet de flou, peut aider le designer à donner une illusion de profondeur.

Favoriser la lisibilité d’un texte sans sacrifier son arrière plan

Lorsqu’un arrière plan apporte une valeur ajouté à l’esthétisme de la composition, il est dommage qu’il soit masqué par des aplats opaques de couleurs pour y accueillir du contenu texte par exemple. Mais sans la présence de ces aplats de couleurs, le texte risque de se fondre dans l’image d’arrière plan et devenir difficilement lisible. Une solution est de diminuer l’opacité de ces aplats de couleurs de tel sorte que le texte reste lisible mais que l’image d’arrière plan garde une certaine présence et une certaine intégralité.

Exemples d’utilisation de la transparence en webdesign

www.velvetgoldmine.eu

Sur ce site, la transparence est utilisée pour atténuer la présence de l’arrière plan et permettre une bonne lisibilité du texte. Malgré tout, l’image d’arrière plan reste largement présente.

www.marcoszender.com

Ce site possède un menu de navigation qui joue sur le flou et la transparence. Cette effet graphique donne l’illusion que les autres items du menu passe derrière l’item actif au passage de la souris. On a donc un effet de profondeur où l’item actif du menu est mis en avant au passage de la souris.

www.uliheckmann.com

Sur ce portfolio de photographe, la typographie est totalement transparente pour laisser apparaitre une fraction des clichés de l’artiste. Cet effet graphique apporte du mystère et nous force a décrypter l’image qui se cache en arrière plan.

www.imaste-ips.com

Le site imaste-ips est tout en transparence. Grâce à cette transparence, la structure de la grille de mise en page est discrète mais délimite bien les différents éléments de la page (en-tête, menu principal, contenu central, pied de page). L’arrière plan particulièrement graphique et esthétique garde ainsi son intégralité et donne au design l’essentiel de son caractère.

www.f6creations.com

Sur le site de f6creations, le webdesigner a superposé un ensemble d’éléments graphiques avec différentes opacités pour élaborer un arrière plan riche et complexe qui donne tout son esthétisme au site.

www.montealto.pt

Sur le site Montealto, le cadre de droite délimite une zone de contenu. Le webdesigner aurait pu décider de faire un aplat opaque pour y déposer ce contenu. Il a préféré rendre ce cadre transparent probablement pour laisser transparaitre la photographie en arrière plan et ainsi laisser de l’espace au vélo qui évolue de gauche à droite. Un cadre opaque aurait été maladroit car le vélo serait venu butter contre un mur virtuel.

Sources:

- Ouvrage « Graphic design the new basics » de Ellen Lupton & Jennifer Cole Phillips – Princeton Architectural Press