Similarity
Elements that look alike are perceived as related, helping to quickly identify patterns and groupings
Pattern Recognition
Our brains automatically group elements that share visual properties
Visual Properties
Color, shape, size, orientation, and texture can all establish similarity
Relational Strength
Multiple shared properties create stronger grouping
Avoid Accidental Similarity
Ensure unrelated elements are visually distinct to prevent confusion
When to Use
- •
Use consistent styles for navigation menus
- •
Group related elements with shared colors or shapes
- •
Apply uniform styles to product cards or lists
- •
Highlight active states with consistent design
- •
Create visual alignment for form fields and labels
When Not to Use
- •
Using similar styles for aesthetics, conflating distinct interactions
- •
Avoid uniformity when emphasizing hierarchy
- •
When unrelated items might appear connected
- •
If distinct designs improve usability
Common Pitfalls
- •
Making unrelated elements look similar
- •
Overusing uniform styles, reducing clarity
- •
Neglecting visual priority for key actions
- •
Failing to update active states consistently
Become a better designer
Sign up for Links for Thinks — a weekly roundup of design resources sent straight to your inbox.
Similarity Principle in Visual Design
Nielson Norman Group / Aurora Harley
Similarity Principle in Visual Design
Nielson Norman Group / Aurora Harley
The Law of Similarity
Interaction Design Foundation
The Law of Similarity
Interaction Design Foundation
The Gestalt Principle of Similarity Benefits Visual Working Memory
PubMed Central / Dwight J Peterson, Marian E Berryhill
The Gestalt Principle of Similarity Benefits Visual Working Memory
PubMed Central / Dwight J Peterson, Marian E Berryhill
Gestalt Principles of Design – Similarity
Christopher Butler
Gestalt Principles of Design – Similarity
Christopher Butler