Day 4: Visual Hierarchy Experiments
Using Gestalt principles to guide attention without conventional layouts
📚 Study (10 min)
Read about Gestalt principles in "Universal Principles of Design"
✏️ Practice (20 min)
Redesign a boring FAQ page using only scale and color to create hierarchy (no traditional layouts)
🔬 Analyze
Species in Pieces CSS polygon exhibition
Gestalt Principles in Action
Gestalt principles explain how our brains organize visual information into meaningful patterns. Understanding proximity, similarity, and closure gives you tools to guide attention without relying on conventional layouts. The Species in Pieces exhibition demonstrates how simple geometric shapes can create complex, emotionally resonant experiences through careful visual relationships.
Choose a real FAQ page from any boring corporate website. Your mission: transform it into something visually striking using only typography scale and color relationships. No boxes, lines, or traditional spacing patterns allowed. Create hierarchy through size relationships that feel organic rather than systematic. Maybe questions grow larger as they become more emotionally loaded, or answers use color temperature to indicate urgency.
Study how Species in Pieces uses CSS polygons to create animal shapes that feel alive despite being geometric. Notice how they use color transitions and animation timing to create emotional pacing. Your FAQ redesign should similarly transform dry information into an experience that feels intentional and expressive. The goal isn't just better usability - it's creating an interface that makes people feel something while finding answers.
Key Gestalt Principles for Hierarchy
- Proximity
- Elements close together are perceived as related
- Similarity
- Similar elements are grouped mentally
- Closure
- Minds complete incomplete shapes
- Continuity
- Eyes follow lines and curves naturally
- Figure/Ground
- We distinguish objects from backgrounds
FAQ Redesign Constraints
You can only use:
- Typography scale variations (no standard sizing)
- Color relationships (temperature, saturation, brightness)
- Opacity and transparency
- Rotation and transformation
You cannot use:
- Boxes or containers
- Lines or dividers
- Traditional spacing/margins
- Conventional list formatting
Key Takeaways
- Visual hierarchy doesn't require traditional layout structures
- Scale and color alone can create powerful information organization
- Emotional loading can influence visual treatment of content
- Gestalt principles work subconsciously to organize information