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 de l'éclairage et des ombres
Sur l'image ci-dessous, la source lumineuse 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. Utilisez une source de lumière
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.
Campaign Monitor utilise 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é
Dans le monde réel, rien n’est toujours 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 que votre dégradé est modifiable et, à mesure que le calque est mis à l'échelle, le dégradé peut également être mis à l'échelle sans perte.
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. Faits saillants
Les reflets équilibrent les ombres et doivent être situés sur les bords des objets proches 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.
Icon Dock et Newism utilisent 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 proéminente.
4. Ombres de base
Tout comme les dégradés, les ombres portées sont également largement utilisées par les concepteurs de sites 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.
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 à un objet une impression tridimensionnelle, vous disposez de nombreuses options en plus de la simple projection. 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 .
Emotions by Mike utilise intelligemment les ombres (et l’éclairage) pour transformer littéralement une page plate en sol.
Superkix utilise des ombres portées pour faire flotter les baskets au-dessus de la page. Lorsque vous effectuez un zoom sur la page, l'ombre peut également bouger, tout comme la source de lumière se déplace également. Sofa crée un sol sur un fond blanc pur grâce à une excellente utilisation de la lumière et de l’ombre. Plus de ressources Le contenu suivant est en anglais :
À propos de l'auteurRob Morris est un designer australien travaillant au Japon. En tant que designer indépendant, il s'appelle Digitalmash et a des clients partout dans le monde. Vous pouvez suivre ses aventures sur Twitter. |