Drop-Shadows et Gradients: soyez cohérent dans vos métaphores visuelles
Les ombres portées et les dégradés sont deux des éléments de conception les plus courants sur le Web.
Vous les trouverez accompagnant de nombreux styles différents. Ils sont des effets pratiques pour les concepteurs Web car ils sont attrayants, utiles et faciles à créer avec n'importe quel programme graphique. Mais ils ont un côté sombre: ils sont fréquemment abusés .
Utiliser des ombres ou des dégradés d'amateur est presque aussi mauvais que d'apposer une lettre écarlate sur votre chemise pour faire savoir au monde que vous êtes un débutant ou un pirate. Même des erreurs subtiles et à peine perceptibles peuvent créer des tensions qui sapent des conceptions belles et efficaces.
Dans cet article, nous examinerons ce que font les drop-shadows et les dégradés , nous parlerons de la manière de les utiliser efficacement et nous examinerons quelques exemples d'erreurs et comment les résoudre.
Que font les ombres portées et les dégradés?
Le travail d'un concepteur de sites Web consiste à créer des motifs de couleur pour créer des écrans en deux dimensions . (Il existe quelques exceptions à cette règle: les sites Web peuvent être affichés sur un écran Kindle, par exemple, qui ne brille pas et les sites Web peuvent être imprimés sur papier.) Ces écrans ne reflètent pas le monde réel; ils ne sont même pas très proches du monde réel. Pour cette raison, nous n’avons pas vraiment besoin de faire en sorte que les modèles présents sur nos sites Web aient un rapport avec les objets du monde tridimensionnel dans lequel nous vivons.
Les systèmes d'exploitation comme Unix et DOS ont une interface qui n'est rien d'autre qu'un texte coloré sur un écran. D'autres, comme Windows et Mac OS X, sont remplis d'illusions d'objets réels. OS X, par exemple, a un dock qui ressemble à une table avec une surface brillante qui recule dans le lointain, une barre de menu dont les bords biseautés lui donnent l’impression d’être légèrement bombée et des barres de défilement qui semblent avoir des losanges translucides.
Tous ces effets sont des métaphores. Ils traitent certains éléments avec lesquels nous pouvons interagir à l'écran comme s'il s'agissait d'objets en trois dimensions qui interagissent avec des sources lumineuses de la même manière que les objets du monde non numérique. C'est une chose amusante à faire, d'une certaine manière: toutes ces sources lumineuses, ces arêtes et ces formes sont de la pure fantaisie. Parce que les objets à l'écran sont imaginaires, pourquoi devrions-nous les relier aux objets du monde réel?
L’illusion de l’espace relie l’imaginaire à un monde dans lequel nous sommes à l'aise de vivre.
La raison la plus importante pour laquelle nous relions des objets imaginaires à des objets du monde réel est que nous sommes des experts en interaction avec des objets dans notre monde en trois dimensions. Nous avons de l'expérience dans le traitement d'objets en trois dimensions et nous avons accumulé des connaissances sur le code visuel qui nous indique les relations entre les objets dans l'espace.
C'est en partie parce que l'exploit d'interpréter la lumière est si remarquable que nous prenons un tel plaisir dans l'illusion, ou dans la création de l' apparence des objets. Nous sommes souvent plus engagés par des peintures dramatiques d’objets communs tels que des maisons et des pommes que par les objets eux-mêmes. Nous, les humains, avons créé des dessins pour des milliers d’années destinés à présenter les idées d’objets. Les losanges et les tables illusoires sur l'écran ne sont que la manifestation la plus récente de cette longue tradition.
Il y a plus que du plaisir, cependant. La forme et la position nous donnent des informations sur la relation entre les objets. La longue forme de losange verticale de la barre de défilement dans la fenêtre Safari, par exemple, crée l'illusion qu'elle est plus «haute» ou plus proche que les éléments qui l'entourent. Cela lui donne une plus grande importance dans la conception, ce qui est approprié car la barre de défilement est un élément d’interface essentiel pour naviguer dans la page.
Les métaphores visuelles créent une perception perceptible.
En apparaissant comme un objet, la barre de défilement crée "perçue prix . "C'est-à-dire qu’elle se lie par métaphore aux propriétés des objets réels qui se prêtent à des usages particuliers. Un bouton biseauté sur une page Web, par exemple, communique qu'il permet d'appuyer sur . On peut faire n'importe quoi sur une page cliquable, mais associer un élément cliquable à l'image d'un élément pressable suggère sa fonction d'une manière claire, évidente et même agréable.
Les ombres portées et les dégradés sont des outils de base pour créer l'illusion de l'espace.
Les ombres portées et les dégradés sont deux outils qui aident à créer l'illusion de la tridimensionnalité et à suggérer les relations spatiales des objets sur la page. Lorsqu'elles sont bien faites, ces informations tridimensionnelles rendent le design plus beau et plus compréhensible.
Dans le monde réel, les ombres portées sont créées lorsqu'un objet bloque une source de lumière pour frapper une surface située derrière . C'est l'une des raisons pour lesquelles les gens disent que les ombres portées rendent les conceptions bidimensionnelles «pop»: parce qu'elles font apparaître ou flotter des objets au-dessus d'autres éléments.
Les dégradés apparaissent lorsqu'une partie d'un objet est plus proche d'une source de lumière que d'une autre. En conséquence, la partie la plus proche apparaît plus claire et la partie la plus éloignée apparaît plus sombre. (Les dégradés deviennent plus complexes, bien sûr, lorsque plusieurs sources de lumière interagissent ou lorsque les sources de lumière ont des couleurs différentes.)
Ainsi, en imitant les effets de la lumière dans le monde réel, les ombres portées et les dégradés communiquent des informations sur les objets métaphoriques, les sources de lumière imaginaires et leurs relations.
Comment utiliser efficacement les ombres portées et les dégradés
Voici une possibilité: ne pas utiliser les ombres portées ou les dégradés.
Je veux dire sérieusement. C'est le moyen le plus sûr d'éviter les erreurs d'ombre et de dégradé, et l'option doit toujours être prise en compte.
Parce qu'il est très facile de lancer des ombres portées sur des objets aléatoires, cela peut être une excuse pour éviter des solutions plus simples et plus efficaces aux problèmes. Par exemple, pour les parties de texte qui doivent être plus visibles, les concepteurs négligent souvent la couleur, la taille, le poids du type et de nombreux autres éléments en faveur d'une ombre portée.
De même, les concepteurs utilisent souvent des dégradés pour rendre un champ de couleur moins ennuyeux, sans comprendre pourquoi la composition globale n’est pas dynamique.
Si vous travaillez sur une maquette pour un site Web, sauvegardez si possible les touches tridimensionnelles telles que les ombres portées et les dégradés . Utilisez l'espacement, le placement et la couleur pour rendre le design efficace avant d'ajouter la dernière couche de vernis. Si vous vous concentrez sur le fonctionnement de vos conceptions sans ces astuces, vous constaterez peut-être que vous n'en avez pas besoin aussi souvent et qu'elles sont plus efficaces lorsque vous les utilisez.
Avant de plonger dans une ombre portée ou un dégradé, posez-vous la question suivante: « Une métaphore en trois dimensions est-elle nécessaire pour cette conception? Est-ce que je l'utilise pour ajouter des informations utiles sur la façon dont les objets sont liés ou comme composant efficace d'un son? approche esthétique, ou est-ce que je l'utilise comme une excuse? "
Le Subtler, le meilleur
Pour les ombres portées , n'utilisez presque jamais les paramètres par défaut de Photoshop. L'ombre portée par défaut de Photoshop est très sombre et est projetée dans le coin inférieur droit d'un objet (la source de lumière globale par défaut étant 120 °, en haut à gauche).
Les ombres vous parlent de la lumière dans votre environnement. Supposons que vous êtes dans une pièce sombre sans fenêtres et que vous allumez une lampe de poche. Tout objet sur lequel vous le faites jettera une ombre presque noire. C'est parce que l'objet bloque la lumière provenant de la seule source de lumière, ce qui signifie qu'aucune autre lumière ne vient de n'importe où ailleurs pour éclairer cette zone.
Maintenant, l'ombre ne sera pas complètement noire à cause de la lumière réfléchie. Une partie de la lumière de votre lampe de poche va rebondir sur les murs et frapper la zone ombrée dans une direction qui n'est pas bloquée par l'objet. Et si vous allumez une lampe dans un autre coin de la pièce, l'ombre s'illuminera considérablement. L'objet lancera une seconde ombre: la nouvelle ombre apparaîtra à l'endroit où la lumière de la lampe est bloquée mais sera remplie par la lumière de la lampe torche, tandis que la zone de la première ombre sera toujours bloquée par la lumière de la lampe torche. sera rempli avec la lumière de la lampe.
Lorsque nous ajoutons des ombres portées à nos conceptions, nous suggérons un environnement imaginaire pour notre page Web. Des ombres portées sombres et arquées suggèrent une pièce sombre avec une seule source de lumière. Des ombres portées légères à bords doux suggèrent une pièce riche en lumière diffuse.
Une salle bien éclairée est l'environnement le plus confortable pour les utilisateurs, car elle est similaire au type d'environnement dans lequel nous utilisons nos ordinateurs: un bureau ou une étude. À moins que nous voulions délibérément éviter cette zone de confort, nous devrions réduire les paramètres d’ombre dans Photoshop. Ramenez l'opacité à 30 ou 40%, voire moins.
Aussi, gardez les choses simples pour que les gens comprennent la métaphore sans y penser. Une source de lumière à 120 ° n'a pas beaucoup de sens. Mac OS X, par exemple, place sa source de lumière à 90 ° ou directement au-dessus, ce qui semble plus logique. J'aime le rendre encore plus simple et placer la source lumineuse directement perpendiculaire à l'écran. Pour ce faire, il suffit de mettre le paramètre de distance sur votre ombre portée à zéro (cela représente la distance de l'objet qui projette l'ombre portée sur l'objet en dessous). À ce stade, la lumière globale n'a pas d'importance: c'est simplement comme si une grande source de lumière diffuse venait de derrière l'utilisateur pour illuminer le dessin.
Cet effet est très courant dans les modèles «en trompe-l'œil» , dont le plus courant est l'image de fond ou le cadre d'une surface de bureau, comme si on le regardait de haut en bas. Des réalisateurs tels que Alfred Hitchcock, Martin Scorcese et Wes Anderson employez le même effet pour leurs signatures de vue de Dieu. De telles conceptions de sites Web se caractérisent par une certaine compréhensibilité sans effort, et il est plus facile pour le concepteur de maintenir une cohérence à l’échelle d’une conception.
Si vous avez ramené la distance à 0 et l'opacité à environ 30%, vous êtes à un bon point de départ pour une ombre portée. Jouez avec la taille pour changer à quelle distance la surface de l'objet semble être de l'arrière-plan sur lequel elle se trouve. Par exemple, si vous réglez la taille sur 1 pixel, vous obtenez un bel effet quasiment invisible mais agréable. Designer Dan Cederholm a fait de petits effets simples comme celui-ci une partie intégrante de son style (comme démontré dans son article séminal A List Apart sur " Coins de montagne ").
Vous pouvez certainement augmenter l’opacité si l’effet est invisible, mais commencer subtilement, puis le composer est bien meilleur que l’inverse. L'effet ne devrait pas être le moins évident qu'il ne devrait être.
Pour les dégradés, Photoshop a beaucoup de paramètres par défaut. Celles-ci peuvent avoir de bons usages, mais elles ont certainement des utilisations illimitées, donc il est généralement sage de ne pas les utiliser.
Au lieu de cela, sélectionnez le dégradé noir sur blanc par défaut. Sélectionnez ensuite le noir et le blanc et faites-en la couleur de base de votre élément. Maintenant que vous avez une base, choisissez le côté sombre ou le côté clair et ajustez-la pour qu'elle soit légèrement plus sombre ou plus claire. Encore une fois, le plus subtil, le mieux . (Certains des meilleurs dégradés que j'ai rencontrés ont dû être vérifiés avec l'outil Pipette dans Photoshop pour m'assurer qu'ils étaient bien là!)
Plus le contraste entre la lumière et l'obscurité est important, plus la surface apparaîtra ronde. Pour certaines choses, comme les menus de navigation et les boutons, une certaine rondeur est appropriée. Mais pour les objets qui devraient apparaître plats, maintenez le contraste faible.
Et rappelez-vous que le côté le plus léger doit faire face à la direction de votre source lumineuse.
Ce type de dégradé est merveilleux car il imite les dégradés que nous voyons tout le temps autour de nous. Rien dans le monde réel n'est véritablement un champ de couleur unique, car il a toujours une sorte de relation avec une source de lumière. Regardez attentivement les pages d'un livre ou au plafond autour de votre lumière aérienne: vous trouverez des dégradés partout.
Exemples d'erreurs et comment les corriger
Le web présente de nombreux dégradés, mais ceux-ci ne sont généralement pas réalisés par des concepteurs professionnels. Plutôt que de montrer des erreurs flagrantes, j'illustrerai quelques manières par lesquelles des erreurs subtiles peuvent créer des tensions dans des designs par ailleurs excellents.
Ombres uniformes pour les objets superposés
Les objets qui se chevauchent impliquent une différence de distance par rapport à vous (déterminée en partie par leur épaisseur). Les concepteurs utilisent cependant fréquemment des ombres portées identiques pour les objets qui se chevauchent. Ainsi, les informations véhiculées par les ombres portées s’opposent aux informations véhiculées par le chevauchement, sapant l’illusion de la dimensionnalité.
Voir de tels conflits me rend mal à l'aise et plus je me concentre sur eux, plus j'ai mal à la tête. Les utilisateurs doivent prendre plaisir à votre conception, ne pas ressentir de la douleur!
Vous pouvez en savoir plus sur ce problème dans " Construire une meilleure ombre portée , "Un guide de Jacci Howard Bear sur About.com.
Bords abrupts
Les coins des véritables ombres portées n’auraient pas de bords durs à moins qu’ils n’aient absolument pas de lumière réfléchie, ce qui serait une situation très inhabituelle. Au contraire, leurs coins sont généralement arrondis par les rayons de lumière qui les entourent.
Voici une ombre portée avec un bord irréaliste:
Cette conception autrement belle n'a presque aucune illusion dimensionnelle n'importe où mais a une ombre portée le long de la barre latérale droite. Le concepteur a peut-être voulu réduire la hiérarchie de la barre latérale sur la page, un effet que son fond bleu aide à atteindre. Non seulement est-il inutilement sombre, mais le bord dur invraisemblablement regarde le visiteur en face.
Au bas de la barre latérale, vous pouvez voir une transition arrondie, dans laquelle le concepteur a créé un effet plus plausible. Mais vous pouvez voir pourquoi il ne l'a pas répété en haut, car cela risquerait de créer une ligne horizontale nette définie par les éléments supérieurs bien alignés. Plutôt que d'exiger le réalisme de cette transition arrondie, réparons-la en atténuant le plus possible l'ombre portée.
Ici, j'ai rendu l'ombre portée si légère qu'elle ne fait guère plus que suggérer qu'elle est plus reculée. Parce qu'il est si léger, la ligne de transition nette n'est pas laide ou distrayante.
Qu'est-ce qui se passe derrière cet objet?
Parfois, une ombre portée devient folle sans raison évidente, comme dans la boîte bleue entourant le logo du W3C ci-dessous.
Pourquoi l'ombre portée est-elle si loin de l'objet et si arrondie? Plus j'essaie de comprendre l'histoire racontée par cette ombre portée, plus je suis confus. Je pense que le concepteur a voulu donner plus d’importance et de poids au logo, ce que l’ombre portée aide à accomplir, mais cela perturbe tellement l’harmonie de la page qu’elle ne vaut pas la peine.
Ne laissez pas vos dégradés suggérer différentes sources de lumière.
Dans cet excellent design pour WolframAlpha, les objets sur la page ont des dégradés allant du blanc à l’orange pâle. Le problème est que le dégradé dans la région d'en-tête a du blanc en haut, ce qui implique de la lumière d'en haut, tandis que les éléments de page plus bas ont du blanc en bas, ce qui implique de la lumière par le bas.
Vous pourriez penser que je pense trop à ceci, que les dégradés ne doivent pas nécessairement correspondre aux sources de lumière. C'est possible, mais des dégradés subtils comme ceux-ci ont une relation métaphorique inhérente aux gradients que nous voyons dans le monde réel. Basculons la direction des dégradés vers le bas sur la page pour qu’ils impliquent une source lumineuse d’en haut:
Et nous obtenons une harmonie de source de lumière.
En fin de compte, vous êtes libre de faire ce que vous voulez.
Parce que les objets sur une page Web ne se rapportent à des objets réels que par métaphore, leur efficacité est essentiellement subjective. La connexion entre une image d'un bouton et un bouton réel n'a aucune réalité au-delà de l'esprit de l'utilisateur.
Nous, concepteurs, ne sommes pas obligés de rendre nos métaphores cohérentes avec la réalité, mais être attentif et attentif aux nombreux niveaux de communication dans un design nous aide à rendre nos sites Web plus harmonieux.
Et notre attention et notre cohérence contribuent à rendre l'expérience du site Web confortable et même agréable pour l'utilisateur.
Écrit exclusivement pour WDD par Nate Eagle . Il a étudié la philosophie à l'université, une éducation qui l'a préparé parfaitement pour concevoir et développer des pages Web pour PBS KIDS. Vous pouvez lire plus de lui et ses collègues de PBS à Design.PBS .
Pensez-vous que ce niveau de détail est important lors de la conception de drop-shadows et de dégradés? Avez-vous vos propres bêtes noires sur la façon dont les ombres portées et les dégradés sont utilisés?