01GESTALT PRINCIPLE OF

Similarity

Elements that look alike are perceived as related, helping to quickly identify patterns and groupings

Takeaways
0101

Pattern Recognition

Our brains automatically group elements that share visual properties

0202

Visual Properties

Color, shape, size, orientation, and texture can all establish similarity

0303

Relational Strength

Multiple shared properties create stronger grouping

0404

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

Examples in Action
Morphing Shapes
PRACTICE THIS PRINCIPLE

See how Similarity works in real design

Take these principles further with interactive exercises on visual hierarchy, color theory, and layout — free to start.

Start the Free Course

Affiliate link — free to start, and you'll get 25% off if you upgrade to Pro. We earn a commission at no extra cost to you.