Mobile Design

Overview

Phase 1: Platform Analysis

1. Identify target platforms (iOS, Android, both)
2. Choose framework (React Native, Flutter, SwiftUI, or cross-platform)
3. Review platform-specific design guidelines
4. Define navigation architecture
5. Map offline requirements

Framework Selection Decision Table

Phase 2: Design Implementation

1. Build component library with platform variants
2. Implement navigation (tab bar, stack, drawer)
3. Handle safe areas and notches
4. Add gesture recognizers
5. Implement responsive layouts for phone/tablet

Platform-Specific HIG Compliance

Apple Human Interface Guidelines

safeAreaInsets

label

secondaryLabel

systemBackground

.sheet

.fullScreenCover

Material Design (Android)

Cross-Platform Pattern Decision Table

Safe Area Handling

React Native

import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

function Screen() {
  const insets = useSafeAreaInsets();
  return (
    <View style={{ flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom }}>
      {/* Content */}
    </View>
  );
}

Flutter

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: // Content
    ),
  );
}

SwiftUI

var body: some View {
  VStack {
    // Content automatically respects safe areas
  }
  .ignoresSafeArea(.keyboard) // Only ignore keyboard if needed
}

Gesture Navigation Patterns

Touch Target Rules

Phase 3: Platform Polish

1. Platform-specific animations and transitions
2. Haptic feedback integration
3. App icon and launch screen
4. Dark mode and Dynamic Type support
5. App store metadata and screenshots

Responsive Layout Decision Table

React Native Responsive

import { useWindowDimensions } from 'react-native';

function useResponsive() {
  const { width } = useWindowDimensions();
  return {
    isPhone: width < 768,
    isTablet: width >= 768 && width < 1024,
    isDesktop: width >= 1024,
    columns: width < 768 ? 1 : width < 1024 ? 2 : 3,
  };
}

Flutter Responsive

class ResponsiveLayout extends StatelessWidget {
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) return MobileLayout();
        if (constraints.maxWidth < 1200) return TabletLayout();
        return DesktopLayout();
      },
    );
  }
}

Offline-First Architecture

Implementation Checklist

• Network status detection and UI indicator
• Local database for all critical data
• Operation queue for pending writes
• Retry logic with exponential backoff
• Conflict detection and resolution strategy
• Cache invalidation policy
• Sync status indicator in UI
• Graceful degradation for network-only features

App Store Guidelines Summary

Performance Targets

Anti-Patterns / Common Mistakes

Documentation Lookup (Context7)

mcp__context7__resolve-library-id

mcp__context7__query-docs

• react-native

  — for component API, navigation, or platform-specific modules

• flutter

  — for widget catalog, state management, or platform channels

Integration Points

ui-ux-pro-max

ui-design-system

canvas-design

ux-researcher-designer

senior-frontend

deployment

performance-optimization

Skill Type