Mobile iOS Design
Parent: Web & Frontend Development · Published reference · snapshot 2026-09-08 · skill frontend-ui/references/mobile-ios-design.md
↓ Facts as markdownall context files
Master iOS Human Interface Guidelines (HIG) and SwiftUI patterns to build polished, native iOS applications that feel at home on Apple platforms.
These notes link each claim to its source. Some citations identify archived research reports that are no longer hosted on this site. A published reference means the content is available; it does not certify independent review or accuracy.Read the editorial policy and follow the sources before relying on a claim.
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. [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#ios-mobile-design]
When to Use This Skill
- Designing iOS app interfaces following Apple HIG [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#when-to-use-this-skill]
- Building SwiftUI views and layouts [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#when-to-use-this-skill]
- Implementing iOS navigation patterns (NavigationStack, TabView, sheets) [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#when-to-use-this-skill]
- Creating adaptive layouts for iPhone and iPad [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#when-to-use-this-skill]
- Using SF Symbols and system typography [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#when-to-use-this-skill]
- Building accessible iOS interfaces [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#when-to-use-this-skill]
- Implementing iOS-specific gestures and interactions [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#when-to-use-this-skill]
- Designing for Dynamic Type and Dark Mode [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#when-to-use-this-skill]
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 [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#1-human-interface-guidelines-principles]
- Platform Considerations: [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#1-human-interface-guidelines-principles]
- iOS: Touch-first, compact displays, portrait orientation [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#1-human-interface-guidelines-principles]
- iPadOS: Larger canvas, multitasking, pointer support [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#1-human-interface-guidelines-principles]
- visionOS: Spatial computing, eye/hand input [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#1-human-interface-guidelines-principles]
2. SwiftUI Layout System
- Stack-Based Layouts: [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#2-swiftui-layout-system]
3. Navigation Patterns
- NavigationStack (iOS 16+): [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#3-navigation-patterns]
- TabView (iOS 18+): [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#3-navigation-patterns]
5. Visual Design
- Colors and Materials: [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#5-visual-design]
- Shadows and Depth: [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#5-visual-design]
Best Practices
- Use Semantic Colors: Always use .primary, .secondary, .background for automatic light/dark mode support [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#best-practices]
- Embrace SF Symbols: Use system symbols for consistency and automatic accessibility [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#best-practices]
- Support Dynamic Type: Use semantic fonts (.body, .headline) instead of fixed sizes [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#best-practices]
- Add Accessibility: Include .accessibilityLabel() and .accessibilityHint() modifiers [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#best-practices]
- Use Safe Areas: Respect safeAreaInset and avoid hardcoded padding at screen edges [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#best-practices]
- Implement State Restoration: Use @SceneStorage for preserving user state [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#best-practices]
- Support iPad Multitasking: Design for split view and slide over [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#best-practices]
- Test on Device: Simulator doesn't capture full haptic and performance experience [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#best-practices]
Common Issues
- Layout Breaking: Use .fixedSize() sparingly; prefer flexible layouts [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#common-issues]
- Performance Issues: Use LazyVStack/LazyHStack for long scrolling lists [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#common-issues]
- Navigation Bugs: Ensure NavigationLink values are Hashable [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#common-issues]
- Dark Mode Problems: Avoid hardcoded colors; use semantic or asset catalog colors [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#common-issues]
- Accessibility Failures: Test with VoiceOver enabled [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#common-issues]
- Memory Leaks: Watch for strong reference cycles in closures [archived source: https://llms-explorer.com/sources/mdb-context-hub/mobile-ios-design/#common-issues]
Where this helps
- Building a new iPhone/iPad app from scratch where the goal is to feel native rather than like a cross-platform port — HIG-driven navigation, SF Symbols, and semantic colors do this out of the box. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Retrofitting Dark Mode and Dynamic Type support into an existing SwiftUI app so it meets App Store accessibility expectations without hardcoded values scattered through the codebase. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Designing an iPad app that must support multitasking (Split View, Slide Over) as well as the phone-sized layout, where a single adaptive layout has to serve both. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Auditing an app before submission for VoiceOver and accessibility compliance ahead of App Store review. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Project ideas
- Build a small utility app that exercises NavigationStack, TabView, and sheet presentation together, to internalize how iOS 16+/18+ navigation patterns compose. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Take an existing fixed-color, fixed-font screen and refactor it to use only semantic colors (.primary/.secondary/.background) and semantic fonts (.body/.headline), then verify it in both Light and Dark Mode and at the largest Dynamic Type size. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Build a reusable SwiftUI component library that wraps SF Symbols with accessibility labels/hints baked in, so every icon button in an app is VoiceOver-usable by default. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Prototype an iPad-only layout using LazyVStack/LazyHStack for a long scrolling list, and stress-test it in Split View at the narrowest supported width. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Antipatterns
- Hardcoding colors and fonts instead of using semantic colors and Dynamic Type-aware fonts, which breaks automatically in Dark Mode and at larger accessibility text sizes. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Using VStack/HStack for long scrolling lists instead of LazyVStack/LazyHStack, which forces SwiftUI to render every row up front and causes visible scroll performance problems. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Skipping .accessibilityLabel()/.accessibilityHint() on icon-only SF Symbol buttons, leaving VoiceOver users with an unlabeled control. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Designing only for iPhone portrait and bolting on iPad support later, instead of designing the adaptive layout from the start. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Known issues
- The Simulator does not reproduce haptic feedback or real device performance, so layout and performance issues can look fine in Simulator and still surface on a physical device. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- NavigationLink values must conform to Hashable, and forgetting this is a common source of hard-to-diagnose navigation bugs. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Strong reference cycles inside SwiftUI closures (especially in view models and callbacks) are a common source of memory leaks that don't show up until an app has been running for a while. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- .fixedSize() and other fixed-layout escape hatches fight the adaptive layout system, and overusing them causes hard-to-debug layout breaks across device sizes. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Children
- iOS Human Interface Guidelines (frontier)
- SwiftUI Patterns (frontier)
- Native iOS Components (frontier)
- Apple Design Principles (frontier)
Frontier under this node: Apple Design Principles, Native iOS Components, SwiftUI Patterns, iOS Human Interface Guidelines