Cet article s’insère dans une série d’articles consacrée aux éléments du design. La profondeur est un procédé utilisé par les graphistes pour donner du volume aux objets ou simuler l’éloignement des différents plans de l’image. C’est une astuce graphique largement utilisée en webdesign.

Ce qu’apporte la profondeur

Le webdesigner élabore des visuels destinés à être affichés sur un support en deux dimensions: l’écran. Cependant, grâce a des astuces graphiques, il est possible de donner aux objets dessinés une illusion de profondeur et de volume comme si ils évoluaient dans un univers en trois dimensions.

Donner du relief à un objet permet de le détacher de l’arrière plan et ainsi d’augmenter sa visibilité. Cela aura pour conséquence d’attirer l’attention de l’internaute.

Simuler la profondeur permet aussi de donner plus de réalité à son design. En effet, nous évoluons au quotidien dans un univers en trois dimensions et sommes donc habitués à cette forme de représentation des choses.

Dans certain cas, la profondeur peut améliorer l’affordance* d’un objet. Je pense par exemple aux boutons de formulaire. Dessiner un bouton en volume donne à l’internaute un indice sur le rôle et la façon d’utiliser l’objet représenté comme étant un bouton.

Enfin, je pense qu’un objet ou un environnement dessiné avec une illusion de perspective donne une esthétique à laquelle nous sommes particulièrement sensibles.

Pour résumer, je dirais que la profondeur peut être utilisée en webdesign pour:

- Faire ressortir un élément dans la page.
- Attirer l’attention de l’internaute sur une zone particulière de la page.
- Augmenter l’esthétique du design en lui donnant plus de réalisme.
- Améliorer l’affordance* de certains objets.

(* Affordance : capacité d’un objet à suggérer sa propre utilisation.)

Simulation de la profondeur

La profondeur qui m’intéresse dans cet article est celle qui donne du relief aux objets et non celle qui simule l’éloignement des différents plans d’un environnement. Je ne parlerai donc pas de perspective simulée par les points et les lignes de fuite, ni de perspective atmosphérique ou de superposition des objets.

Ce qui m’intéresse ici est davantage les techniques graphiques qui permettent de donner du modelé à un objet et de le détacher de son arrière plan pour donner l’impression qu’il flotte au dessus de celui-ci.

La technique est assez simple. Il suffit de dessiner sur l’objet des ombres propres pour lui donner du modelé et de dessiner sur les surfaces environnantes des ombres portées pour simuler la troisième dimension.

Ombre propre

Pour donner du modelé à un objet utilisez l’outil gradient de votre logiciel de traitement d’image. Cela simulera la variation d’éclairage sur les différentes surfaces de l’objet.

Ombre portée

Pour donner une troisième dimension à un objet dans son environnement, rajoutez lui une ombre portée.

Avec quelques effets simples, notre applat gris s’est transformé en une surface courbe dont les bords droit et gauche se détachent de la surface blanche sur laquelle elle est posée.

Exemples d’utilisation de la profondeur en webdesign

www.puc.edu

Sur le site www.puc.edu la profondeur est utilisée pour faire ressortir le cadre principal, de l’image affichée en arrière plan.

www.hypr.com

Sur le site www.hypr.com c’est le logo qui est mis en avant grâce à sa représentation en trois dimensions.

www.iconeden.com

Sur le site www.iconeden.com, la profondeur met en valeur les cadres de contenu et favorise l’affordance des boutons.

www.degroupnews.com

Le site www.degroupnews.com est un site de type magazine. Il comporte beaucoup de contenu. Cela risque de provoquer une surcharge cognitive chez l’internaute si certains éléments ne se détachent pas de l’ensemble. Ici, le webdesigner a choisi la profondeur pour mettre en avant le contenu de la colonne centrale qui semble avancer vers nous et se détacher du reste de la page.