Cinq conseils de conception Web pour mieux utiliser la lumière et les ombres

Texte original : 5 astuces simples pour apporter de la lumière et de l'ombre dans vos créations

La lumière et l'ombre existent partout dans la vraie vie. Tout ce que vous voyez est reflété par la lumière et l'ombre. Visuellement, la lumière et l'ombre nous aident à identifier les choses et à reconnaître leur matière , leur échelle et leur perspective .

Par conséquent, si nous voulons rendre notre conception Web plus naturelle, dynamique, réelle et intuitive, il est très important de bien comprendre les effets de lumière et d’ombre. Voici cinq conseils pour vous aider à mieux utiliser la lumière et les ombres. Une bonne utilisation peut rendre votre conception plus raffinée et se démarquer des autres pages.

Une analyse rapide des principes d'éclairage et d'ombre.

Dans l'image ci-dessous, la source de lumière vient de la gauche. Les hautes lumières sont les parties les plus éclairées et les ombres sont situées les plus éloignées de la source lumineuse. L'existence de la lumière et de l'ombre nous aide à percevoir une grande quantité d'informations sur le matériau de la surface d'un objet .

Mais vous vous demandez peut-être quel est le rapport avec la conception Web ?

Si vous envisagez de créer des interfaces et des sites Web riches et texturés, la lumière et les ombres peuvent vous aider. Tout comme de nombreux artistes traditionnels utilisent la lumière dans leurs peintures, vous pouvez également utiliser la lumière pour donner de la profondeur et un intérêt visuel à vos créations.

1. Utilisation des sources lumineuses

Il faut dire que lors de l'utilisation de l'éclairage, savoir où se trouve la source lumineuse est la question fondamentale la plus importante. La position de la source de lumière détermine le placement des reflets et des ombres (bien que dans la conception Web, vous puissiez enfreindre ces règles). Dans Photoshop, vous pouvez utiliser « Illumination globale » dans les styles de calque pour vous assurer que les sources de lumière de tous les effets de lumière et d'ombre que vous créez sont dans la même position.

Contrôler la position de la source de lumière peut créer une atmosphère unique pour la conception de votre page (même un simple dégradé linéaire ou radial peut obtenir cet effet). Les effets de lumière et d’ombre peuvent également guider le déplacement du centre visuel.

Des exemples tirés du Web,

Campaign Monitor , utilisent des sources de lumière divergentes pour créer un effet de lever de soleil.

Icebrrg utilise l'éclairage pour rendre la page sous l'eau.

Mike Precious a utilisé plus d'une source de lumière pour ajouter un intérêt visuel et a utilisé un éclairage de lampe de table partout.

Deaxon a une faible source de lumière derrière le logo, qui attire l'attention de la page sur le logo.

2. Dégradés

Dans le monde réel, rien n'est toujours un ton plat. La lumière et l'ombre s'accrochent à tout. Utiliser des dégradés est un excellent moyen de créer de la profondeur et de l’authenticité.

La clé de l'utilisation des dégradés est de ne pas en faire trop . Lorsque vous dessinez des dégradés dans Photoshop, veuillez effectuer une superposition de dégradé dans le style de calque. Cela garantira la possibilité de modification de votre dégradé et, à mesure que le calque est mis à l'échelle, le dégradé peut également être mis à l'échelle sans perte.

Exemples tirés du Web :

le site Web de nclud utilise des dégradés subtils mais efficaces pour différencier et organiser le contenu.

À première vue, CSS Ninjas semble utiliser des couleurs plates. Cependant, chaque zone de couleur présente en réalité un léger dégradé, créant un effet de matière fascinant.

3. Points forts

Les points forts peuvent équilibrer les ombres et doivent être situés au bord de l'objet, à proximité de la source de lumière . Les points forts sont pour la plupart ignorés car s'ils sont bien utilisés, vous remarquerez à peine leur présence. Cependant, toutes les situations ne se prêtent pas à l’existence de reflets. Un reflet subtil peut provoquer une énorme différence dans le poli de la surface d’un objet. Plus la lumière est "nette", plus la surface de l'objet est brillante.

Pour apprécier les faits marquants, il faut zoomer sur ces détails. Lorsque vous réalisez des designs très brillants, c'est une bonne idée de plus que doubler la taille de votre design, car vous ne pourrez peut-être pas comprendre ce que vous faites lorsqu'il est affiché à son échelle d'origine.

Des exemples sur Internet,

Icon Dock et Newism, utilisent tous deux du blanc translucide sur le bord supérieur de la page pour créer un effet de surbrillance. Bien que très discret, il confère un fort éclat au design.

Tout le monde devrait connaître le site Web d'Apple . Mais vous n’avez probablement pas remarqué la subtile surbrillance au bas du menu de navigation. C’est ce point fort qui donne au menu une impression de premier plan.

4. Ombres de base

Comme les dégradés, les ombres portées sont également largement utilisées par les concepteurs Web. Lorsqu’elles sont utilisées correctement, les ombres portées peuvent réellement ajouter de la profondeur visuelle et de la texture à un dessin. L’essentiel est de ne pas en faire trop ni d’en abuser.

La profondeur de l'ombre dépend de la direction et de l'intensité de la lumière, ainsi que de la distance entre l'objet et la surface de projection. Plus la lumière est forte, plus l’ombre est nette et sombre ; plus la lumière est faible, plus l’ombre est faible.

Exemples sur Internet

Il existe trop d'exemples de projection sur Internet.

LinkedIn ajoute une ombre portée extrêmement subtile au bas de la barre latérale pour créer une impression de profondeur.

Google – peut-être la page la plus difficile à concevoir sur Internet – utilise toujours une subtile ombre portée sur sa page de recherche.

5. Ombres avancées

Pour donner aux objets une impression tridimensionnelle, vous disposez de nombreuses options en plus des simples ombres. Les ombres longues peuvent modifier radicalement les relations spatiales des objets sur la page.

Dans l'exemple ci-dessous, après que la même canette de Coca-Cola ait reçu différentes ombres et parties sombres, la position spatiale entière apparaît complètement différente .

L'exemple sur Internet,

Emotions by Mike, utilise intelligemment les ombres (et l'éclairage) pour transformer littéralement une page plate en sol.