Files

T

Anthony Cardinale 34bd90e30d Initial release: swift-front skill with Apple HIG integration

Combines frontend-design aesthetics with swiftui-pro correctness,
grounded in Apple's Human Interface Guidelines (134 articles).

Includes curated HIG reference files for typography, color, layout,
materials, motion, icons, and components, plus full HIG JSON data
for deep lookups.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-25 07:52:07 -04:00

3.8 KiB

Raw Permalink Blame History

HIG: Layout

Source: Apple HIG — Layout

Best Practices

Group related items using negative space, background shapes, colors, materials, or separators
Give essential information sufficient space — don't crowd with nonessential details
Extend content to fill screen/window edges — backgrounds and artwork should be full-bleed
Scrollable layouts should continue to bottom and sides of device screen
Controls (sidebars, tab bars) appear ON TOP of content, not on the same plane

Visual Hierarchy

Use Liquid Glass material for controls/navigation — distinct from content layer
Use scroll edge effects (not backgrounds) to transition between content and control areas
Place items in reading order (top-to-bottom, leading-to-trailing) — most important near top/leading
Align components for easier scanning — alignment communicates organization
Use progressive disclosure for hidden content (disclosure controls, partial item display)
Provide enough space around controls — crowded controls are hard to distinguish

Adaptability

Handle these variations:

Different screen sizes, resolutions, color spaces
Portrait/landscape orientations
Dynamic Island, camera controls
External displays, Display Zoom, resizable iPad windows
Dynamic Type text-size changes
RTL layout, internationalization

Use SwiftUI layout or Auto Layout for adaptive interfaces. Respect safe areas, margins, and guides.

Guides & Safe Areas

Layout guides: Rectangular regions for positioning/aligning content
Safe areas: Regions not covered by bars, Dynamic Island, camera housing
Always respect safe areas — content outside feels wrong and may be hard to use

iOS

Support both portrait and landscape (or commit to one)
Full-bleed game interfaces accommodating corner radius, sensor housing, Dynamic Island
Avoid full-width buttons — respect system margins, match hardware curvature
Keep status bar visible unless immersive experience

iPadOS

Windows freely resizable — account for full range of sizes
Defer compact view as long as possible — hide tertiary columns first
Test at common system sizes (halves, thirds, quadrants)
Consider convertible tab bar (sidebar <-> tab bar)

visionOS

Center important content and controls in windows
Keep content within window bounds (system controls are OUTSIDE bounds)
Use ornaments for controls outside the window
Space interactive components with centers at least 60pt apart

watchOS

Extend content edge-to-edge — bezel provides natural padding
Max 3 glyph buttons or 2 text buttons side-by-side

Key Device Dimensions (Current Models)

Device	Points (portrait)	Pixels	Scale
iPhone 17 Pro Max	440x956	1320x2868	@3x
iPhone 17 Pro	402x874	1206x2622	@3x
iPhone Air	420x912	1260x2736	@3x
iPhone 16 Pro Max	440x956	1320x2868	@3x
iPhone 16	393x852	1179x2556	@3x
iPhone SE	375x667	750x1334	@2x
iPad Pro 12.9"	1024x1366	2048x2732	@2x
iPad Pro 11"	834x1194	1668x2388	@2x
iPad Air 13"	1024x1366	2048x2732	@2x
iPad Air 11"	820x1180	1640x2360	@2x
iPad mini 8.3"	744x1133	1488x2266	@2x

Size Classes

Device Type	Portrait	Landscape
All iPads	Regular W, Regular H	Regular W, Regular H
iPhone Pro Max/Plus/Air	Compact W, Regular H	Regular W, Compact H
iPhone Pro/standard/mini	Compact W, Regular H	Compact W, Compact H

tvOS Grid Spacing

All grids: 40pt horizontal spacing, 100pt minimum vertical spacing.

Columns	Unfocused Content Width
2	860 pt
3	560 pt
4	410 pt
5	320 pt
6	260 pt

3.8 KiB Raw Permalink Blame History