Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

How to convey depth of levels or a three-dimensional appearance ?

Overlapping: Show important elements fully and cover less important ones partially. This creates a sense of depth as the covered elements seem farther away.

Drop Shadows: Add a shadow to elements to make them appear closer. The shadow, usually at the bottom and right edges, suggests a light source from the upper left, reinforcing proximity.

Highlighting and Lowlighting: Bright elements come forward, and less bright ones recede. This guides attention and emphasizes the importance of highlighted elements.

Shrinking and Growing: Important elements can grow while less important ones shrink. For example, selecting an icon could make it expand, drawing attention.

Color Change: Objects farther away are less saturated. Increase saturation for important elements, making them stand out.

Size Change: Objects farther away appear smaller. Decrease the size of less relevant elements and enlarge important ones.

Clarity Change: Objects not in focus appear fuzzy. Make non-applicable elements blurry and keep relevant ones clear.

Vertical Location: The horizon seems higher, and close objects are lower. Place important elements at the bottom of the screen and less relevant ones at the top.

Spacing Change: Faraway objects seem closely spaced. Arrange less relevant elements closely and give more space to currently important ones.

Receding Lines: Use converging lines to a vanishing point to imply depth. Parallel lines that meet suggest distance.

Motion Change: Objects moving uniformly seem slower when farther away. Consider this when showing motion on the screen

Leave a Comment