Geometric Layering

Back to Posts

Geometric Layering

New ways to layer elements has been steadily growing in popularity. First brought back as a mainstream and modern design technique by Google’s Material Design idea, geometric layering is a different way to add visual interest to visuals that might leave something to be desired.

Each of the examples below uses a framework with bold shapes to bring new life to images that are somewhat plain – buildings, a meeting photo, images of people working. The addition of fun shapes, cut outs and color give the user a starting point to get into the design. Note how each of the designs uses geometric to effectively move the user from a shape to the most relevant content, such as a headline or branding.

Geometry can be used in a number of ways that integrates with the rest of the design:

  • cut into images to bring focus to important test elements like Salt Projects;
  • use an unexpected bright border element to create an off-balance focal point that leads users across the screen such as Bailey and French;
  • put photos in unusual shapes to add new focus on the images, like Alchemy Digital.

The best part of using geometric layering is that it is easy and works with pretty much any type of content. Users are growing accustomed to circular buttons and other elements that are placed on top of one another for a multi-plane, more tactile interactive feel.

The angles and curves in geometric elements can help point the users from one element to the next, and when used effectively are a great directional tool. Position angles so that they “point” to the content you want users to see and use circles for content that should be viewed first.

Back to Posts