iOS Human Interface Guidelines Design Skill
Framework for designing native iOS interfaces that feel intuitive, consistent, and aligned with Apple's design philosophy. Based on Apple's Human Interface Guidelines, the definitive resource for apps that integrate seamlessly with iPhone, iPad, and the Apple ecosystem.
Core Principle
Apple's iOS design philosophy rests on three pillars: clarity (every element legible and purposeful), deference (the interface never overshadows the content it presents), and depth (layering, transitions, and realistic motion convey hierarchy and spatial relationships).
The foundation: The best iOS apps internalize this philosophy rather than following HIG rules mechanically. Native components, system conventions, and platform consistency aren't constraints---they're the reason iOS users trust and enjoy apps that feel like they belong.
Scoring
Goal: 10/10. Score 1 point per satisfied row of the Quick Diagnostic (6 rows), plus up to 4 points for native idiom: +1 semantic colors/text styles throughout (no hardcoded values), +1 system controls over custom reimplementations, +1 standard gestures and meaningful haptics, +1 SF Symbols and correct app-icon shape. Bands: 9-10 = native, accessible, adapts to Dark Mode and Dynamic Type, zero foreign patterns; 5-6 = works but leaks Android idioms or hardcodes color/size; <=3 = fails safe areas, touch targets, or VoiceOver. Always state the score and the specific improvements needed to reach 10/10.
iOS Design Framework
1. Layout & Safe Areas
Core concept: iOS devices have specific screen dimensions, safe area insets, and hardware intrusions (notch, Dynamic Island, home indicator) that every layout must respect.
Key insights:
- Design for the smallest screen first (375pt width, iPhone SE)
- Safe areas protect content from the notch, Dynamic Island, and home indicator---never place interactive elements under them
- Standard content margins: 16-20pt from screen edges; spacing increments: 8 / 16 / 24pt
- Minimum touch target and list row height: 44pt
Product applications:
| Context |
Layout Pattern |
Example |
| Status bar |
20pt classic, 44-54pt on Dynamic Island devices |
Time, signal, battery area |
| Navigation bar |
44pt standard row + ~52pt large title (~96pt total) |
Back button, title, actions |
| Content area |
Flexible, scrollable, respects safe area |
Main app content |
| Tab bar |
49pt height, translucent with blur |
2-5 primary
Ready to use wondelai-ios-hig-design?
|