Mobile App Design Mastery

Production-grade mobile UI design principles adapted from Refactoring UI for Flutter/native apps.

Core Mobile Design Workflow

1. Start with a Screen, Not a Shell

• Design the core functionality of a single screen first
• Don’t start with navigation, tab bars, or app chrome
• Work in greyscale first—add color after hierarchy is clear
• Design for the primary device size, then adapt

2. Establish Mobile Systems

Spacing Scale (dp/logical pixels):

Touch Targets:

Type Scale (sp/pt):

Shadow/Elevation Scale (dp):

3. Build Mobile Hierarchy

Mobile screens have limited space—hierarchy is even more critical.

• Primary: Key action/content (one per screen)
• Secondary: Supporting info (visible but not competing)
• Tertiary: Metadata, timestamps (smallest/lightest)

Key principles:

• Size matters more on mobile—but don’t overdo it
• Use weight and color before increasing size
• Emphasize by de-emphasizing competing elements
• Icons need softer colors to balance with text

4. Design for Touch

• Generous touch targets (minimum 44pt/48dp)
• Adequate spacing between interactive elements
• Visual feedback on press (ripples, scale, opacity)
• Swipe actions for common operations

5. Apply Platform-Aware Depth

• iOS: Subtle shadows, blur/frosted glass, less elevation
• Android: Material elevation system, layered surfaces
• Use depth to indicate interactivity and focus

Mobile Anti-Patterns

NEVER do:

• Touch targets smaller than 44×44
• Text smaller than 11sp (illegible)
• Grey text on colored backgrounds
• Ambiguous spacing between groups
• Full-width buttons edge-to-edge without padding
• Relying on color alone for meaning
• Ignoring safe areas (notch, home indicator)

Reference Files