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:

swift
1// Vertical stack with alignment
2VStack(alignment: .leading, spacing: 12) {
3    Text("Title")
4        .font(.headline)
5    Text("Subtitle")
6        .font(.subheadline)
7        .foregroundStyle(.secondary)
8}
9
10// Horizontal stack with flexible spacing
11HStack {
12    Image(systemName: "star.fill")
13    Text("Featured")
14    Spacer()
15    Text("View All")
16        .foregroundStyle(.blue)
17}

Grid Layouts:

swift
1// Adaptive grid that fills available width
2LazyVGrid(columns: [
3    GridItem(.adaptive(minimum: 150, maximum: 200))
4], spacing: 16) {
5    ForEach(items) { item in
6        ItemCard(item: item)
7    }
8}
9
10// Fixed column grid
11LazyVGrid(columns: [
12    GridItem(.flexible()),
13    GridItem(.flexible()),
14    GridItem(.flexible())
15], spacing: 12) {
16    ForEach(items) { item in
17        ItemThumbnail(item: item)
18    }
19}

3. Navigation Patterns

NavigationStack (iOS 16+):

swift
1struct ContentView: View {
2    @State private var path = NavigationPath()
3
4    var body: some View {
5        NavigationStack(path: $path) {
6            List(items) { item in
7                NavigationLink(value: item) {
8                    ItemRow(item: item)
9                }
10            }
11            .navigationTitle("Items")
12            .navigationDestination(for: Item.self) { item in
13                ItemDetailView(item: item)
14            }
15        }
16    }
17}

TabView:

swift
1struct MainTabView: View {
2    @State private var selectedTab = 0
3
4    var body: some View {
5        TabView(selection: $selectedTab) {
6            HomeView()
7                .tabItem {
8                    Label("Home", systemImage: "house")
9                }
10                .tag(0)
11
12            SearchView()
13                .tabItem {
14                    Label("Search", systemImage: "magnifyingglass")
15                }
16                .tag(1)
17
18            ProfileView()
19                .tabItem {
20                    Label("Profile", systemImage: "person")
21                }
22                .tag(2)
23        }
24    }
25}

4. System Integration

SF Symbols:

swift
1// Basic symbol
2Image(systemName: "heart.fill")
3    .foregroundStyle(.red)
4
5// Symbol with rendering mode
6Image(systemName: "cloud.sun.fill")
7    .symbolRenderingMode(.multicolor)
8
9// Variable symbol (iOS 16+)
10Image(systemName: "speaker.wave.3.fill", variableValue: volume)
11
12// Symbol effect (iOS 17+)
13Image(systemName: "bell.fill")
14    .symbolEffect(.bounce, value: notificationCount)

Dynamic Type:

swift
1// Use semantic fonts
2Text("Headline")
3    .font(.headline)
4
5Text("Body text that scales with user preferences")
6    .font(.body)
7
8// Custom font that respects Dynamic Type
9Text("Custom")
10    .font(.custom("Avenir", size: 17, relativeTo: .body))

5. Visual Design

Colors and Materials:

swift
1// Semantic colors that adapt to light/dark mode
2Text("Primary")
3    .foregroundStyle(.primary)
4Text("Secondary")
5    .foregroundStyle(.secondary)
6
7// System materials for blur effects
8Rectangle()
9    .fill(.ultraThinMaterial)
10    .frame(height: 100)
11
12// Vibrant materials for overlays
13Text("Overlay")
14    .padding()
15    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))

Shadows and Depth:

swift
1// Standard card shadow
2RoundedRectangle(cornerRadius: 16)
3    .fill(.background)
4    .shadow(color: .black.opacity(0.1), radius: 8, y: 4)
5
6// Elevated appearance
7.shadow(radius: 2, y: 1)
8.shadow(radius: 8, y: 4)

Quick Start Component

swift
1import SwiftUI
2
3struct FeatureCard: View {
4    let title: String
5    let description: String
6    let systemImage: String
7
8    var body: some View {
9        HStack(spacing: 16) {
10            Image(systemName: systemImage)
11                .font(.title)
12                .foregroundStyle(.blue)
13                .frame(width: 44, height: 44)
14                .background(.blue.opacity(0.1), in: Circle())
15
16            VStack(alignment: .leading, spacing: 4) {
17                Text(title)
18                    .font(.headline)
19                Text(description)
20                    .font(.subheadline)
21                    .foregroundStyle(.secondary)
22                    .lineLimit(2)
23            }
24
25            Spacer()
26
27            Image(systemName: "chevron.right")
28                .foregroundStyle(.tertiary)
29        }
30        .padding()
31        .background(.background, in: RoundedRectangle(cornerRadius: 12))
32        .shadow(color: .black.opacity(0.05), radius: 4, y: 2)
33    }
34}

Best Practices

1. Use Semantic Colors: Always use .primary, .secondary, .background for automatic light/dark mode support
2. Embrace SF Symbols: Use system symbols for consistency and automatic accessibility
3. Support Dynamic Type: Use semantic fonts (.body, .headline) instead of fixed sizes
4. Add Accessibility: Include .accessibilityLabel() and .accessibilityHint() modifiers
5. Use Safe Areas: Respect safeAreaInset and avoid hardcoded padding at screen edges
6. Implement State Restoration: Use @SceneStorage for preserving user state
7. Support iPad Multitasking: Design for split view and slide over
8. 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

Resources

• Human Interface Guidelines
• SwiftUI Documentation
• SF Symbols App
• WWDC SwiftUI Sessions