StretchLearn Course

Design iOS and Android apps that feel native, from the tab bar to the gesture, using the rules users already know

A complete beginner workflow for platform patterns, touch targets, gesture navigation, adaptive layouts, and the Figma developer handoff

Preview Curriculum Back to Catalog

Beginner9 hr 50 minSelf PacedRegistered

Course Overview

What this course is designed to develop

This course teaches the platform conventions, layout systems, and handoff discipline that make a mobile app feel native instead of like a website in a frame. You will design with the two reference systems professionals use every day, Apple's Human Interface Guidelines and Google's Material Design 3, and learn exactly where they differ so a tab bar, a navigation pattern, and a date picker each look right on their own platform. You will size touch targets to the real 44pt iOS and 48dp Android minimums, respect safe areas and the Dynamic Island, design swipe and edge-back gestures that match system behavior, and build adaptive layouts with constraints and breakpoints that survive notches, split screen, and foldables. You will work in Figma with components, variants, and auto layout, then prepare a spec and asset export that a developer can build from cleanly. By the end you can take an app from a flow sketch to a platform-correct, accessible, responsive set of screens ready to build.

Learning Outcomes

What the learner should be able to understand, build, or execute.

Choose the correct platform pattern for any element by referencing the iOS Human Interface Guidelines and Material Design 3

Size and space every interactive element to the 44pt iOS and 48dp Android touch-target minimums

Lay out screens that respect safe areas, the status bar, the home indicator, and the Dynamic Island

Design tab, stack, and drawer navigation plus swipe and edge-back gestures that match system behavior

Build adaptive layouts with constraints, grids, and breakpoints that hold from small phones to foldables

Produce a Figma file and developer handoff with components, variants, redlines, and exported assets at the right densities

Curriculum Preview

Inside the curriculum: a structured path from fundamentals to execution.

Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.

Module 1

Module 1: Platform Foundations: iOS HIG and Material Design 3

Learn the two reference systems every mobile designer works from and exactly where they diverge. Get the points-versus-density measurement model, the safe-area rules, and the core component differences right, and the rest of the course falls into place because you will always know which platform convention applies.

3 lessons

How mobile design differs from web designContent · 45 min

Preview Enabled

Points, density, and the measurement modelContent · 50 min

LMS Access

Where iOS and Android divergeContent · 50 min

LMS Access

Module 2

Module 2: Touch, Targets, and Safe Areas

Make screens physically usable by a thumb in motion. Master the real touch-target minimums, spacing rules, reachability, and the safe-area and system-chrome constraints that decide where your content is actually allowed to live.

3 lessons

Touch-target sizes and spacingContent · 50 min

LMS Access

Safe areas, notches, and the Dynamic IslandContent · 45 min

LMS Access

Reachability and one-handed useContent · 45 min

LMS Access

Module 3

Module 3: Navigation, Gestures, and Components

Assemble the moving parts of an app: the navigation models users expect, the gestures the OS owns, and the native components that carry your content. Get these right and people can drive your app on autopilot.

3 lessons

Navigation models: tabs, stacks, and drawersContent · 50 min

LMS Access

Gestures the system owns and the ones you can useContent · 50 min

LMS Access

Core components: lists, forms, sheets, and feedbackContent · 50 min

LMS Access

Module 4

Module 4: Adaptive Layout, Accessibility, and Handoff

Make designs survive contact with reality: every screen size, every accessibility setting, and the moment a developer has to build it. This module turns good-looking screens into a robust, buildable product.

3 lessons

Adaptive layouts and breakpointsContent · 50 min

LMS Access

Accessibility: contrast, type scaling, and labelsContent · 50 min

LMS Access

Figma components and the developer handoffContent · 55 min

LMS Access

Built for Application

A complete learning path, not a one-off inspiration hit.

This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.

mobile app designios designandroid designmaterial design 3human interface guidelinesui designfigmaux design