14. Design & UI Patterns

Design & UI

Human Interface Guidelines

Apple's HIG provides principles for iOS app design. Key concepts:

• Deference — UI should never compete with content; use translucency, blur, and edge-to-edge displays
• Clarity — Text is legible at every size, icons are precise, adornments are subtle
• Depth — Layers and realistic motion convey hierarchy, vitality, and facilitate understanding

UIKit

UIKit offers comprehensive components for building interfaces programmatically or with Interface Builder:

// Programmatic UI
let stackView = UIStackView()
stackView.axis = .vertical
stackView.spacing = 16
stackView.alignment = .center

let titleLabel = UILabel()
titleLabel.text = "Welcome"
titleLabel.font = UIFont.preferredFont(forTextStyle: .largeTitle)
stackView.addArrangedSubview(titleLabel)

let subtitleLabel = UILabel()
subtitleLabel.text = "Sign in to continue"
subtitleLabel.textColor = .secondaryLabel
stackView.addArrangedSubview(subtitleLabel)

SwiftUI

SwiftUI provides a declarative approach to UI design:

import SwiftUI

struct ProfileView: View {
    @State private var username = ""
    
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "person.circle.fill")
                .font(.system(size: 80))
                .foregroundColor(.blue)
            
            TextField("Username", text: $username)
                .textFieldStyle(.roundedBorder)
                .padding(.horizontal)
            
            Button("Save") {
                // Save action
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

Dark Mode

Support both light and dark appearances:

// Asset catalog: provide light and dark variants
// System colors adapt automatically
view.backgroundColor = .systemBackground
label.textColor = .label
// Custom color
let dynamicColor = UIColor { traitCollection in
    traitCollection.userInterfaceStyle == .dark
        ? UIColor(white: 0.2, alpha: 1)
        : UIColor(white: 0.9, alpha: 1)
}

Dynamic Type & Accessibility

Support different font sizes for accessibility:

// Use preferred fonts
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

// SwiftUI
Text("Hello")
    .font(.body)
    .dynamicTypeSize(...DynamicTypeSize.accessibility3)