# Design Critique Principles > Deep reference material for interface critique. See SKILL.md for the lean critique process and output contract. - Skill: `tools-only/design-critique-principles` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add tools-only/design-critique-principles` - Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/design-critique-principles/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tools-only (https://skillmd.com/u/tools-only) - Updated: 2026-09-29 - Page: https://skillmd.com/skills/tools-only/design-critique-principles --- # Design Critique Principles Deep reference material for interface critique. See SKILL.md for the lean critique process and output contract. ## The Critique Lens ### What We're Looking For - Does it feel inevitable? Like it couldn't be any other way? - Does it get out of the way of what the user is trying to do? - Would we be proud to ship this? - Does every pixel earn its place? ### What Kills a Design - Unnecessary complexity - Inconsistency with itself or the platform - Decoration that doesn't serve function - Confusion about what's interactive - Making the user think when they shouldn't have to ### The Question Behind Every Question - "Why is this here?" - If you can't answer clearly, it shouldn't be. ## Core Principles ### Clarity The interface should be obvious. **What we look for:** - Can you tell what something does before you tap it? - Is the hierarchy of information clear? - Do icons communicate or decorate? - Is text actually readable, or did you sacrifice legibility for aesthetics? **Common failures:** - Mystery icons without labels - Competing visual hierarchies - Text that's too small, too light, or too clever - Relying on color alone to communicate ### Deference The content is the hero. The interface serves it. **What we look for:** - Does the UI step back for the user's content? - Are controls visible when needed, hidden when not? - Is the interface competing with what the user came to see? - Does it feel like a container or a distraction? **Common failures:** - Chrome that dominates the content - Persistent UI that should be contextual - Decoration that draws the eye away from what matters - Showing off the interface instead of the content ### Depth Visual and interactive layers that make sense. **What we look for:** - Do layers communicate relationship and hierarchy? - Does motion feel physical and meaningful? - Are elements appropriately elevated or recessed? - Does depth clarify or just decorate? **Common failures:** - Flat when depth would clarify - Shadows and elevations that don't mean anything - Motion that distracts rather than orients - Inconsistent use of the z-axis ## The Details ### Typography Typography is not decoration. It's the interface. **Critique points:** - Is the type hierarchy doing real work? - Are sizes and weights meaningfully differentiated? - Is line length appropriate for reading? - Does it use the system font, or justify the deviation? - Is Dynamic Type supported? (If not, why not?) **Red flags:** - More than 2-3 type sizes on screen - Weights that don't create clear hierarchy - Custom fonts without clear purpose - All caps where sentence case would work - Text that doesn't respond to accessibility settings ### Spacing & Alignment Spacing communicates relationship. Sloppiness breaks trust. **Critique points:** - Is spacing systematic or arbitrary? - Do elements that belong together look like they belong together? - Is there a consistent grid or rhythm? - Does the eye flow naturally? **Red flags:** - Inconsistent margins between similar elements - Misalignment that feels accidental - Crowded layouts that create anxiety - Spacing that changes for no reason ### Color Color should work, not just look. **Critique points:** - Does color communicate meaning? - Is there a clear, limited palette? - Does it work in light and dark mode? - Does it work for colorblind users? - Is contrast sufficient for readability? **Red flags:** - Semantic color used decoratively (red when nothing is wrong) - Too many colors competing for attention - Colors that look different in different contexts - Tint colors that clash with content - Color as the only differentiator ### Icons An icon should be instantly understood or not used. **Critique points:** - Would a user know what this does without a label? - Is it consistent with system iconography? - Does it scale well to different sizes? - Is the metaphor clear or clever? **Red flags:** - Icons that require explanation - Inconsistent stroke weights or styles - Metaphors that don't translate across cultures - Novel icons when system icons exist - Icon-only actions that should have labels ### Touch Targets If it's tappable, it needs to be tappable. **Critique points:** - Is every target at least 44x44 points? - Is there enough space between targets? - Is the tappable area larger than the visible element? - Can you tap it easily with a thumb? **Red flags:** - Tiny targets that require precision - Targets too close together - Visual element smaller than tap area with no indication - Assuming stylus-level precision ## Interaction Patterns ### Navigation The user should always know where they are and how to get back. **Critique points:** - Is the navigation model clear? - Can the user always get back? - Does the structure match the user's mental model? - Is depth communicated through animation? **Red flags:** - Navigation that breaks the back gesture - Unclear hierarchy (where am I?) - Modal takeovers with no escape - Losing state when navigating ### Feedback Every action deserves acknowledgment. **Critique points:** - Does the interface respond immediately to touch? - Is there feedback for every action? - Are loading states clear and appropriate? - Do errors explain what happened and what to do? **Red flags:** - Actions with no visual response - Spinners with no context - Errors that blame the user - Success states that aren't visible ### Animation Motion should orient, not entertain. **Critique points:** - Does animation help the user understand what happened? - Is timing appropriate (not too fast, not too slow)? - Does it respect reduced motion preferences? - Is it consistent throughout the experience? **Red flags:** - Animation for its own sake - Motion that slows down the interaction - Jarring transitions - Inconsistent easing or timing - Ignoring accessibility preferences ### Gestures Standard gestures must work as expected. Custom gestures must be discoverable. **Critique points:** - Do standard gestures (swipe back, pull to refresh) work? - Are custom gestures discoverable without instruction? - Is there always a visible alternative to gestures? - Do gestures feel natural and physical? **Red flags:** - Hijacking system gestures - Hidden gesture-only functionality - Gestures that conflict with platform patterns - Requiring a tutorial for basic interaction ## Platform Consistency ### System Integration The app should feel like it belongs on the platform. **Critique points:** - Does it use system controls where appropriate? - Does it respect system settings (text size, contrast, etc.)? - Does it integrate with system features (share sheets, notifications)? - Does it follow platform navigation patterns? **Red flags:** - Custom controls that reinvent system controls (worse) - Ignoring Dynamic Type - Custom sharing mechanisms when system sheets exist - Non-standard navigation that fights muscle memory ### The Human Interface Guidelines Not suggestions. Guidelines. **Critique points:** - Have the HIG been consulted for every major decision? - Where we deviate, is there clear justification? - Are we using new platform capabilities appropriately? - Would this pass App Store review? **Red flags:** - Deviations without justification - Outdated patterns when new ones exist - Novel solutions to solved problems - "Android does it this way" ## The Crit Process ### How to Give Feedback - Be specific. Point to the exact element. - Explain why, not just what. - Reference principles, not preferences. - Offer alternatives when possible. - Distinguish blockers from suggestions. ### Categories of Feedback 1. **Blockers**: Cannot ship until fixed 2. **Strong recommendations**: Should fix unless compelling reason 3. **Suggestions**: Would improve but acceptable without 4. **Praise**: Call out what's working ### Questions to Ask - "What is the user trying to do here?" - "What's the most important thing on this screen?" - "What would happen if we removed this?" - "Is this the simplest way to achieve this?" - "Would a new user understand this?" ### The Hardest Question - "Are we proud of this?" - If the answer isn't yes, don't ship it. ## Common Critique Notes ### "Too busy" - Too many things competing for attention - Unclear hierarchy - Remove until the important things breathe ### "Not discoverable" - Hidden functionality - Unlabeled icons - Gestures without visible affordance - The user shouldn't have to guess ### "Inconsistent" - Different patterns for similar actions - Visual language that changes - Behavior that surprises - Pick a pattern and commit ### "Feels off" - Something in the details isn't right - Usually spacing, alignment, or timing - The eye knows before the mind can articulate - Trust the feeling, find the cause ### "Overdesigned" - Trying too hard - Every effect turned up to 11 - Decoration overwhelming function - Subtract until it feels inevitable ## The Standard ### What "Good" Looks Like - You don't notice the interface - Everything is where you expect it - Actions feel instant - You never feel lost - It adapts to you, not the reverse ### What "Great" Looks Like - Moments of delight that don't get in the way - Details you discover over time - Feels like it was made just for you - You can't imagine it being different - You forget it's software ### The Bar - "Would Apple ship this?" - Not as flattery—as a standard - The details matter - The polish matters - The user's time and attention are precious - Earn every pixel