Five web design tips to make better use of light and shadow

Original text: 5 Simple Tricks To Bring Light and Shadow Into Your Designs

Light and shadow exist everywhere in real life. Everything you see is reflected by light and shadow. Visually, light and shadow help us identify things and recognize their material , scale and perspective .

Therefore, if we want to make our web design more natural, dynamic, real and intuitive, it is very important to correctly understand the light and shadow effects. Here are five tips to help you make better use of light and shadow. Using them well can make your design more refined and stand out from other pages.

A quick analysis of the principles of lighting and shadowing.

In the picture below, the light source comes from the left. Highlights are the most illuminated parts, and shadows are located farthest from the light source. The existence of light and shadow helps us perceive a large amount of information about the material of the surface of an object .

But you may ask, what does this have to do with web design?

If you plan to create rich, textured interfaces and websites, light and shadow can help you. Just as many traditional artists use light in paintings, you can also use light to give your designs depth and visual interest.

1. Using light sources

It should be said that when using lighting, knowing where the light source is is the most important basic issue. The position of the light source determines the placement of highlights and shadows (although in web design you can break these rules). In Photoshop, you can use "Global Illumination" in layer styles to ensure that the light sources of all light and shadow effects you create are in the same position.

Controlling the position of the light source can create a unique atmosphere for your page design (even a simple linear or radial gradient can achieve the effect). Light and shadow effects can also guide the shift of the visual center.

Examples from the web,

Campaign Monitor , use divergent light sources to create a sunrise effect.

Icebrrg uses lighting to make the page underwater.

Mike Precious used more than one light source to add visual interest, and used table lamp lighting throughout.

Deaxon has a faint light source behind the logo, which brings the focus of the page to the logo.

2. Gradients

In the real world, nothing is always a flat tone. Light and shadow cling to everything. Using gradients is a great way to create depth and authenticity.

The key to using gradients is not to overdo it . When drawing gradients in Photoshop, please do gradient overlay in the layer style. This will ensure the editability of your gradient, and as the layer is scaled, the gradient can also be scaled losslessly.

Examples from the web:

nclud's website uses subtle but effective gradients to differentiate and organize content.

At first glance, CSS Ninjas seems to use flat colors. However, each color area actually has a faint gradient, creating a fascinating material effect.

3. Highlights

Highlights can balance shadows and should be located at the edge of the object close to the light source . Highlights are mostly ignored because if used well, you barely notice it's there. However, not all situations are suitable for the existence of highlights. A subtle highlight can cause a huge difference in the surface polish of an object. The "sharper" the highlight, the stronger the glossiness of the object's surface.

To appreciate the highlights, we need to zoom in on these details. When doing high-gloss designs, it's a good idea to more than double the size of your design, because you may not be able to figure out what you're doing when it's displayed at its original scale.

Examples on the Internet,

Icon Dock and Newism, both use translucent white on the upper edge of the page to create a highlight effect. Although very inconspicuous, it provides a strong luster to the design.

Everyone should be familiar with Apple's website . But you probably didn’t notice the subtle highlight at the bottom of the navigation menu. It is this highlight that gives the menu a prominent feel.

4. Basic Shadows

Like gradients, drop shadows are also widely used by web designers. When used correctly, drop shadows can really add visual depth and texture to a design. The key is not to overdo it or abuse it.

Shadow depth depends on the direction and intensity of the light, as well as the distance of the object from the projection surface. The stronger the light, the sharper and darker the shadow; the weaker the light, the weaker the shadow.

Examples on the Internet

There are too many examples of projection on the Internet.

LinkedIn adds an extremely subtle drop shadow at the bottom of the sidebar to create a sense of depth.

Google —perhaps the most difficult page to design on the Internet—still uses a subtle drop shadow on its search page.

5. Advanced shadows

To give objects a three-dimensional feel, you have many options besides simple shadows. Long shadows can dramatically change the spatial relationships of objects on the page.

In the example below, after the same Coke can is given different shadows and dark parts, the entire spatial position appears completely different .

The example on the Internet,

Emotions by Mike, cleverly uses shadows (and lighting) to literally transform a flat page into a floor.