design-principleslisted

# Design Principles The fundamental laws governing visual perception and communication. These principles are not opinions—they're observations about how human vision and cognition work. ## When to Use This Skill - Making visual design decisions - Evaluating whether a design "works" - Explaining why something feels off - Teaching design fundamentals - Debugging design problems ## Core Principles ### 1. Visual Hierarchy **The Law**: Not all elements are equally important. Design must guide the eye. **Establishing Hierarchy**: | Tool | What It Does | Example | |------|--------------|---------| | Scale | Larger = more important | Hero headlines vs. body text | | Weight | Heavier = more important | Bold headings vs. light body | | Color | Saturated/contrasting = attention | Primary CTA vs. secondary | | Position | Top-left (in LTR) = first seen | Logo placement | | Space | More space = more importance | Generous padding around CTAs | | Depth | Shadows/elevation = prominence | Floating action buttons | **Testing Hierarchy**: Blur the design at 50%. Can you still identify: - The primary focal point? - The secondary information? - The action you should take? ### 2. Gestalt Principles **The Law**: The brain organizes visual elements into meaningful groups. #### Proximity *Elements near each other are perceived as related.* ``` Good: [Label] [Label] [Input] [Input] (8px gap) (8px gap) (32px gap between groups) [Label]