Mobile App Design Principles

Design Is How It Works

Steve Jobs said, "Design is not just what it looks like. Design is how it works." Mobile app design is about creating an experience where users accomplish their goals with minimal friction. Pretty screens that confuse users are bad design. Plain screens that work effortlessly are good design.

This guide covers the principles that separate professional mobile apps from amateur ones.

Principle 1: Clarity Over Cleverness

Every screen should answer three questions instantly:

1. Where am I?
2. What can I do here?
3. How do I do it?

If a user has to think about any of these, the design has failed.

Practical Application

• Use standard patterns. Tab bars, back buttons, pull-to-refresh, and swipe-to-delete all behave the way users expect. Do not reinvent navigation unless you have an exceptionally good reason.
• Label things clearly. An icon without a label is a guessing game. If you must use icon-only buttons, use universally recognized symbols (search magnifier, gear for settings, plus for create).
• Show state. Empty states, loading states, error states, and success states all need distinct visual treatment. A blank screen with no explanation looks broken.

Empty States

The empty state is the first thing new users see. Make it useful:

Bad:  [blank screen]
Good: [illustration] + "No workouts yet. Tap + to log your first session."

The empty state should explain what goes here and how to fill it.

Principle 2: Reduce Cognitive Load

The human brain can hold roughly seven items in working memory. Mobile screens are small. Every element you add competes for attention.

Techniques

Progressive disclosure: Show essential information first. Hide details behind taps. A contact card shows name and phone number. Tap to reveal email, address, notes, and history.

Chunking: Group related items visually. Use spacing, dividers, or cards to create clear sections. A settings screen with 20 ungrouped options is overwhelming. The same 20 options in five labeled groups is manageable.

Defaults and suggestions: Pre-fill forms with smart defaults. If most users are in the United States, default the country picker to "United States." If the app tracks calories, suggest the most common meal times.

Remove unnecessary choices. Every choice costs mental energy. If 90% of users choose the same option, make it the default and hide the alternative in settings.

Principle 3: Design for Thumbs

People hold their phones in one hand and navigate with their thumb. The "thumb zone" research by Steven Hoober shows that the bottom-center of the screen is the easiest area to reach.

Layout Implications

• Put primary actions at the bottom. Tab bars, floating action buttons, and confirmation buttons belong in the bottom third of the screen.
• Put secondary actions at the top. Settings, filters, and edit buttons can go in the top navigation bar because they are used less frequently.
• Avoid tiny tap targets. Apple recommends 44x44 point minimum. Google recommends 48x48 dp. Buttons smaller than this cause mis-taps and frustration.
• Use bottom sheets instead of modals. A bottom sheet slides up from the bottom of the screen, keeping it within thumb reach. A centered modal requires users to reach up to interact with it.

Navigation Placement

Top of screen (hard to reach):
  - Screen title
  - Search (if secondary)
  - Edit/Settings buttons

Middle of screen (comfortable):
  - Content
  - Lists
  - Cards

Bottom of screen (easy to reach):
  - Tab bar (primary navigation)
  - Floating action button (primary action)
  - Bottom sheet triggers

Principle 4: Visual Hierarchy

Not everything on a screen is equally important. Visual hierarchy guides the user's eye to what matters most.

Tools for Hierarchy

Size: Larger elements are noticed first. Your main headline should be bigger than supporting text.

Weight: Bold text draws attention before regular text.

Color: A bright accent color against a neutral background creates a focal point. Use your accent color for primary actions (buttons, links, selected states) and neutral colors for everything else.

Spacing: More space around an element makes it stand out. A button with generous padding looks more important than one crammed against other elements.

Position: Items at the top of a list or the center of a screen get more attention.

The Squint Test

Squint at your screen design until it blurs. Can you still tell what the primary action is? If everything blurs into a uniform gray, your hierarchy is too flat. If one or two elements stand out, your hierarchy is working.

Principle 5: Consistent Design Language

Consistency means that the same action looks the same everywhere in your app. This reduces learning time and builds trust.

What to Keep Consistent

• Colors: Define a palette and stick to it. One primary color, one or two accent colors, a set of neutrals.
• Typography: Use one font family with two or three weights. Heading sizes, body text, and caption text should be the same on every screen.
• Spacing: Use a spacing scale (4, 8, 12, 16, 24, 32, 48). Apply it consistently for padding and margins.
• Border radius: If cards have 12px rounded corners, all cards should have 12px rounded corners. Mixing radii looks unpolished.
• Interactions: If swiping left deletes on one list, it should delete on every list. If tapping a card opens details on one screen, it should do the same on every screen.

Design Tokens

Define your design system as a set of tokens:

const theme = {
  colors: {
    background: '#0D0D0F',
    surface: '#111114',
    border: '#1E1E24',
    primary: '#FF4500',
    textPrimary: '#FFFFFF',
    textSecondary: '#9CA3AF',
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
  borderRadius: {
    sm: 8,
    md: 12,
    lg: 16,
    xl: 20,
  },
  fontSize: {
    caption: 12,
    body: 14,
    subtitle: 16,
    title: 20,
    headline: 28,
  },
};

Reference these tokens everywhere instead of hardcoding values.

Principle 6: Feedback and Responsiveness

Users need confirmation that their actions registered. Without feedback, they tap again, which causes double submissions, confusion, and frustration.

Types of Feedback

Immediate visual feedback: Buttons should have a pressed state (opacity change, scale animation, or color shift). This confirms the tap registered.

Loading indicators: If an action takes more than 300ms, show a loading state. Spinners for short waits, skeleton screens for content loading, progress bars for long operations.

Success confirmation: After completing an action, confirm it. A toast notification ("Saved!"), a checkmark animation, or navigating to the result screen all work.

Error handling: When something goes wrong, tell the user what happened and what they can do about it. "Something went wrong" is useless. "Could not save. Check your internet connection and try again." is helpful.

Animations

Animations are not decoration. They serve a purpose:

• Transitions show the relationship between screens (a card expanding into a detail view)
• Loading animations indicate progress
• Micro-interactions confirm actions (a heart icon bouncing when liked)

Keep animations under 300ms. Anything longer feels sluggish. Use spring physics for natural-feeling motion.

Principle 7: Accessibility

Accessibility is not optional. It is a legal requirement in many jurisdictions, and it makes your app better for everyone.

Minimum Accessibility Checklist

• Text contrast: At least 4.5:1 ratio for body text, 3:1 for large text
• Touch targets: Minimum 44x44 points
• Screen reader support: All images have accessibility labels. All buttons have clear labels. Custom components work with VoiceOver (iOS) and TalkBack (Android).
• Font scaling: Support dynamic type. Test your layouts at 200% font size.
• Color independence: Do not use color alone to convey information. A green checkmark should also include a check icon or text label.

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Delete workout"
  accessibilityRole="button"
  accessibilityHint="Removes this workout from your history"
>
  <TrashIcon />
</TouchableOpacity>

Principle 8: Platform Conventions

iOS and Android have different design conventions. Respecting them makes your app feel native on each platform.

Key Differences

| Element | iOS | Android | |---------|-----|---------| | Back navigation | Swipe from left edge | Hardware/software back button | | Primary action | Top right or bottom center | Floating action button (bottom right) | | Tab bar | Bottom | Bottom (Material 3) or top (older apps) | | Switches | iOS-style toggle | Material toggle | | Date picker | Spinning wheel | Calendar view | | Alert buttons | Cancel (left), Action (right, bold) | Cancel (left), Action (right) |

Using Platform.select() in React Native lets you apply platform-specific styles while sharing the same component logic.

Principle 9: Onboarding

You have about 30 seconds to show a new user the value of your app. Waste that time with unnecessary tutorials, and they leave.

Effective Onboarding Patterns

• Progressive onboarding: Teach features as users encounter them, not all at once upfront.
• Value-first onboarding: Show the result before asking for effort. A budgeting app might show a sample budget view before asking users to add their accounts.
• Minimal data collection: Ask only what you need to personalize the experience. Every extra form field reduces completion rates by 5-10%.
• Skip option: Always let users skip onboarding. Some users prefer to explore on their own.

Anti-Patterns

• Five-screen tutorial carousels (nobody reads them)
• Requiring account creation before showing any value
• Tooltips pointing at every UI element
• Permission requests on the first screen (ask in context, when the feature needs it)

Principle 10: Information Density

Mobile screens are small, but that does not mean they should be empty. Find the right density for your audience and content type.

Low density (lots of whitespace, large elements): Good for consumer apps, meditation apps, and content that benefits from focus.

Medium density (balanced): Good for most productivity apps, social apps, and commerce.

High density (compact, data-rich): Good for professional tools, dashboards, and apps where users need to see many items at once.

The key is consistency. Do not mix high-density data tables with low-density hero sections. Pick a density and commit.

Design Tools for Indie Developers

You do not need to be a professional designer to create good app designs:

• Figma: Industry standard for UI design. Free tier is generous.
• Excalidraw: Quick wireframes and sketches
• Mobbin: Browse real app screenshots for inspiration
• Untitled UI: Free Figma component library
• Realtime Colors: Generate and preview color palettes

The Design Review Checklist

Before shipping any screen, verify:

• [ ] The primary action is immediately visible
• [ ] Empty, loading, and error states are designed
• [ ] Tap targets are at least 44x44 points
• [ ] Color contrast meets accessibility standards
• [ ] Design tokens are used consistently (no hardcoded values)
• [ ] Animations are under 300ms and serve a purpose
• [ ] The screen works at the largest system font size
• [ ] Platform conventions are respected

Good design is invisible. When users do not notice the design, it means they were too busy accomplishing their goals. That is the highest compliment.