iOS Mobile Design

Master iOS Human Interface Guidelines (HIG) and SwiftUI patterns to build polished, native iOS applications that feel at home on Apple platforms.

When to Use This Skill

• Designing iOS app interfaces following Apple HIG

• Building SwiftUI views and layouts

• Implementing iOS navigation patterns (NavigationStack, TabView, sheets)

• Creating adaptive layouts for iPhone and iPad

• Using SF Symbols and system typography

• Building accessible iOS interfaces

• Implementing iOS-specific gestures and interactions

• Designing for Dynamic Type and Dark Mode

Core Concepts

1. Human Interface Guidelines Principles

Clarity: Content is legible, icons are precise, adornments are subtle Deference: UI helps users understand content without competing with it Depth: Visual layers and motion convey hierarchy and enable navigation

Platform Considerations:

• iOS: Touch-first, compact displays, portrait orientation

• iPadOS: Larger canvas, multitasking, pointer support

• visionOS: Spatial computing, eye/hand input

2. SwiftUI Layout System

Stack-Based Layouts:

// Vertical stack with alignment VStack(alignment: .leading, spacing: 12) { Text("Title") .font(.headline) Text("Subtitle") .font(.subheadline) .foregroundStyle(.secondary) }

// Horizontal stack with flexible spacing HStack { Image(systemName: "star.fill") Text("Featured") Spacer() Text("View All") .foregroundStyle(.blue) }

Grid Layouts:

// Adaptive grid that fills available width LazyVGrid(columns: [ GridItem(.adaptive(minimum: 150, maximum: 200)) ], spacing: 16) { ForEach(items) { item in ItemCard(item: item) } }

// Fixed column grid LazyVGrid(columns: [ GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()) ], spacing: 12) { ForEach(items) { item in ItemThumbnail(item: item) } }

3. Navigation Patterns

NavigationStack (iOS 16+):

struct ContentView: View { @State private var path = NavigationPath()

var body: some View {
    NavigationStack(path: $path) {
        List(items) { item in
            NavigationLink(value: item) {
                ItemRow(item: item)
            }
        }
        .navigationTitle("Items")
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

}

TabView (iOS 18+):

struct MainTabView: View { @State private var selectedTab = 0

var body: some View {
    TabView(selection: $selectedTab) {
        Tab("Home", systemImage: "house", value: 0) {
            HomeView()
        }

        Tab("Search", systemImage: "magnifyingglass", value: 1) {
            SearchView()
        }

        Tab("Profile", systemImage: "person", value: 2) {
            ProfileView()
        }
    }
}

}

4. System Integration

SF Symbols:

// Basic symbol Image(systemName: "heart.fill") .foregroundStyle(.red)

// Symbol with rendering mode Image(systemName: "cloud.sun.fill") .symbolRenderingMode(.multicolor)

// Variable symbol (iOS 16+) Image(systemName: "speaker.wave.3.fill", variableValue: volume)

// Symbol effect (iOS 17+) Image(systemName: "bell.fill") .symbolEffect(.bounce, value: notificationCount)

Dynamic Type:

// Use semantic fonts Text("Headline") .font(.headline)

Text("Body text that scales with user preferences") .font(.body)

// Custom font that respects Dynamic Type Text("Custom") .font(.custom("Avenir", size: 17, relativeTo: .body))

5. Visual Design

Colors and Materials:

// Semantic colors that adapt to light/dark mode Text("Primary") .foregroundStyle(.primary) Text("Secondary") .foregroundStyle(.secondary)

// System materials for blur effects Rectangle() .fill(.ultraThinMaterial) .frame(height: 100)

// Vibrant materials for overlays Text("Overlay") .padding() .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))

Shadows and Depth:

// Standard card shadow RoundedRectangle(cornerRadius: 16) .fill(.background) .shadow(color: .black.opacity(0.1), radius: 8, y: 4)

// Elevated appearance .shadow(radius: 2, y: 1) .shadow(radius: 8, y: 4)

Quick Start Component

import SwiftUI

struct FeatureCard: View { let title: String let description: String let systemImage: String

var body: some View {
    HStack(spacing: 16) {
        Image(systemName: systemImage)
            .font(.title)
            .foregroundStyle(.blue)
            .frame(width: 44, height: 44)
            .background(.blue.opacity(0.1), in: Circle())

        VStack(alignment: .leading, spacing: 4) {
            Text(title)
                .font(.headline)
            Text(description)
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .lineLimit(2)
        }

        Spacer()

        Image(systemName: "chevron.right")
            .foregroundStyle(.tertiary)
    }
    .padding()
    .background(.background, in: RoundedRectangle(cornerRadius: 12))
    .shadow(color: .black.opacity(0.05), radius: 4, y: 2)
}

}

Best Practices

• Use Semantic Colors: Always use .primary , .secondary , .background for automatic light/dark mode support

• Embrace SF Symbols: Use system symbols for consistency and automatic accessibility

• Support Dynamic Type: Use semantic fonts (.body , .headline ) instead of fixed sizes

• Add Accessibility: Include .accessibilityLabel() and .accessibilityHint() modifiers

• Use Safe Areas: Respect safeAreaInset and avoid hardcoded padding at screen edges

• Implement State Restoration: Use @SceneStorage for preserving user state

• Support iPad Multitasking: Design for split view and slide over

• Test on Device: Simulator doesn't capture full haptic and performance experience

Common Issues

• Layout Breaking: Use .fixedSize() sparingly; prefer flexible layouts

• Performance Issues: Use LazyVStack /LazyHStack for long scrolling lists

• Navigation Bugs: Ensure NavigationLink values are Hashable

• Dark Mode Problems: Avoid hardcoded colors; use semantic or asset catalog colors

• Accessibility Failures: Test with VoiceOver enabled

• Memory Leaks: Watch for strong reference cycles in closures