This SaaS product focuses on design principles based on Gestalt theory. It offers guidelines for understanding visual grouping, patterns, and complex visuals, helping you become a better designer. It includes a newsletter for design resources.
Features
Similarity
Groups elements that are similar in some way, such as shape or color, implying they are related.
Continuity
Leads the eye along a path, suggesting that items are connected directly through a smooth line.
Proximity
Suggests that items close to each other are perceived as related or part of a group.
Figure-Ground
Differentiates an object from its background, allowing viewers to distinguish between the focal point and the surroundings.
Common Fate
Indicates that elements moving in the same direction appear related.
Closure
Mentally fills in gaps to perceive complete images even if parts are missing.
Symmetry & Order
Asserts that symmetrical or orderly forms are perceived as belonging together.
Prägnanz
Encourages perception towards simplicity and good form, emphasizing arranged in an easy to interpret manner.
Common Region
Groups items that are located within the same visual region, suggesting they are related.
Interactive Examples
Each principle of Gestalt psychology is explained through interactive examples, allowing users to understand complex concepts in a practical and engaging way.
Real-world Applications
The principles are also illustrated with real-world applications, making abstract concepts more tangible and relevant to everyday design tasks.
Pattern Recognition
Allows users to recognize and group items that share visual properties, helping in faster identification of patterns.
Visual Properties
Users can group unique properties like color, shape, size for identifying similarity.
Relational Strength
Helps in identifying similarity that supports or creates stronger groupings.
Avoid Accidental Similarity
Guidance on preventing unintended grouping by using distinct elements.
Visual Flow
Guides viewers to naturally follow a smooth path between elements, creating a visual connection.
Design for Scanning
Encourages content to be placed in a pattern like F-shape or Z-shape layout for intuitive navigation.
Line Completion
The mind perceives elements that form continuous lines or curves.
Directional Force
Elements arranged in a visually expected order and sequence.
Smooth Transitions
Ensures coherence between different elements to maintain context and flow.
Space Signals Connection
Demonstrates how placing elements closer together signals a connection between them and can improve visibility and grouping.
Distance Hierarchy
Shows how varying the distance between groups of elements can establish a hierarchy and help differentiate relationships.
Modularity
Defines how breaking content into separate chunks using proximity can create modular designs that enhance understanding and aesthetics.
Value Contrast
Use value differences between foreground and background to ensure figure stands out clearly.
Depth Perception
Incorporate shadows and overlapping elements to create a sense of depth and layering in design.
Ensure Clear Contrast
Make sure there's a clear visual difference between primary content and its background to stop any confusion.
Test for Ambiguities
Create clear separations between interactive elements and distinguish foreground from background in design.
Shared Movement
Elements moving together are seen as related, creating a sense of group or unity in design.
Convey Hierarchy
Using movement to guide users through workflows or transitions, establishing importance visually.
Smoother Transitions
Linking transitions in motion to reinforce their connection to grouped elements, enhancing user experience.
Dynamic Relationships
Motion and movement can create connections or groups that adapt based on interactions or context.