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