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.
Via Carbon
The text flows out of the viewport, encouraging the user to interact in order to keep reading.
Via Baremetrics
The screenshot flows off the right edge of the screen, implying the app offers many more features for users to discover.
Via Looi
The text overlaps the main graphic, creating depth and dominance.
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.
Via Contemple
The collage of elements is really striking and piques the user’s curiosity.
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.
Via Epok Design
The overlapping text on the right hand side of the page draws your eye after you see the large photo.
Via Filema Rodion
The collage of illustration, photography, texture, and typography is beautiful.
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”.
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.
