Common Region
Elements within a shared boundary or background are seen as related, aiding quick understanding of grouping
Boundary Effect
Elements within shared boundaries are automatically grouped
Background Unity
Shared backgrounds create immediate association between elements
Don't Abuse Borders
Don’t overuse boundaries; whitespace can group elements effectively too
Hierarchy Nesting
Nested regions effectively show content hierarchy and relationships
When to Use
- •
Grouping related elements with borders or backgrounds
- •
Designing cards to separate individual pieces of content
- •
Using section dividers in long forms or articles
- •
Applying consistent container styles for modules
- •
Highlighting active areas with distinct regions
When Not to Use
- •
When regions overlap and confuse users
- •
If excessive borders clutter the layout
- •
When whitespace can group elements effectively
- •
If regions disrupt the flow of reading or scanning
Common Pitfalls
- •
Overusing containers, leading to visual noise
- •
Making regions too subtle to differentiate
- •
Failing to align content properly within regions
- •
Using inconsistent styles for similar regions
Master the Law of Common Region
Take these principles further with interactive exercises on visual hierarchy, color theory, and layout — free to start.
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.