| name | mobile-design |
| description | Mobile-specific design guidelines - iOS Human Interface Guidelines, Material Design 3, gesture navigation, haptic feedback, adaptive layouts, thumb zones. Use when designing mobile apps or evaluating mobile-specific patterns. |
Mobile Design
Every design decision is a mobile decision first. More than half your users are on phones. If you design for desktop and then "adapt" for mobile, you're designing for the minority and degrading the experience for the majority. Start with the phone. The desktop version is the adaptation.
When to Use This Skill
Use when you need:
- iOS or Android platform-specific guidance
- Gesture navigation patterns
- Touch target sizing
- Adaptive layout strategy
- Platform decision (native patterns vs. cross-platform)
iOS Human Interface Guidelines (Key Points)
Four Core Principles
- Clarity - Clean, uncluttered layouts. Ample white space.
- Deference - Interface guides without competing with content.
- Depth - Layers, shadows, motion create hierarchy.
- Consistency - Uniform design language. Predictable interactions.
Key Specs
| Element | Spec |
|---|
| Touch targets | Minimum 44x44 points |
| Navigation | Bottom tab bars, labeled back buttons |
| Safe areas | Respect notch, Dynamic Island, home indicator |
| Typography | SF Pro, Dynamic Type support required |
| Tab bar items | 3-5 items maximum |
iOS 26 (2025): Liquid Glass
Most significant visual redesign since 2013. Translucent, rounded elements with optical glass properties. Elements adapt dynamically to light and content.
Material Design 3 (Key Points)
Core Systems
- Color: 5 key colors → 13-tone palettes. Dynamic Color from wallpaper (Material You).
- Typography: Role-based scale (display, headline, title, body, label).
- Shape: Component corner rounding system. Different shapes for emphasis levels.
M3 Expressive (2025)
Backed by 46 research studies, 18,000+ participants. Users preferred Expressive designs AND found them more usable. More emotional range and brand expression.
Key M3 Components
- Buttons: 4 emphasis levels (filled, tonal, outlined, text)
- Navigation: Bottom nav, nav rail, nav drawer (responsive)
- Cards: Elevated, filled, outlined variants
Gesture Navigation
| Gesture | iOS | Android | Use For |
|---|
| Swipe from edge | Back navigation | Back navigation | Primary navigation |
| Pull down | Refresh, dismiss | Refresh | Content update |
| Long press | Context menu | Context menu | Secondary actions |
| Pinch | Zoom | Zoom | Media, maps |
| Swipe on item | Quick actions | Quick actions | Delete, archive, etc. |
Haptic Feedback
| Type | When to Use |
|---|
| Light impact | Toggle, selection change |
| Medium impact | Confirming an action |
| Heavy impact | Significant state change |
| Success | Task completion |
| Warning | Approaching limit |
| Error | Failed action |
Every interaction should have intentional, subtle tactile response.
Thumb Zone
The bottom third of the screen is most accessible one-handed. Place primary actions there.
| Zone | Reachability | Place Here |
|---|
| Bottom center | Easy | Primary CTA, bottom nav, FAB |
| Middle | Comfortable | Content, secondary actions |
| Top corners | Hard | Non-critical info, settings |
Adaptive Layouts
Design for multiple device classes with a single codebase:
- Phone (compact): Single column, bottom nav, full-screen modals
- Tablet (medium): Two-pane layout, nav rail, inline modals
- Foldable (adaptive): Flex mode, table-top mode, split content
Related Skills
interaction-patterns - Navigation and overlay patternsaccessibility-wcag - Touch targets, gestures, screen reader supportdesign-systems - Responsive token architecture
