Overlay Patterns

What are overlay patterns?

Overlay patterns in UI design involve the presentation of additional content or functionality on top of existing elements within the user interface. These overlays can be temporary or permanent and serve various purposes, such as providing contextually relevant information, enabling interactions, or offering supplementary options.

By overlaying content, designers can optimise screen space and enhance user experience by reducing the need for users to navigate away from the current context.

---

Best practices

Here are some best practices when using overlay patterns in your products:

Purposeful use

Ensure that overlays serve a clear purpose and enhance the user experience rather than adding unnecessary complexity. Overlays should provide valuable information or functionality without disrupting the user flow.

Clarity and visibility

Make sure that overlays are visually distinct from the background content to prevent confusion. We use contrasting colours, borders, shadows or animations to clearly delineate the overlay from the underlying content.

User control

We should provide users with control over overlays, such as the ability to close or minimise them easily. Avoid forcing overlays on users, especially ones that interrupt their workflow or require immediate attention.

Responsive design

Overlay patterns need to be responsive and adaptable to different screen sizes and frameworks. Ensure that they are legible and usable on both desktop and mobile devices (web and apps), and ensure you’re using the best solution or the right pattern for each scenario.

Consistency

Maintain consistency in the design and behaviour of overlays throughout your website and apps. Use our consistent styling, interactions and placement to create a cohesive user experience.