Figure-Ground
Distinguishing between a focal figure and its background allows key content to stand out clearly
Visual Contrast
Clear distinction between foreground and background elements guides attention
Depth Perception
Use of shadows, blur, and opacity creates meaningful layers of content
Ensure Clear Contrast
Use color, size, or depth to separate primary content (figure) from the background
Test for Ambiguity
Make sure users can easily distinguish actionable elements (like buttons) from decorative ones
When to Use
- •
Highlight modals or pop-ups with contrast
- •
Design hero sections with bold figure elements
- •
Use hover effects to emphasize interactive areas
- •
Separate content with clear background contrast
- •
Focus user attention with negative space
When Not to Use
- •
When figure and ground lack sufficient contrast
- •
If backgrounds overpower primary content
- •
When ambiguity blurs the focus of the design
- •
If subtlety compromises the user’s ability to discern
Common Pitfalls
- •
Choosing low-contrast colors for figure and ground
- •
Overcomplicating backgrounds with textures
- •
Making both figure and ground compete for attention
- •
Failing to balance whitespace around focal areas
Become a better designer
Sign up for Links for Thinks — a weekly roundup of design resources sent straight to your inbox.
Improving Your Designs With Gestalt Principles: Figure / Ground
Jonathan Beer
Improving Your Designs With Gestalt Principles: Figure / Ground
Jonathan Beer
Improve Your Designs With The Principles Of Closure And Figure-Ground
Smashing Magazine / Jon Hensley
Improve Your Designs With The Principles Of Closure And Figure-Ground
Smashing Magazine / Jon Hensley
Figure this: deciding what's figure, what's ground
American Psychological Association / Rachel Adelson
Figure this: deciding what's figure, what's ground
American Psychological Association / Rachel Adelson
The Law of Figure-Ground
Interaction Design Foundation
The Law of Figure-Ground
Interaction Design Foundation
*VIDEO* Figure/Ground: Gestalt Principle for User Interface Design
Nielson Norman Group / Samhita Tankala
*VIDEO* Figure/Ground: Gestalt Principle for User Interface Design
Nielson Norman Group / Samhita Tankala