app-ui-design

# Mobile App UI Design

> Expert guidance for designing beautiful, accessible, and platform-native mobile app interfaces following 2025 best practices.

## Core Philosophy

- **User-First Design** — Prioritize user needs, behaviors, and mental models over aesthetics
- **Platform Consistency** — Follow iOS HIG and Android Material Design guidelines
- **Accessibility as Foundation** — Design for all users from the start, not as an afterthought
- **Emotional Intelligence** — Create interfaces that users emotionally connect with
- **Performance-Conscious** — Beautiful design that doesn't sacrifice app performance

---

## Hard Rules (Must Follow)

> These rules are mandatory. Violating them means the skill is not working correctly.

### Accessibility First

**All designs must meet WCAG 2.2 AA standards. Accessibility is not optional.**

```markdown
❌ FORBIDDEN:
- Color contrast below 4.5:1 for text
- Touch targets smaller than 44×44pt (iOS) or 48×48dp (Android)
- Information conveyed by color alone
- Missing alternative text for images
- Non-keyboard-navigable interfaces

✅ REQUIRED:
- Minimum 4.5:1 contrast ratio for normal text
- Minimum 3:1 contrast ratio for large text (18pt+)
- Touch targets: 44×44pt (iOS) / 48×48dp (Android)
- Support for Dynamic Type / Font Scaling
- VoiceOver (iOS) / TalkBack (Android) compatibility
- Clear focus indicators for keyboard navigation
```

### Platform Guidelines Adherence

**Follow platform-specific design guidelines. Do not mix iOS and Android patterns.**

```markdown
❌ FORBIDDEN:
- Using Android-style FAB on iOS
- Using iOS-style bottom sheets on Android without adaptation
- Mixing platform navigation patterns
- Ignoring platform typography (SF Pro vs Roboto)

✅ REQUIRED:
iOS (Human Interface Guidelines):
- Use SF Pro font family
- Tab bar at bottom for primary navigation
- Push navigation with back chevron
- Standard iOS controls (UIKit/SwiftUI)

Android (Material Design 3):
- Use Roboto font family
- Bottom navigation bar or navigation drawer
- Material components with ripple effects
- Follow Material You dynamic theming
```

### Consistent Design System

**Every app must have a documented design system with tokens.**

```markdown
❌ FORBIDDEN:
- Ad-hoc colors and spacing values
- Inconsistent button styles across screens
- Multiple unnamed font sizes
- Components without defined states

✅ REQUIRED:
Design System Must Include:
├── Color Tokens (primary, secondary, surface, error, etc.)
├── Typography Scale (heading1-6, body, caption, etc.)
├── Spacing Scale (4, 8, 12, 16, 24, 32, 48px)
├── Border Radius Tokens (none, sm, md, lg, full)
├── Shadow/Elevation Tokens (elevation1-5)
└── Component Library (button, input, card, etc.)
```

### Touch-Friendly Design

**All interactive elements must be optimized for touch interaction.**

```markdown
❌ FORBIDDEN:
- Touch targets smaller than minimum size
- Interactive elements too close together (<8px gap)
- Important actions outside thumb reach zone
- Hover-dependent interactions

✅ REQUIRED:
- Minimum touch target: 44×44pt (iOS) / 48×48dp (Android)
- Minimum spacing between targets: 8px
- Primary actions in thumb-friendly zone (bottom 2/3)
- Clear tap feedback (ripple, highlight, scale)
```

---

## Quick Reference

### When to Use What

| Scenario | Approach | Key Considerations |
|----------|----------|-------------------|
| New app design | Start with design system | Define tokens before screens |
| iOS-only app | Human Interface Guidelines | SF Pro, standard iOS patterns |
| Android-only app | Material Design 3 | Roboto, Material components |
| Cross-platform app | Adaptive design | Platform-specific navigation |
| Redesign existing app | Audit first | Maintain mental models |
| Accessibility review | WCAG 2.2 AA checklist | Contrast, touch targets, labels |

---

## Design System Fundamentals

### Color System

```markdown
## Color Token Structure

### Semantic Colors
primary          → Main brand color, CTAs
primary-variant  → Darker/lighter primary for states
secondary        → Secondary actions, accents
background       → App background
surface          → Card backgrounds, elevated surfaces
error            → Error states, destructive actions
on-primary       → Text/icons on primary color
on-background    → Text/icons on background
on-surface       → Text/icons on surface

### Color Palette (60-30-10 Rule)
60% → Neutral/background colors
30% → Secondary/supporting colors
10% → Accent/primary colors

### Dark Mode Considerations
- Don't just invert colors
- Use desaturated colors for dark surfaces
- Reduce contrast slightly (avoid pure white on black)
- Maintain color meaning across modes
```

### Typography Scale

```markdown
## Mobile Typography Guidelines

### iOS Typography (SF Pro)
Large Title   → 34pt, Bold
Title 1       → 28pt, Bold
Title 2       → 22pt, Bold
Title 3       → 20pt, Semibold
Headline      → 17pt, Semibold
Body          → 17pt, Regular
Callout       → 16pt, Regular
Subhead       → 15pt, Regular
Footnote      → 13pt, Regular
Caption 1     → 12pt, Regular
Caption 2     → 11pt, Regular

### Android Typography (Roboto / Material 3)
Display Large  → 57sp
Display Medium → 45sp
Display Small  → 36sp
Headline Large → 32sp
Headline Medium→ 28sp
Headline Small → 24sp
Title Large    → 22sp
Title Medium   → 16sp, Medium
Title Small    → 14sp, Medium
Body Large     → 16sp
Body Medium    → 14sp
Body Small     → 12sp
Label Large    → 14sp, Medium
Label Medium   → 12sp, Medium
Label Small    → 11sp, Medium

### Best Practices
- Maximum 2-3 font families per app
- Minimum body text: 16px (14px absolute minimum)
- Line height: 1.4-1.6× font size for body text
- Support Dynamic Type (iOS) / Font Scaling (Android)
```

### Spacing System

```markdown
## 8-Point Grid System

Base Unit: 8px

### Spacing Scale
spacing-0    → 0px
spacing-1    → 4px   (half unit)
spacing-2    → 8px   (1 unit)
spacing-3    → 12px  (1.5 units)
spacing-4    → 16px  (2 units)
spacing-5    → 24px  (3 units)
spacing-6    → 32px