Mobile App Design Cheat Sheet

Updated 2026-04-29

Next Topic: Mobile App Distribution and Beta Testing Cheat Sheet

Mobile app design encompasses the UI/UX principles, interaction patterns, and visual guidelines that create intuitive, accessible, and engaging experiences on smartphones and tablets. Unlike desktop design, mobile demands thumb-friendly layouts, gesture-driven interactions, and awareness of constraints like limited screen space and variable network conditions. Effective mobile design balances platform conventions (iOS Human Interface Guidelines with Liquid Glass in iOS 26, Material Design 3) with user expectations for smooth animations, instant feedback, and one-handed usability—while increasingly incorporating AI-adaptive interfaces and privacy-by-design principles to meet the rising bar users set in 2026.

What This Cheat Sheet Covers

This topic spans 24 focused tables and 224 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core UX PrinciplesTable 2: Navigation PatternsTable 3: Touch Gestures & InteractionsTable 4: Layout Patterns & Responsive DesignTable 5: Typography & ReadabilityTable 6: Color & AccessibilityTable 7: Spacing & GridsTable 8: Icons & Visual ElementsTable 9: Buttons & Interactive ElementsTable 10: Forms & Input FieldsTable 11: UX Writing & MicrocopyTable 12: Navigation & WayfindingTable 13: Feedback & Loading StatesTable 14: Push Notifications & AlertsTable 15: Onboarding & First-Time UXTable 16: Dialogs & OverlaysTable 17: Motion & AnimationTable 18: Platform-Specific ConventionsTable 19: Responsive & Adaptive DesignTable 20: AI & Adaptive UXTable 21: Design Systems & TokensTable 22: Performance & OptimizationTable 23: Ethical Design & Anti-PatternsTable 24: Accessibility Features

Table 1: Core UX Principles

Principle	Example	Description
Thumb zone optimization	Primary actions within bottom 1/3 of screen	• Place critical buttons in the natural thumb reach area (lower center) to minimize hand strain • avoid top corners for frequent actions.
Progressive disclosure	Show 3-5 menu items initially, hide advanced options	Reveal complexity gradually through layered navigation or expandable sections to prevent overwhelming users on small screens.
Touch target sizing	Minimum 44×44px (iOS) or 48×48dp (Android)	Ensure buttons and interactive elements meet minimum tap target sizes with adequate spacing (8-12px) to prevent accidental taps—WCAG 2.2 sets 24×24 CSS px minimum.
Content prioritization	Hero image + CTA above fold	• Display the most important content first without scrolling • use visual hierarchy to guide attention through size, contrast, and placement.
Immediate feedback	Button color change + haptic on tap	Provide instant visual, auditory, or haptic confirmation for every interaction to reassure users their action was registered.
Forgiving input	Auto-format phone numbers, inline validation	Reduce user effort with smart defaults, autocomplete, and real-time error correction rather than punishing mistakes.

Table 1: Core UX Principles

Principle	Example	Description
Thumb zone optimization	Primary actions within bottom 1/3 of screen	• Place critical buttons in the natural thumb reach area (lower center) to minimize hand strain • avoid top corners for frequent actions.
Progressive disclosure	Show 3-5 menu items initially, hide advanced options	Reveal complexity gradually through layered navigation or expandable sections to prevent overwhelming users on small screens.
Touch target sizing	Minimum 44×44px (iOS) or 48×48dp (Android)	Ensure buttons and interactive elements meet minimum tap target sizes with adequate spacing (8-12px) to prevent accidental taps—WCAG 2.2 sets 24×24 CSS px minimum.
Content prioritization	Hero image + CTA above fold	• Display the most important content first without scrolling • use visual hierarchy to guide attention through size, contrast, and placement.
Immediate feedback	Button color change + haptic on tap	Provide instant visual, auditory, or haptic confirmation for every interaction to reassure users their action was registered.
Forgiving input	Auto-format phone numbers, inline validation	Reduce user effort with smart defaults, autocomplete, and real-time error correction rather than punishing mistakes.