Make your Website Eye-Catching with Realism with the 3rd Dimension

February 19, 2022

Depth perception refers to the ability to see the world in three dimensions. In a plane two-dimensional surface, depth can be simulated by the use of concepts related to depth field. In the previous blog we had discussed 5 ways a designer could create a perception of depth in website design.

In this blog, I will walk you through more ways a designer could create a sensation of depth via:

  • Lighting and Shading
  • Depth of field (focus)
  • Reference to nearby or known objects
  • Degree of contrast
  • Colour
  • The Parallax Effect

Lighting and Shading

As much as the light creates depth by adding external shadow, it also creates a perception of depth in how it plays over a surface of an object. It also offers clues about the 3-dimensionality and shape of that surface.

shapes-third-dimensional-shading-embossing-bevels-gradients-depth-visual-perception

For example, gradients, embosses, bevels, and the like is how light is absorbed and reflected off a surface.

A surface can emit more or less light depending on its orientation and placement from the light source. Closer to the source of light will show a brighter surface with more light reflected. Just like in the first website design, it is evident that the source of light is from the bottom of the layout and in the second website design, the source of light is from the right side.

shading-gradient-example-depth-perception-warm-colour-shades

shading-light-direction-example-depth-perception

Depth of field (focus)

When our eyes focus on one object it remains sharp while other objects around it become slightly blurry. This difference in the sharpness and blurriness is called the depth of field.

The closer an object is to the one with focus, the lower is the depth of field perceived between the two. Objects that are further away from the focused one on the same plane, appear to be blurrier.

Just like in the image below, the die that is focused indicates a lower depth of field since the other dice are closer.

dice-example-depth-perception-low-objects-near

Similarly, the animal does not seem to be far away from the camera thus creating a lower depth of field.

highland cattle

However, in the image below, the mountain, sky and the sun are further away from the focused bridge. This creates a sense of depth perception.

images

This holds true regardless of whether or not the object in focus is nearer or further away from the viewer. It is the amount of distance from the object in focus that matters to the objects of our focus.

The blurriness is caused by the difference in depth with the objects in focus.

Here are some ways designers can create a perception of depth in their website layout:

depth-perception-example-objects-far-away-blur-out

depth-perception-third-dimension-example-objects-far-blur-away

depth-perception-example-third-dimension

Reference to nearby or known objects

When we perceive an object of known size it provides reference for all other objects in the layout. The size of the object can be known because it represents a real object or a person, or because the size has been pre-defined in layout.

difference-in-size-coconut-tree-man-standing-depth-perception-example-three-dimensional

We know that a human and a coconut tree cannot be of the same size. For us to make sense of this contradiction, we perceive a depth between the two objects with the coconut tree being further into the background.

The known object adds context for the unknown object tied to the absolute physical world and adds scale to the layout.

The nearby object adds a different context. An object can only be small in relation to another larger object.

Just like in the website designs below, it is evident that there is a difference between the size of a rocket and human. This creates depth of perception

size-and-constancy-example-depth-perception-creating-third-dimension

Similarly, it is obvious that the moon cannot be this near to the earth. This perception of size of the objects creates reference for all other objects in the design.

depth-perception-example-moon-sun-layers-objects

Degree of Contrast

The contrast between an object and its background reduces when the distance between them increases. This is why darker shadows appear to be closer to the object that is casting it. It typically shows more contrast.

colour-contrast-sense-of-depth-perception-example-bright-warm-colours-visual-perception

The first image (left) appears to have more depth due to greater contrast between the background and the object than the second image (right).

This also explains how depth of field works as greater the contrast in focus and blurriness, the greater the distance and depth.

Just like in the website design below, the figure on the right of the layout does not create a sense of depth because of low contrast.

mask-depth-perception-example-colour-contrast-warm-colours-third-dimension

However, in the website design below, due to colour contrast, the car appears to be 3-dimensional thus creating a sense of depth perception.

third-dimension-depth-perception-example-colour-contrast-bright-colours

Colour

Cooler and darker colours tend to recede into the background, while warmer and brighter colours advance into the foreground.

colour-contrast-depth-perception-example-earth-colours-sky-colours-examples

This could be the result of the cool blue sky being further away than the warm earth. Mixing warm and cool colours adds a sense of depth in the layout by having some elements recede and others advance. This also occurs because of different visual weights that different colours carry.

shapes-colour-warm-colours-example

Designers could use colours with different visual weights in their website layout, for example:

colour-contrast-example-depth-perception-warm-colour-bright-colour

colour-contrast-creating-depth-perception-example-third-dimension

In today’s era of low attention, a designer must be creative and innovative to create a memorable experience. Even though depth perception engages users, web designers have found that the most useful way to achieve a sense of depth is by using parallax website designing.

Parallax Website Designing

Parallax scrolling is a computer graphic technique used by website designers to give a sense of faux 3-dimensional effect. This effect adds action and the illusion of depth by taking different visual elements and moving them at different speeds in the website layout. Some elements move faster and others move more slowly, while others may stand still.

As the user scrolls down the website, different layers of backgrounds or content move at different speeds and create an optical illusion. This is not a newly devised technique. In the early 1980s, game designers working on the Super Mario game used parallax graphics to create a perception of depth.

Today, parallax scrolling has become a trending web design since scrolling is easier than clicking; and a well-designed parallax effect engages users to scroll for more information and eventually click.

Two reasons why parallax graphics should be used are:

  • They are ideal for storytelling
  • Designs are all about communication. When designers create a website design, they want to communicate with the visitors and narrate a compelling story about the product, brand, or a service. It allows the users to have a unique online experience. The designers could also make a one page website containing the required information or the story of the product or brand without having to navigate to multiple pages.

  • It helps to improve users’ engagement
  • Reducing the website’s bounce rate is one of the goals every designer has. By utilising parallax designing, the designer can stimulate the user with a dynamic experience that can tend to engage and grab the user’s attention.

    Some of the distinguished examples of this type of designing are:

  • Firewatch
  • parallax-website-design-example-depth-perception-example-third-dimension

    Firewatch uses parallax in its landing page to create a genuine perception of depth. As the user scrolls down, he/she begins to perceive that they dive into details. The designer has not even attempted to hijack scrolling, meaning that the user can scroll at his/her own pace and not experience cognitive load.

  • Every Last Drop
  • parallax-website-design-depth-perception-example-third-dimension-example

    Every last drop excellently demonstrates the concept of “show, dont tell.” Instead of long content or audios, the designer communicates the message to the user by utilising parallax design. The design demonstrates how much water we consume daily. As the user scrolls down, they see scenes from daily life with information about water consumption.

  • Feed Music
  • parallax-website-design-example-third-dimension-depth-perception-example

    Feed Music has parallax website design that creates a truly immersive digital experience for the user. They have utilised a split screen layout that features 3-dimensional images paired with contextual information. Designers have pinned the information details to the images and as the user scrolls down, they see new content blocks and the relevant visual 3-dimensional image representing it and creating a depth perception.

Conclusion

By utilising the concept of depth designers can not only control the hierarchy of their design elements but also enhance user engagement and experience. By utilising lighting and shading, depth of field (focus), reference to nearby or known objects and degree of contrast, designers can create a sense of perception. By utilising parallax effect designers can not only retain the attention of their visitors but also provide an enhancing user experience by utilising engaging graphics.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]