Mobile Design Patterns

Overview

Design mobile experiences that feel native, performant, and intuitive. This skill teaches platform-specific patterns, gesture interactions, and mobile-first design principles.

Core principle: Mobile isn't just "desktop but smaller" - it requires different patterns, priorities, and interactions.

When to Use

Use when:

• Designing mobile apps (iOS, Android, React Native)
• Building mobile-responsive web apps
• Optimizing existing apps for mobile
• Making platform-specific design decisions
• Implementing gesture controls
• Planning mobile navigation

Mobile-First Principles

1. Thumb-Friendly Design

• Primary actions in bottom 1/3 of screen
• Touch targets ≥44px (iOS) / 48px (Android)
• Critical buttons within thumb reach

2. Content Priority

• One primary action per screen
• Progressive disclosure (hide complexity)
• Scrolling > multiple taps

3. Performance Constraints

• Slower CPUs than desktop
• Limited bandwidth
• Battery impact
• Memory constraints

Navigation Patterns

Bottom Tab Navigation (Most Common)

Use for:

• 3-5 top-level sections
• Frequent navigation between sections
• Clear categories

Pattern:

┌─────────────────┐
│   Page Content  │
│                 │
│                 │
├─────────────────┤
│ □ □ □ □ □     │ ← Tab Bar (Bottom)
└─────────────────┘

Best practices:

• 3-5 tabs (not more)
• Icons + labels for clarity
• Highlight active tab
• Don't hide tab bar on scroll (unless content-focused app)

Stack Navigation (Secondary)

Use for:

• Hierarchical content
• Detail views
• Settings/preferences

Pattern:

List → Detail → Sub-detail
[Back] ← [Back] ←

Implementation:

// React Navigation example
<Stack.Navigator>
  <Stack.Screen name="List" component={ListScreen} />
  <Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>

Drawer Navigation (Less Common)

Use for:

• 6+ sections
• Infrequently accessed pages
• User account access

Pattern:

┌─────────────────┐
│ ☰ Title         │ ← Hamburger menu
│                 │
│   Content       │
└─────────────────┘

Tap ☰ → Drawer slides in from left

Best practices:

• Don't hide critical navigation in drawer
• Combine with tab bar for hybrid approach
• Profile/settings often in drawer

Gesture Patterns

Standard Gestures (Follow Platform Conventions)

Gesture	iOS	Android	Use For
Swipe right	Back	Back (sometimes)	Navigate back
Swipe left	Forward/Delete	N/A	Delete item, next
Pull down	Refresh	Refresh	Refresh content
Long press	Context menu	Context menu	Show options
Pinch	Zoom	Zoom	Images, maps
Swipe up from bottom	Home (system)	Home (system)	Avoid conflicts

Custom Gestures (Use Sparingly)

Only add custom gestures when:

• Strongly convention-established (Tinder swipe)
• Central to app experience
• Discoverable through onboarding
• No conflict with platform gestures

Discovery methods:

• Tutorial on first launch
• Animated hints
• Ghost hands/arrows showing gesture
• Progressive disclosure

Component Patterns

Lists & Cards

Mobile list pattern:

┌─────────────────────────┐
│ □ Avatar   Title        │ ← 56-72px height
│            Subtitle     │
│            Meta info  > │
├─────────────────────────┤
│ □ Avatar   Title        │
│            Subtitle     │
│            Meta info  > │
└─────────────────────────┘

Card pattern:

┌─────────────────┐
│  [Image]        │ ← 16:9 or 4:3
├─────────────────┤
│ Title           │ ← Bold, 16-18px
│ Description     │ ← 14px, 2 lines max
│                 │
│ [Action Button] │
└─────────────────┘

Forms (Mobile-Optimized)

Pattern:

• One input per row (full width)
• Large touch targets (48px+ height)
• Clear labels above inputs
• Inline validation (as user types)
• Numeric keyboard for numbers
• Email keyboard for emails
• Next/Done buttons in keyboard

Example:

<Input
  type="email"
  inputMode="email" // Mobile keyboard
  autoComplete="email"
  label="Email"
  error={errors.email}
/>

Modals & Sheets

Bottom Sheet (Preferred on mobile):

┌─────────────────┐
│                 │
│   Main Content  │
│                 │
├─────────────────┤ ← Drag handle
│▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔│
│ Sheet Content   │ ← Slides up from bottom
│                 │
│ [Action]        │
└─────────────────┘

Use bottom sheets for:

• Quick actions
• Short forms
• Confirmations
• Filter/sort options

Full screen modals for:

• Long forms
• Multi-step flows
• Content creation

Responsive Breakpoints

Mobile-first breakpoints:

/* Mobile first (default) */
.component {
  /* Mobile styles */
}

/* Small tablets */
@media (min-width: 640px) {
  .component {
    /* 2-column layout */
  }
}

/* Tablets */
@media (min-width: 768px) {
  .component {
    /* 3-column layout */
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .component {
    /* Full desktop layout */
  }
}

Test on actual devices:

• iPhone SE (smallest common: 375px)
• iPhone Pro Max (largest phone: 428px)
• iPad (768px+)
• Android variations

Performance Patterns

Lazy Loading Images

<img
  src={thumbnailUrl}
  data-src={fullImageUrl}
  loading="lazy"
  alt="Description"
/>

Virtualized Lists

import { VirtualScroll } from 'react-native-virtualized-view'

<VirtualScroll
  data={items}
  renderItem={({item}) => <ItemCard item={item} />}
  estimatedItemSize={80}
/>

Optimize Bundle Size

Mobile budget:

• Initial bundle: <200KB
• Total (with code-splitting): <500KB
• Images: WebP format, lazy load

Techniques:

• Code splitting
• Tree shaking
• Remove unused dependencies
• Dynamic imports

Platform-Specific Guidelines

iOS (Human Interface Guidelines)

Key patterns:

• SF Symbols for icons
• Standard navigation bars (44px)
• System fonts (San Francisco)
• Bottom tab bar for primary nav
• Swipe back gesture
• Pull-to-refresh
• Action sheets for options

Android (Material Design)

Key patterns:

• Material icons
• Floating Action Button (FAB)
• Navigation drawer (optional)
• Bottom navigation (3-5 items)
• Snackbars for feedback
• Material 3 components

React Native (Cross-Platform)

Shared patterns:

• Bottom tabs for main navigation
• Stack navigation for hierarchy
• Platform-specific components when needed
• Shared business logic

Quick Reference

Touch targets: 44px (iOS) / 48px (Android) minimum Text sizes: 16px+ body, 14px+ secondary Spacing: 8px grid system (8, 16, 24, 32, 48) Animations: <300ms (feels instant), avoid jank Load time: <2s initial load Tap response: <100ms visual feedback

Mobile users are impatient. Make interfaces fast, thumb-friendly, and obvious.