iOS Human Interface Design Guidelines & Beyond

Design custom icons or mix with system icons, ensuring consistency in size, level of detail, perspective, and stroke weight, avoid replicating Apple products.

Design launch screens to reinforce perceived speed with a plain, static screen that matches the first app screen, avoid branding, use storyboards or static images matching device sizes.

Explore system icons for iOS navigation bars, toolbars, tab bars, and home screen, and how icons convey actions like share, delete, edit, and search.

Explore how navigation bars enable navigation through an information hierarchy and manage content, featuring back buttons, centered titles, right-side actions, and variants like segmented controls.

Explore how search bars, scope bars, and address bars guide user navigation with placeholders, suggestions, and transitions. Compare default, prominent, and minimal styles to optimize search experience in iOS apps.

Explore the status bar at the top of the screen, which displays time, carrier, network, and battery, and follow guidance to avoid custom status bars for readability and consistency.

Use a bottom tab bar with consistent height across orientations, limit to five tabs on iPhone and seven on iPods, and keep the same tab count in portrait and landscape.

Use toolbars when actions won't fit in the navigation bar, especially for more than two actions on iPhone or iPad. Keep them at the bottom and translucent.

Present action sheets to offer task choices in compact and regular environments, with bottom sheet in compact mode, popover in regular mode, a cancel option, and a red destructive action.

Learn how to use the iOS activity view controller to share content with built-in and custom activities, icons, titles, and extensions, and how to tailor which tasks appear.

Explore iOS alerts: their purpose, structure (title, optional message, buttons, text fields), and when to use or avoid them, with two-button design and clear actions.

Explore how a collection view displays media in customizable layouts with image thumbnails, interactivity, gestures, and animations, while enforcing 44 by 44 points touch targets and padding to avoid overdesign.

Explore image views, including displaying photos as images, icon templates, and slideshows, and how to enable user interaction, stretch and scale to match sizes, following Apple's recommendations for consistency.

Display an interactive map view inside your app, supporting zoom, pan, overlays, annotations, and routes, while offering mode switches and consistent color cues.

Explore page view controller options for iOS, including scrolling and page curl styles. Use scrolling for linear content, and curl for a book-like reading experience with navigation and search controls.

Explore how popovers function as transient, iPad-first modal views that reveal additional information or actions from a focus area, with arrow indicators, blur backgrounds, and guidelines for dismissal and sizing.

This lecture explains split views, pairing a primary pane with a secondary pane to display a menu and related content across horizontal and compact environments.

Explore iOS table views by learning plane and group styles, row interactions, and controls like checkmarks, disclosure indicators, and detail disclosure buttons; practice editing, reordering, and deleting rows.

Explore text views with multi-line content, left alignment, system font, and scrolling, then set keyboard types and return-key options with capitalization, autocorrect, and spellchecking.

Learn to load and display rich web content in your app with a web view, supporting in-app preview of emails and sites while enabling optional forward and back navigation.

Explore how system buttons initiate app actions, enable concise verb-based titles and capitalization guidelines, and support four states: default, highlighted, selected, and disabled, in iOS design.

Demonstrate how a detail disclosure button reveals additional details and related functionality for a specific item in a view, accessible by tapping the button in a table row or toolbar.

Learn how info buttons and detail disclosure buttons reveal extra information and configuration options in an app, with dark and light styles, and that there's no tangible difference.

Demonstrates how the add contact button lets users browse existing contacts and insert one into a text field or recipient field, offering a keyboard-free shortcut with an alternative to typing.

Examine how the edit and selection menus present standard commands like copy, cut, paste, and select, and how to add context-appropriate custom commands with gesture support and undo/redo.

Use labels to name UI parts or provide short messages. They suit small amounts of text, stay readable as text size changes, and support bold text for accessibility.

Learn to implement a page control that shows total views and the current one, with optional skip and navigation buttons, and center it at the bottom.

Learn how pickers present one or more scrollable wheels of distinct values, display the current value in the middle, and work best near the edited field or in line.

The date picker uses wheels to select date and time components and offers modes such as date and time, time, date, countdown timer, plus month-year and locale-based options.

Use activity indicators to show ongoing tasks like loading or syncing, with optional labels and toolbar or main view placement. When possible, favor progress bars for quantifiable work.

Describe progress bars that reflect a task’s duration, provide accurate feedback, and use activity indicators for well-defined durations, with two built-in styles and configurable track color for UI consistency.

Display the network activity indicator in the status bar to provide feedback for network access over two seconds; it spins, disappears when finished, and does not allow interaction.

Refresh content controls enable user-initiated updates in a table view, appearing as a specialized activity indicator when the user pulls down, and they are hidden by default.

Explore how segmented controls function as mutually exclusive buttons to filter content, with 44 by 44 point hit areas, equal segment widths, and up to five segments.

Explore iOS sliders: a horizontal track with a draggable thumb, min and max values, and a filled range, plus customizing thumb appearance and end icons for meaning.

Explains how a stepper uses a two-segment control to increase or decrease small values, supports theming and custom images, and advises using it for small adjustments like printer copy counts.

Explore how a switch toggles between two on and off states to control user interface elements, show or hide items, and customize colors or imagery while the size remains fixed.

Explore single-line text fields for usernames and passwords, with a placeholder, icons, and clear buttons; configure keyboard types and secure input; remember multi-line input uses a text view.

Learn when to use a system-wide keyboard extension versus a custom input view, enable and switch keyboards in settings, and provide onboarding with an input accessory view and audible feedback.

Learn how a document provider extension lets other apps access your app's documents, display only context-appropriate items, and expose metadata, export options, and directory navigation.

Design home screen quick actions with 3d touch to launch tasks from the icon. Provide concise titles, icons (prefer system icons), optional subtitles; keep four actions, and update them dynamically.

Use message extensions in Iris to share static content like text, photos, and videos, or interactive content like multiplayer game boards and collaborative takeout orders within conversations.

apply photo editing extensions to modify photos and videos in the Photos app, using filters while preserving originals, and preview edits in a model view with a navigation bar.

Learn to implement share and action extensions that work system-wide, using a single focused task and the system-provided composition for consistency.

Design compact, informative widgets as app extensions that deliver brief updates and single-tap tasks, with fast loading, clear margins, and consistent system styling for the search screen.

Finish the course with confidence as you apply what you learned to start designing great ideas apps.