Example of overlapping elements in the Carbon Beauty design
pattern-img-border

Pattern 10: Create Overlapping & Collaged Elements

When an element flows outside its expected boundaries, we notice. Creating overlaps and collages is a useful visual design pattern for emphasizing important elements.


When an edge is trimmed off or overlaps in some unexpected way, users might expect they need to turn the page, swipe, or scroll down to see the hidden portion. But designers can use overlapping elements to create dominance too, not just to imply an interaction.

Example of overlapping elements in the Carbon Beauty design

Via Carbon

The text flows out of the viewport, encouraging the user to interact in order to keep reading.

Example of overlapping elements in the Baremetrics design

Via Baremetrics

The screenshot flows off the right edge of the screen, implying the app offers many more features for users to discover.

Example of overlapping elements in the Looi design

Via Looi

The text overlaps the main graphic, creating depth and dominance.

Example of overlapping elements in the UberEATS design

Via UberEATS

The title overlaps the photo, drawing your eye, and another photo flows off the edge of the screen implying there is more to view about this topic.

Example of overlapping elements in the Contemple design

Via Contemple

The collage of elements is really striking and piques the user’s curiosity.

Example of overlapping elements in the Adidas design

Via Adidas Speedfactory

While there is a color contrast issue with the paragraph, the overlapping elements and background in this design achieve an experimental, unexpected tone for a familiar and established brand.

Example of overlapping elements in the Epok design

Via Epok Design

The overlapping text on the right hand side of the page draws your eye after you see the large photo.

Example of overlapping elements in the Filema Rodion design

Via Filema Rodion

The collage of illustration, photography, texture, and typography is beautiful.

Example of overlapping elements in the LPD'O design

Via LPD’O

The headline overlapping the photos seems to imply a sense of ownership over the art. It’s almost like the design is saying “This kind of art is what we believe in”.

Example of overlapping elements in the Anakin design

Via Anakin

The overlapping elements tend to cascade downward, encouraging the user to scroll down and explore.

Caveats to overlapping and collaging elements

Ensure text always has sufficient contrast with the background. If you click through to the LPD’O example above, you’ll see different images in the hero area. The images are populated by a CMS, and some of them don’t have sufficient contrast with the foreground text, causing readability issues.

Don’t trim off elements users will want to see unless there’s a way to make the hidden portion come into view. In the Carbon example above, the text isn’t readable, but scrolling down reveals the trimmed off part. However, in the Baremetrics design example, the box that flows out of the viewport seems like an element you should be able to scroll to see, but you can’t. It looks great upon an first impression, but users might think it is broken because the screenshot draws so much attention but there is no way to reveal the entire graphic.


Looking for something specific? Email us here to suggest a design pattern.
Written by Jarrod Drysdale.


Share this article:


Objective Creative Design Bootcamp

Learn to succeed as a designer without compromising your creative vision

Objective Creative is a free mini bootcamp to teach you how to get hired as a designer without selling your soul to the devils of commerce.

You'll learn about the hidden factors limiting your success as a designer, how to overcome them, and how to show others the value of your work—without making compromises.

* email required

No spam, ever. Unsubscribe anytime.

Or, learn more about the bootcamp