Mobile Design

Mobile Design System

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.

⚠️ CRITICAL: ASK BEFORE ASSUMING

You MUST Ask If Not Specified:

• Platform: iOS only? Android only? Both?
• Framework: React Native/Expo? Flutter?
• Navigation: Tab-based? Stack? Drawer?
• Offline: Required? Nice-to-have? Not needed?

📱 Platform Decision Matrix

When to Unify vs Diverge

                    UNIFY (same on both)          DIVERGE (platform-specific)
                    ───────────────────           ──────────────────────────
Business Logic      ✅ Always                     -
Data Layer          ✅ Always                     -
Core Features       ✅ Always                     -

Navigation          -                             ✅ iOS: edge swipe, Android: back button
Gestures            -                             ✅ Platform-native feel
Icons               -                             ✅ SF Symbols vs Material Icons
Date Pickers        -                             ✅ Native pickers feel right
Modals/Sheets       -                             ✅ iOS: bottom sheet vs Android: dialog
Typography          -                             ✅ SF Pro vs Roboto (or custom)

Quick Reference: Platform Defaults

🧠 Mobile UX Psychology

Fitts' Law for Touch

Desktop: Cursor is precise (1px)
Mobile:  Finger is imprecise (~7mm contact area)

→ Touch targets MUST be 44-48px minimum
→ Important actions in THUMB ZONE (bottom of screen)
→ Destructive actions AWAY from easy reach

Thumb Zone (One-Handed Usage)

┌─────────────────────────────┐
│      HARD TO REACH          │ ← Navigation, menu, back
│        (stretch)            │
├─────────────────────────────┤
│      OK TO REACH            │ ← Secondary actions
│       (natural)             │
├─────────────────────────────┤
│      EASY TO REACH          │ ← PRIMARY CTAs, tab bar
│    (thumb's natural arc)    │ ← Main content interaction
└─────────────────────────────┘
        [  HOME  ]

Mobile-Specific Cognitive Load

⚡ React Native/Expo Performance

FlatList Optimization

// ✅ CORRECT: Memoized renderItem + React.memo wrapper
const ListItem = React.memo(({ item }: { item: Item }) => (
  <View style={styles.item}>
    <Text>{item.title}</Text>
  </View>
));

const renderItem = useCallback(
  ({ item }: { item: Item }) => <ListItem item={item} />,
  []
);

// ✅ CORRECT: FlatList with all optimizations
<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}  // Stable ID, NOT index
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={5}
/>

Animation Performance

GPU-accelerated (FAST):     CPU-bound (SLOW):
├── transform               ├── width, height
├── opacity                 ├── top, left, right, bottom
└── (use these ONLY)        ├── margin, padding
                            └── (AVOID animating these)

📝 Pre-Development Checklist

Before Starting ANY Mobile Project

• Platform(s) confirmed (iOS/Android/Both)
• Framework chosen (Expo recommended)
• Navigation pattern decided
• Offline requirements clarified
• Design system tokens defined

Before Every Screen

• Touch targets ≥ 44pt
• Primary actions in thumb zone
• Safe area insets handled
• Both orientations considered (or locked)

Before Release

• Performance profiled
• Memory usage checked
• Battery impact tested
• Accessibility verified

🔗 Recommended Mobile Stack

❌ Mobile Anti-Patterns