Mobile App Design Cheat Sheet

Table 1: Core UX Principles

The foundational rules that separate a mobile app people enjoy from one they delete. Most trace back to the physical reality of a phone — a thumb reaching across a small screen, held one-handed, on a flaky connection — so principles like thumb-zone placement, generous touch targets, immediate feedback, and forgiving input keep showing up. Get these right and everything downstream feels easier.

Table 2: Navigation Patterns

How users move around your app, and the choice has real consequences for discoverability. A bottom tab bar keeps 3-5 destinations within thumb reach and always visible, while a hamburger menu hides options to reduce clutter — the recurring trade-off in this table. Match the pattern to your structure: flat and frequently used wants tabs; deep and occasional can tolerate a drawer.

Table 3: Touch Gestures & Interactions

Fingers are the only input device, so the gesture vocabulary is the language of mobile interaction. Users arrive already fluent in tap, swipe, pinch, and long-press from every other app — which means honoring those expectations matters as much as inventing anything new. Note how several rows flag discoverability: hidden gestures like double-tap need a visible backup for critical actions.

Table 4: Layout Patterns & Responsive Design

How content is arranged on screen and how that arrangement flexes as the screen grows. The single-column stack is mobile's default, but cards, grids, and masonry layouts organize denser content — and the responsive patterns near the end (column drop, mostly fluid, layout shifter) describe how a design gracefully reshapes itself from phone to foldable to tablet.

Table 5: Typography & Readability

Text is most of what users actually read on a phone, often at arm's length in bright sunlight, so the numbers here matter. Body text at 16px and up, generous line height, a clear type scale, and enough contrast keep content comfortable — and the 16px input-field rule has a sneaky practical payoff: it stops iOS from auto-zooming when a field gains focus.

Table 6: Color & Accessibility

Color carries meaning, but it can't carry it alone — that's the thread running through this table. WCAG contrast ratios keep text legible, semantic tokens make theming and dark mode painless, and the repeated reminder to pair color with icons or text ensures the roughly 8% of users with color blindness aren't left guessing what red means.

Table 7: Spacing & Grids

Consistent spacing is what makes an interface feel calm and intentional rather than haphazard. The 8-point grid is the backbone — sizing every margin, padding, and gap in multiples of 8 — which scales cleanly across screen densities and stops designers from sprinkling arbitrary values. The rest of these rules build on it: column grids, gutters, and minimum gaps between tap targets.

Table 8: Icons & Visual Elements

Icons and imagery do a lot of communicating in the limited space of a phone screen. Consistent sizing keeps them crisp, pairing icons with short labels fixes their notorious discoverability problem, and the imaging rows cover the practical side — aspect ratios, retina assets, and modern formats like WebP that shrink files without visible loss. Empty-state and placeholder visuals round it out by making absence and loading feel intentional.

Table 9: Buttons & Interactive Elements

The tappable controls users act through, each with its own job. Visual hierarchy is the organizing idea — one bold primary button per screen, quieter secondary styles for everything else — and the rest covers the selection controls (toggles, checkboxes, radios, segmented controls) along with the sizing and state rules that keep them comfortable to hit and obvious to read.

Table 10: Forms & Input Fields

Typing on a phone is tedious, so good form design is really about reducing how much the user has to do. Full-width fields, the right contextual keyboard, autofill, smart defaults, and breaking long forms into steps all chip away at friction — and inline validation that catches errors as you go beats a wall of red after you hit submit. Small touches like persistent labels and biometric login add up to far higher completion.

Table 11: UX Writing & Microcopy

The tiny bits of text — button labels, error messages, empty states, tooltips — that quietly shape whether an app feels clear or confusing. The recurring lesson is specificity: "Send message" beats "Submit," and an error that says what happened and what to do next beats "Something went wrong." A couple of memorable frameworks here, Avoid-Explain-Resolve and the 3 Cs, give you a repeatable way to write copy that actually helps.

Table 12: Navigation & Wayfinding

Where the previous navigation table covered overall structure, this one is about the smaller signposts that help users know where they are and how to get around. Back buttons, search bars, badges, breadcrumbs, and page-indicator dots all answer the same quiet question — "where am I, and how do I move from here?" — and getting them right keeps people oriented inside deep or content-heavy apps.

Table 13: Feedback & Loading States

Waiting feels shorter when the app shows it's working, and these patterns manage that perception. Skeleton screens and progress indicators fill the gap during loads, optimistic UI makes actions feel instant by updating before the server confirms, and toasts, snackbars, and haptics confirm that something happened — with empty and error states catching the moments when there's nothing to show or something went wrong.

Table 14: Push Notifications & Alerts

Notifications are a privilege users grant and quickly revoke, so this table is as much about restraint as it is about reach. Asking for permission only after you've shown value, offering granular category controls, and favoring genuinely useful transactional messages over guilt-driven marketing are what keep people from disabling everything — the recurring warning that one pushy notification can cost you all of them.

Table 15: Onboarding & First-Time UX

First impressions decide whether someone sticks around, and the patterns here are about earning that commitment instead of demanding it. Letting users feel the value before forcing a sign-up, introducing features in context rather than in an upfront slideshow, and justifying permission requests before the system dialog all push retention up — with a hard-won rule throughout: never make onboarding feel like a wall, and always offer "Skip."

Table 16: Dialogs & Overlays

Surfaces that appear over the main screen, ranked roughly by how much they interrupt. Alert dialogs block everything and should be reserved for genuinely critical, irreversible actions; bottom sheets and popovers offer contextual choices without stopping the user cold; and snackbars and toasts sit at the gentle end, flashing brief feedback that fades on its own. Choosing the right level of interruption is the whole skill here.

Table 17: Motion & Animation

Motion guides attention and adds polish, but only when it's quick and purposeful — most of these guidelines are really about restraint. Duration and easing rules keep transitions feeling natural rather than sluggish, shared-element and container transforms preserve spatial context between screens, and the reduced-motion entry is a non-negotiable: always offer a calmer alternative for users prone to motion sickness.

Table 18: Platform-Specific Conventions

iOS and Android each have deeply ingrained conventions, and fighting them makes an app feel foreign. This table pairs the two platforms side by side — safe-area insets versus edge-to-edge WindowInsets, iOS large titles versus Material navigation, and Apple's new Liquid Glass against Material 3's dynamic color — so you can respect each platform's expectations instead of forcing one design onto both.

Table 19: Responsive & Adaptive Design

One app now has to look right on a compact phone, a tablet, and a foldable that changes shape mid-use. The tools here — breakpoints and window size classes, fluid layouts, density-aware assets, and master-detail patterns that unfold as space grows — let a single design adapt rather than break, while dynamic type scaling makes sure it still works when users crank up their system font.

Table 20: AI & Adaptive UX

The newest frontier, where interfaces stop being static and start responding to the individual. Predictive content, layouts that reorder around how someone actually uses the app, conversational and agentic flows that act on the user's behalf — these are the 2026 patterns reshaping mobile UX. The constant caveat across every row is trust: explain the AI's reasoning, keep a manual override, and let people see and edit what drives their personalization.

Table 21: Design Systems & Tokens

How design stays consistent across a whole product — and across iOS, Android, and web at once. Design tokens are the central idea: named values for color, spacing, and type stored in one place, so changing a token updates every surface that references it. The token hierarchy, component libraries, and automated design-to-code handoff described here are what let large teams move fast without the design drifting apart.

Table 22: Performance & Optimization

Performance is a design concern, not just an engineering one — a sluggish or bloated app gets abandoned before its visuals ever matter. Lazy loading, modern image compression, and app-size trimming cut what users wait on, while offline-first architecture, a steady 60fps frame target, and prefetching keep the experience smooth even on mid-range hardware and shaky networks.

Table 23: Ethical Design & Anti-Patterns

A catalog of the manipulative tricks to avoid — confirm shaming, roach motels, hidden costs, forced continuity — alongside the privacy-first practices that build genuine trust. Beyond being wrong, many of these dark patterns are now outright illegal, with GDPR, the EU Digital Markets Act, and FTC enforcement cited throughout, making this table as much a compliance checklist as an ethics one.

Table 24: Accessibility Features

Designing so everyone can actually use your app, including people who rely on screen readers, larger fonts, or switch controls. Meaningful labels for VoiceOver and TalkBack, logical focus order, dynamic type support, and the recurring principle of conveying state through more than color make the difference between an app that's usable by all and one that quietly locks people out — and increasingly, these are legal requirements, not just good practice.