iOS Design Principles & Human Interface Guidelines

Apple's Design Philosophy

Apple's Human Interface Guidelines (HIG) define how iOS apps should look and feel. Following these guidelines makes your app feel native and increases your chances of App Store approval.

Core Design Principles

1. Clarity

• Text must be legible at every size
• Icons must be precise and meaningful
• Functionality must be obvious from visual design
• Negative space guides focus to important content

2. Deference

• Content is primary — UI supports, never competes with content
• Fluid motion — Animations convey meaning and depth
• Translucency and blur — Provide context without distraction

3. Depth

• Layers and hierarchy — Use visual layers to convey importance
• Transitions — Smooth animations between screens
• Touch feedback — Haptic and visual response to interactions

iOS Navigation Patterns

Tab Bar (Bottom)

The most common iOS navigation pattern:

• 3-5 tabs maximum
• Always visible at the bottom
• Each tab has its own navigation stack
• Active tab highlighted with filled icon

┌─────────────────────┐
│     Content Area     │
│                     │
│                     │
├─────┬─────┬─────┬──┤
│Home │Search│Create│Profile│
└─────┴─────┴─────┴──┘

Navigation Bar (Top)

• Back button (left) — Returns to previous screen
• Title (center) — Current screen name
• Action button (right) — Edit, Share, etc.

Modal Presentation

• Full screen — Replaces current content
• Sheet (partial) — Slides up from bottom
• Alert — Small centered dialog

Typography

iOS uses the San Francisco font family:

| Style | Size | Weight | Use | |-------|------|--------|-----| | Large Title | 34pt | Bold | Screen headers | | Title 1 | 28pt | Regular | Section headers | | Title 2 | 22pt | Regular | Subsection headers | | Title 3 | 20pt | Regular | Card titles | | Body | 17pt | Regular | Main content | | Callout | 16pt | Regular | Secondary content | | Footnote | 13pt | Regular | Labels, captions | | Caption | 12pt | Regular | Timestamps |

Dynamic Type:

iOS supports Dynamic Type — users can change their preferred text size in Settings. Your app should respect this.

Color Guidelines

• System colors adapt to light/dark mode automatically
• Accent color — One primary color for interactive elements
• Semantic colors — Use system-provided colors for backgrounds, labels, separators
• Avoid pure black (#000000) on OLED — use dark gray instead

Key Concepts

• Safe areas — Respect the notch, home indicator, and status bar
• Touch targets — Minimum 44x44 points for tappable elements
• Haptic feedback — Use for confirmations, selections, errors
• Dark mode — Your app MUST support both light and dark modes
• Accessibility — VoiceOver, Dynamic Type, and color contrast support

Common Mistakes

• Custom navigation that doesn't match iOS patterns — users get confused
• Ignoring safe areas — Content hidden behind notch or home indicator
• Tiny touch targets — Buttons that are hard to tap
• No dark mode — App Store reviewers may flag this

App Architecture — Native vs Hybrid (Capacitor)

The Three Approaches

1. Fully Native (Swift/SwiftUI)

• Pros: Best performance, full API access, Apple's recommended approach
• Cons: iOS only, requires Swift knowledge, slower development
• Best for: Performance-critical apps, complex animations, AR/ML apps

2. Hybrid (Capacitor) — Recommended for Waymaker

• Pros: One codebase (web), fast development, access to native APIs via plugins
• Cons: Slightly lower performance, some native features harder to implement
• Best for: Most business apps, content apps, tools, dashboards

3. Cross-Platform Native (React Native/Flutter)

• Pros: Native-like performance, shared codebase, large ecosystems
• Cons: Still need platform-specific code, debugging complexity
• Best for: Apps needing near-native performance on multiple platforms

Why Capacitor for Waymaker

Capacitor lets you wrap your existing web app as a native iOS app:

Your Web App (React/Vite)
        │
        ▼
   Capacitor Shell
        │
        ├── WKWebView (renders your web app)
        ├── Native Bridge (JS ↔ Native communication)
        └── Native Plugins (camera, push, GPS, etc.)

Key Benefits:

1. Use your existing code — The web app you built in Course 6 works immediately
2. Progressive enhancement — Add native features one at a time
3. Plugin ecosystem — 100+ plugins for native functionality
4. Web standards — Use HTML, CSS, JS you already know

The Capacitor Plugin Ecosystem

| Plugin | What It Does | |--------|-------------| | @capacitor/camera | Take photos, access gallery | | @capacitor/geolocation | GPS location | | @capacitor/push-notifications | Remote push notifications | | @capacitor/local-notifications | Scheduled local alerts | | @capacitor/haptics | Haptic feedback (vibration) | | @capacitor/filesystem | Read/write device files | | @capacitor/preferences | Key-value storage | | @capacitor/share | Native share sheet | | @capacitor/splash-screen | Custom launch screen | | @capacitor/status-bar | Control status bar appearance |

When Hybrid Works (and When It Doesn't)

Hybrid is Great For:

• Business/productivity apps
• Content and media apps
• Social apps
• E-commerce
• Dashboards and admin tools
• Forms and data entry

Consider Native For:

• Games (use a game engine instead)
• Camera-heavy apps (Instagram-like filters)
• AR/VR experiences
• Heavy animations (60fps constant)
• Background processing

Pro Tips

• Start with web — Get the app working in the browser first
• Add native features incrementally — Don't try to use all plugins at once
• Test on real devices — The iOS simulator misses performance issues and some features (push notifications)
• Keep bundle size small — Large web apps load slowly in the native shell