Depth in Design
Depth perception is defined as “the visual ability to perceive the world in three dimensions (3D) and the distance of an object.”. So, to sum it up, depth in design is the ability to create that sense of dimension and distance within your designs.
This week the task assigned at the WeJapa Internships had to do with depth in design and showing how important the concept was. I started this task first by making use of the video and text resources at my disposal which thankfully, were all provided by the internship’s mentors. This was really helpful as it made sure my research process was structured, I saw how shadows and distance were used to create visual illusions. I also noticed how the Golden Ratio was a reoccurring theme and how it was all around us and in everything we did, literally.
Leonardo Fibonacci discovered that adding numbers starting from zero and moving a count forward gave a series of numbers that were all related. These series of numbers is known as the Fibonacci Sequence i.e 0,1,1,2,3,5,8,13…Each number in the sequence is the sum of the two numbers that precede it.
Also, dividing these numbers gave the exact number 1.618 every single time, how amazing!. Today the Golden Ratio as it is fondly called is used extensively in various disciplines such as engineering, photography and most importantly in design as it creates a visually appealing balance every time.
HOW I APPLIED THIS PRINCIPLE
For the design components I created in this task, the design brief specifically said to use depth in every design created. Now there are different ways to show depth and I show examples with designs I created below:
1.Size and Scale
By playing around with different sizes for each of my design elements and how large or small each element was in comparison to others, I was able to create a sense of depth and space within my design.
Notice how the larger elements seem closer to the screen than the smaller elements creating a sense of distance and visual hierarchy. I achieved this by creating my initial components, duplicating that same element and then dividing its dimensions by the Golden Ratio — 1.618, duplicating the second element and dividing the dimensions again by the Golden Ratio to give the last smallest element.
2.Overlapping objects
By overlapping different design elements and objects we can give our designs a layered look, when our elements look layered it creates a sense of depth and hierarchy too as the element on top is viewed to be the most important. I show an example below.
I also made use of shadows to show clearly that the command bar is above the bottom component as light bounces off it.
3.Using Shadows
Under normal circumstances every object has a shadow, so by adding shadows to our 2D designs we can successfully add depth to our elements. I showed different examples below using cards.
In this first image, the cards above all cast different weight of shadows on the background which makes us believe the one with a darker shadow is closer to the background while that with a much lighter shadow is farther away from the background.
In this image, the card — grooming, is casting a shadow on the background which suggests that is elevated at the moment. This type of effect can be used on design elements when we want to show that we’re hovering over that element. Every other element in the thumbnail and grid has been left without a shadow on purpose to show contrast.
Notice how the principles of design come into the picture in this discussion, I talk more about contrast, hierarchy, and other essential design principles in detail here
4.Using Distance
In this example, I nudged one of the cards — health up a bit, this can be noticed whenever we’re hovering over the different elements on the page. The card also casts a shadow on the background making it look like it is elevated when we hover over it, thereby making it the center of attraction. This allows users to focus on one information at a time and reducing distraction significantly.
5.Neumorphism
Neumorphism is all about subtle contrast and solid colors. In the use of neumorphism, shadows and light are our major ingredients. One of the most interesting things about neumorphism is that it draws from both skeuomorphism and other massively popular styles, such as flat design.
In broad sense, the main ingredient is making sure that your element and your background are the same exact color or slightly close. This is so that we can then create the feel that these components are coming out from inside the background, using shadows to create the protruding look. I show my example below
In conclusion, completing this task has helped me in knowing that using depth in design and in the right context can really improve user experience dramatically. I also notice that since I completed this task, I’ve started noticing depth in every design I come in contact with. You know those things you can’t unsee once you see them, yeah this one of those. I know for sure you’ll also start to experience this after reading this article too, haha.
