<?xml version="1.0" encoding="utf-8"?>

Figure-ground principle

Figure-ground principle  Bad Practice
Figure-ground principle  Best Practice

Gestalt figure-ground principle states that our brains naturally distinguish between foreground and background objects in an image. The relationship becomes ambiguous when both the foreground and background contain two distinct images. This effect is widely used by logo and graphic designers.

UI and UX designers also utilize this principle to draw users' attention to specific areas on a screen. For example, when a modal appears on a screen, the background darkens or gets blurry, so users' eyes stick to the message inside a modal.[1]

Improve your UX & Product skills with interactive courses that actually work