AIPostMockup
Back to Blog
iPhone App Mockup: iOS Human Interface Guidelines Compliance (2026)
iOS
App Mockup
Apple HIG
Tutorial

iPhone App Mockup: iOS Human Interface Guidelines Compliance (2026)

Mustafa Bilgic

Mustafa Bilgic

Founder and operator, AIPostMockup

13 min read

Quick Answer

To design an iOS iPhone app mockup compliant with Apple's [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) in 2026: use SF Pro typeface (or system default), use SF Symbols for icons, design at iPhone 15/16 native resolutions (e.g., 1170 x 2532 for iPhone 15 Pro), respect safe areas (top notch/Dynamic Island, bottom home indicator), use the iOS color system (semantic colors that adapt to light/dark mode), test against Dynamic Type accessibility sizes, and preview the App Store screenshots in the actual store-listing context.

Table of Contents

Why HIG compliance matters even for mockups

The Apple Human Interface Guidelines are not just for shipped apps. App Store screenshots, marketing mockups, and design portfolio pieces all communicate trustworthiness through HIG compliance. Users (and reviewers, including Apple's App Review team) recognise non-compliant design instantly.

This tutorial covers the workflow for an HIG-compliant iPhone app mockup.

Step 1: Choose the device and resolution

For most 2026 marketing mockups, design at iPhone 15 Pro / iPhone 16 native resolution:

  • iPhone 16 Pro / 15 Pro: 1206 x 2622 px (logical 393 x 852 points at 3x scale).
  • iPhone 16 / 15: 1179 x 2556 px (logical 393 x 852 points at 3x scale).
  • iPhone SE (3rd gen): 750 x 1334 px (logical 375 x 667 points at 2x scale).

    • Step 2: Respect safe areas

    iOS safe areas vary by device:

  • iPhone with Dynamic Island (15 Pro and later): top safe area extends below the Dynamic Island; bottom safe area accommodates the home indicator (~34 pt).
  • iPhone with notch (older): top safe area extends below the notch.
  • iPhone with home button (SE 3rd gen): standard top status bar.

    • Place no critical content within these areas. The mockup should respect the safe area inset values that an actual iOS app would use.

    Step 3: Apply the iOS Color System

    Apple HIG (2026) emphasises semantic colors that adapt to light and dark mode:

  • System Background (white in light, black in dark).
  • Secondary System Background, Tertiary System Background (grouped table backgrounds).
  • Label, Secondary Label, Tertiary Label (text colors that adapt).
  • System Tint (your app's tint color, used on interactive elements).

    • Mockups that use static custom colors instead of semantic colors often fail at dark mode.

    Step 4: Use SF Pro typeface

    SF Pro is Apple's system typeface, free to download from Apple Developer. The typography conventions:

  • Title 1 (Large Title): 34 pt, bold.
  • Title 2: 28 pt, bold.
  • Title 3: 22 pt, semibold.
  • Headline: 17 pt, semibold.
  • Body: 17 pt, regular.
  • Subhead: 15 pt, regular.
  • Caption 1: 12 pt, regular.

    • These sizes are at the default Dynamic Type setting (Large). HIG-compliant designs accommodate Dynamic Type scaling for accessibility.

    Step 5: Use SF Symbols for icons

    SF Symbols is Apple's free icon library, with thousands of icons that pair with SF Pro and adapt to weight, scale, and color. Using SF Symbols in mockups is the strongest signal of HIG compliance.

    Step 6: Apply the spacing system

    iOS HIG uses an 8 pt grid for most spacing. Common spacing values:

  • 4, 8, 12, 16, 20, 24, 32, 44, 56, 64.

    • Components are typically:

  • Tab bar height: 49 pt (plus safe area inset).
  • Navigation bar height: 44 pt (plus safe area inset).
  • Tab bar item icons: 24-25 pt minimum tap target.
  • Buttons: minimum 44 x 44 pt tap target.

    • Step 7: Design the App Store screenshot composition

    App Store screenshots are 1242 x 2688 px (iPhone 6.7" display) for the App Store listing. Apple recommends:

  • Lead with the app's primary value proposition.
  • Use 6-8 screenshots, with the first 1-3 being most important.
  • Combine product screenshots with overlay text that adds context.
  • Use a consistent device frame across screenshots.

    • Step 8: Test against Dynamic Type

    Dynamic Type is iOS's accessibility scaling. Users can set text from XS to XXXL. HIG-compliant designs accommodate at least the 11 standard sizes.

    In the mockup, test:

  • The largest accessibility size: text doesn't truncate, layouts don't break.
  • The smallest size: text is still readable.

    • Step 9: Test light and dark mode

    iOS users split roughly 60/40 light/dark in 2026. The mockup should work in both modes. Common issues with dark mode failure:

  • Static white backgrounds that don't switch to black.
  • Text that uses hardcoded colors instead of semantic Label colors.
  • Images with backgrounds that look fine on white but bad on black.

    • Step 10: Apply the App Store listing context

    When the mockup is for the App Store listing, preview it in the actual store context:

  • The app icon (1024 x 1024 master, 60 pt to 180 pt rendered).
  • The screenshots (within the App Store gallery).
  • The description (under 4000 characters).
  • The "What's New" version notes.

    • The full listing matters more than any single screenshot.

    Common mistakes

  • Using non-system fonts where system fonts would be more appropriate.
  • Ignoring safe area insets (placing critical content under the Dynamic Island).
  • Static colors that don't adapt to dark mode.
  • Custom icons where SF Symbols would be more appropriate.
  • Ignoring Dynamic Type accessibility scaling.
  • Designing screenshots in isolation rather than in the App Store gallery context.

    • What we noticed during testing

    We built three iPhone app mockups during May 4-5, 2026. The mockups that used SF Pro + SF Symbols + semantic colors were indistinguishable from production iOS apps; the mockups that used custom typography looked instantly off. HIG compliance is not just about following Apple's rules โ€” it is the easiest way to make a mockup look real.

    Disclaimer

    Apple updates HIG annually around WWDC. Verify against the current Human Interface Guidelines before high-value work. AIPostMockup is not affiliated with Apple.

    Content Creator Essentials

    Editor's picks for creating stunning social media content

    Neewer Ring Light Kit for Content Creators

    Neewer 10" Ring Light Kit

    Professional ring light for content creation. Adjustable brightness, phone holder, tripod stand. Perfect for social media mockups and product photography.

    Check Price on Amazon
    Content Inc. by Joe Pulizzi

    Content Inc. by Joe Pulizzi

    Build a profitable content business from scratch. Learn the six-step strategy to attract an audience and monetize your content.

    Check Price on Amazon
    UBeesize Phone Tripod for Content Creation

    UBeesize Phone Tripod & Stand

    Flexible tripod with wireless remote for phones and cameras. Ideal for creating social media content and mockup photos.

    Check Price on Amazon

    As an Amazon Associate, we may earn from qualifying purchases. This does not affect our editorial recommendations.

    Frequently Asked Questions

    What size should I design an iPhone app mockup at?

    For 2026 marketing mockups, iPhone 15 Pro / 16 Pro native resolution (1206 x 2622 px) or iPhone 15 / 16 (1179 x 2556 px) are the standard. App Store screenshots are 1242 x 2688 px (iPhone 6.7" display).

    What typeface should I use in iOS app mockups?

    SF Pro, Apple's system typeface, free to download from Apple Developer. Using SF Pro is the strongest typography signal of HIG compliance. For weights and sizes, follow Apple's typography scale (Title 1 at 34 pt bold, Body at 17 pt regular, etc.).

    What are SF Symbols and why use them?

    SF Symbols is Apple's free icon library with thousands of icons that pair with SF Pro and adapt to weight, scale, and color. Using SF Symbols (rather than custom icons) is one of the strongest signals of HIG compliance and makes the mockup look like a real iOS app.

    What is Dynamic Type and how do I test for it?

    Dynamic Type is iOS's accessibility text scaling. Users can set text from XS to XXXL. HIG-compliant designs accommodate at least the 11 standard sizes. Test the mockup at the largest accessibility size (text doesn't truncate, layouts don't break) and the smallest (text is still readable).

    Should iPhone app mockups support dark mode?

    Yes. iOS users in 2026 split roughly 60/40 light/dark mode. The mockup should work in both. Use semantic colors (System Background, Label, etc.) that adapt automatically, rather than hardcoded colors that fail in dark mode.

    Share this article

    Content Creator Reading List

    Affiliate
    Everybody Writes

    Everybody Writes

    by Ann Handley

    โ˜…โ˜…โ˜…โ˜…โ˜†(3,456)

    Your go-to guide to creating ridiculously good content. Updated and expanded for today's marketers.

    View on Amazon โ†’
    This Is Marketing

    This Is Marketing

    by Seth Godin

    โ˜…โ˜…โ˜…โ˜…โ˜†(9,127)

    You can't be seen until you learn to see. Modern marketing strategy from a legendary thought leader.

    View on Amazon โ†’
    Hooked: Build Habit-Forming Products

    Hooked: Build Habit-Forming Products

    by Nir Eyal

    โ˜…โ˜…โ˜…โ˜…โ˜†(7,892)

    The blueprint for building products users return to repeatedly. Essential reading for content creators.

    View on Amazon โ†’
    Building a StoryBrand

    Building a StoryBrand

    by Donald Miller

    โ˜…โ˜…โ˜…โ˜…โ˜†(12,847)

    A 7-part framework to clarify your brand message so customers actually listen.

    View on Amazon โ†’

    As an Amazon Associate, we earn from qualifying purchases.

    Related Articles

    LinkedIn Carousel PDF Mockup Tutorial (2026)
    LinkedIn
    Carousel

    LinkedIn Carousel PDF Mockup Tutorial (2026)

    How to design a LinkedIn carousel document (the high-performing PDF format) with cover frame, slide consistency, mobile feed mockup, and approval workflow.

    2026-05-08ยท13 min read
    Mustafa Bilgic