Mobile UI/UX Design Skill

Expert guidance for creating exceptional mobile user interfaces with platform-appropriate design patterns.

Core Principles

Touch-First Design

• Minimum touch target: 44x44pt (iOS) / 48x48dp (Android)
• Recommended touch target: 48x48pt for better accessibility
• Touch target spacing: Minimum 8pt between interactive elements
• Thumb zone: Place primary actions in bottom 1/3 of screen (easy reach)
• Stretch zone: Secondary actions in middle 1/3
• Avoid zone: Minimize critical actions in top 1/3

Visual Hierarchy

• Use size, weight, and color to establish importance
• Primary action should be immediately obvious
• Limit to 1-2 primary actions per screen
• Use whitespace generously - mobile screens need breathing room

Platform Consistency

• Respect platform conventions (see IOS-GUIDELINES.md and ANDROID-GUIDELINES.md)
• Use native components when possible
• Match system fonts and sizing defaults
• Honor user's accessibility settings (Dynamic Type, font scaling)

Layout & Spacing

Safe Areas

iOS: Account for notch, home indicator, status bar
Android: Account for navigation bar, status bar, display cutouts

React Native:
- Use SafeAreaView or useSafeAreaInsets()
- Never place content behind system UI without explicit design intent

Spacing Scale (8pt grid)

xs:  4pt   - Tight spacing, related elements
sm:  8pt   - Default spacing between elements
md:  16pt  - Section spacing
lg:  24pt  - Major section breaks
xl:  32pt  - Screen-level padding
xxl: 48pt  - Hero spacing

Screen Padding

• Horizontal padding: 16-20pt minimum
• Content should never touch screen edges
• Cards/containers: 12-16pt internal padding

Typography

Size Guidelines

Caption/Label:    11-12pt
Body:             14-17pt (16pt recommended)
Subheadline:      15-18pt
Headline:         17-22pt
Title:            20-28pt
Large Title:      34pt+

Line Height

• Body text: 1.4-1.6x font size
• Headlines: 1.2-1.3x font size
• Minimum line height for readability: 20pt for body text

Best Practices

• Maximum 50-75 characters per line for readability
• Use system fonts for body text (SF Pro, Roboto)
• Limit to 2-3 font weights per screen
• Support Dynamic Type / font scaling

Navigation Patterns

Tab Bar (Bottom Navigation)

• 3-5 items maximum
• Icons + labels for clarity
• Active state clearly differentiated
• Height: 49pt (iOS) / 56dp (Android)
• Place most important destinations here

Stack Navigation

• Clear back button/gesture
• Descriptive titles
• Avoid deep nesting (max 3-4 levels)

Modal Presentation

• Use for focused tasks that interrupt flow
• Always provide clear dismiss action
• Consider sheet presentation for partial modals
• Swipe-to-dismiss for convenience

Gestures

Tap:           Primary selection
Long press:    Secondary actions, context menus
Swipe:         Navigation, list actions, dismiss
Pull down:     Refresh content
Pinch:         Zoom (maps, images)

Common Components

Lists

• Row height: minimum 44pt, recommended 48-72pt
• Use separators or spacing to delineate items
• Swipe actions: max 3 actions per direction
• Pull-to-refresh for dynamic content

Bottom Sheets

• Use for contextual actions and overflow content
• Provide multiple snap points (25%, 50%, 90%)
• Always dismissible via swipe or tap outside
• Don't cover entire screen unless necessary

Buttons

Primary:    Filled, high contrast, single per screen
Secondary:  Outlined or tinted
Tertiary:   Text-only, for less important actions
Destructive: Red/warning color, require confirmation

Minimum height: 44pt
Padding: 16pt horizontal, 12pt vertical
Border radius: 8-12pt (platform dependent)

Forms & Input

• Label above input field
• Placeholder text is NOT a substitute for labels
• Show validation inline, below the field
• Use appropriate keyboard types (email, phone, number)
• Auto-focus first field when appropriate
• Group related fields visually

Cards

• Consistent border radius (8-16pt)
• Subtle shadow or border for elevation
• Tap entire card for primary action
• Keep content scannable

Loading & Feedback

Loading States

• Skeleton screens over spinners when possible
• Show progress for operations >2 seconds
• Optimistic updates for better perceived performance
• Never block entire UI unnecessarily

Haptic Feedback

• Use sparingly for meaningful interactions
• Success/failure confirmation
• Selection changes
• Button presses (subtle)

Error States

• Clear, actionable error messages
• Suggest how to fix the problem
• Don't use technical jargon
• Provide retry option when applicable

Dark Mode

• Support both light and dark modes
• Don't just invert colors - design intentionally
• Reduce contrast slightly in dark mode (avoid pure white on black)
• Test all states in both modes
• Use semantic colors that adapt automatically

Performance Considerations

Perceived Performance

• Show UI skeleton immediately
• Lazy load below-fold content
• Prefetch likely next screens
• Use placeholder images

Animation Guidelines

• 60fps target (16ms per frame)
• Duration: 200-300ms for most transitions
• Use native driver for animations
• Reduce motion for accessibility setting

Accessibility

Visual

• Minimum contrast ratio: 4.5:1 (body), 3:1 (large text)
• Don't rely on color alone for meaning
• Support Dynamic Type / font scaling up to 200%
• Test with bold text enabled

Screen Readers

• All interactive elements need accessible labels
• Group related content logically
• Announce dynamic content changes
• Test with VoiceOver (iOS) and TalkBack (Android)

Motor

• Large touch targets (48pt+)
• Adequate spacing between targets
• Support for switch control
• Avoid time-limited interactions

See ACCESSIBILITY.md for comprehensive accessibility checklist.

React Native Specific

Component Libraries

• Consider: React Native Paper (Material), NativeBase, Tamagui, Gluestack
• Use react-native-reanimated for performant animations
• react-native-gesture-handler for native gestures

Performance

• Use FlatList/SectionList for long lists (never ScrollView)
• Memoize expensive components
• Use useCallback/useMemo appropriately
• Profile with React DevTools and native profilers

Styling

• StyleSheet.create for static styles
• Consider styled-components or Tamagui for dynamic theming
• Use platform-specific styles when needed:

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 } },
      android: { elevation: 4 },
    }),
  },
});

Quick Reference

Examples

Good: Accessible, Touch-Friendly Button

<Pressable
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed
  ]}
  accessibilityRole="button"
  accessibilityLabel="Submit form"
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
  <Text style={styles.buttonText}>Submit</Text>
</Pressable>

const styles = StyleSheet.create({
  button: {
    minHeight: 48,
    paddingHorizontal: 24,
    paddingVertical: 14,
    backgroundColor: '#007AFF',
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonPressed: {
    opacity: 0.8,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 17,
    fontWeight: '600',
  },
});

Bad: Common Mistakes

// Too small touch target
<TouchableOpacity style={{ padding: 4 }}>
  <Icon size={16} />
</TouchableOpacity>

// Missing accessibility
<View onTouchEnd={handlePress}>
  <Text>Click me</Text>
</View>

// Placeholder as label
<TextInput placeholder="Email" />