Similarity Takeaway
When designing wireframes, make elements that have similar functions look similar to give your app a more intuitive user experience.
Gestalt Principles
Use Gestalt Principles when Creating Wireframes
Section titled “Use Gestalt Principles when Creating Wireframes”Understanding Gestalt Principles
Section titled “Understanding Gestalt Principles”Gestalt principles describe how humans group similar elements, recognize patterns, and simplify complex images when we perceive objects. You can use these principles to organize content on apps and websites so they’re visually pleasing and easier to understand.
Humans naturally notice the whole of something before noticing the parts. The term “Gestalt” comes from German, meaning “shape” or “form,” and these principles help us understand how our brains are designed to make meaning at a glance.
Key Gestalt Principles for Wireframes
Section titled “Key Gestalt Principles for Wireframes”Similarity Principle
Section titled “Similarity Principle”Elements that look similar are perceived to have the same function. Elements might look similar based on their shape, size, or color.
Example in Practice: Links on webpages are almost always the same color (typically blue), leading users to think their function is similar too.
Wireframe Application:
- In a Google Photos wireframe, six squares of the same size in the bottom half are perceived as similar elements
- Users understand these represent photos with identical tap-to-enlarge functionality
- Make elements with similar functions look similar to create intuitive experiences
Proximity Principle
Section titled “Proximity Principle”Elements that are close together appear to be more related than things that are spaced farther apart.
Wireframe Application:
- Three large rectangles placed close together in a row at the top of a Google Photos wireframe
- Because they’re close together, users perceive them as related (photo albums)
- Six squares below, placed more distantly, are perceived as individual items (photos)
Design Impact: The spacing communicates the relationship between elements without requiring additional labels or explanations.
Proximity Takeaway
When designing wireframes, put elements that are related close together instead of far apart.
Common Region Principle
Section titled “Common Region Principle”Elements located within the same area are perceived to be grouped together.
Wireframe Application:
- In a Gmail wireframe, divider lines create borders around each email
- Subject line, recipients, and email content appear grouped together within these borders
- Users understand these elements belong to the same email item
Implementation Methods:
- Use borders to group related elements
- Create background shapes to contain related items
- Apply consistent spacing within regions
Common Region Takeaway
Use borders, backgrounds, or contained spaces in your wireframes to group elements together.
Applying Gestalt Principles in Practice
Section titled “Applying Gestalt Principles in Practice”Planning Your Wireframes
Section titled “Planning Your Wireframes”Before drawing, consider:
- Which elements should users perceive as related?
- How can spacing communicate relationships?
- Where might borders or containers help organize information?
- What elements share the same function and should look similar?
Real-World Examples
Section titled “Real-World Examples”Navigation Bars:
- Icons grouped close together (proximity)
- Similar size and style (similarity)
- Contained within a distinct bar area (common region)
Content Cards:
- Consistent card dimensions (similarity)
- Related content within each card boundary (common region)
- Cards spaced evenly apart (proximity for separation)
Form Fields:
- Input fields with consistent styling (similarity)
- Related fields grouped closely (proximity)
- Form sections with borders or spacing (common region)
Benefits of Using Gestalt Principles
Section titled “Benefits of Using Gestalt Principles”For Users
Section titled “For Users”- Intuitive navigation: Users can quickly understand interface organization
- Reduced cognitive load: Information feels naturally organized
- Predictable interactions: Similar-looking elements behave consistently
For Designers
Section titled “For Designers”- Clear communication: Principles provide shared language for organizing content
- Problem-solving framework: Guidelines for resolving layout challenges
- Validation tool: Methods to test if wireframe organization makes sense
For Teams
Section titled “For Teams”- Design consistency: Everyone applies same organizational principles
- Stakeholder understanding: Easier to explain design decisions
- User testing validation: Principles predict how users will perceive designs
Additional Gestalt Principles
Section titled “Additional Gestalt Principles”Beyond the three covered here, other Gestalt principles include:
- Continuity: Elements arranged in a line or curve are perceived as related
- Closure: We mentally complete incomplete shapes or patterns
- Figure/Ground: We distinguish objects from their background context
- Symmetry: Symmetrical elements are perceived as belonging together
Implementation Strategy
Section titled “Implementation Strategy”Start Simple
Section titled “Start Simple”- Apply one principle at a time during wireframing
- Focus on similarity, proximity, and common region as primary tools
- Add other principles as you become more comfortable
Test Your Designs
Section titled “Test Your Designs”- Step back and look at wireframes with fresh eyes
- Ask others what they notice first and how they group elements
- Adjust spacing, sizing, and containers based on feedback
Iterate Based on Principles
Section titled “Iterate Based on Principles”- Use Gestalt principles as evaluation criteria
- Check if related elements appear grouped
- Verify that similar functions look similar
- Ensure important content stands out appropriately
Gestalt principles provide a scientific foundation for design decisions. By understanding how humans naturally perceive and organize visual information, you can create wireframes that feel intuitive and easy to navigate for users.