WHAT IS AN OBJECT WITHOUT DEPTH?

“This art piece does not have depth!”, “This design component does not have depth, how will I know that this item is meant to be an overlay”. These statements are made by artist directors, product designers, product managers and many others.

Depth provides an avenue for users to differentiate sections of a design. Depth can be generated from the size of the component to the distance of an object to blurring effect of an object and lots more.

In design, there are various visual design components which can display depth. Here are some of those factors and how they are applied to different components of design:

SHAPES

During this study, I designed shapes based on their sizes starting with a basic size of 400px for the square, triangle and circle. I have observed that the closer an object is, the larger it will be. This rule is applied in real-life scenarios also.

Shape sizes are 400px, 647.2px and 1,047.17px

OVERLAPPING USING POP-UPS

Remember all those pop-up notifications which come up on your phone when you are reading a blog or using an application on your laptop. Now those pop-ups most times provide information for users or can be used as a menu option on the phone. To create depth, a little grey transparent color can be placed over the page to with a pop.

BLURS

The blurrier an object is, the more the object seems farther away from the user. In our everyday life, objects or people that seem far away tend to be blurry and a bit smaller but when they are right in front of us, they look a whole lot sharper. An example is the image below, the Update Service tab is closer to the user using overlapping and blurs compared to the Dashboard Page.

Blur value of 10 was used to create this level of opacity.

SHADOWS

Shadows come from a light source. When a light source is directed at an object, the section closest to the light source displays little to no depth while the farthest displays a shadow or what people call depth. Shadows also display depth of a shape or component.

1. A larger blur makes an element feel much closer to the user and farther from the background/white space.
2. A small and sharper blur makes an element feel much farther from the user and closer to the background/white space.

Different components have different shadows applied to them. From cards to buttons to pop-ups to command bars and lots more.

BRIEF QUIZ!

Looking at the image below, which card is:

1. Closer to the user
2. Closer to the white space/background

ANS

1. C is nearer to the user compared with B and A.
2. A is closer to the white space compared with B and C.

REAL-LIFE SCENARIOS

Depth is displayed in various physical surfaces. A good example is doors.

The door has layers which depict which part is the mail slot letterbox, door panels and door knocker.

The mail slot letterbox applied depth by moving the slot opener a little bit backwards and creating borders around the mail slot so that the mailman can easily slide letters or parcels through the mail slot.

The door panels meet design specifications regarding aesthetics and functionality.

This is just a simple example of a real-life scenario relating to depth.

Look around you, observe things that depict depth and tell me what you think.