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):
| Token | Size | Use Case |
|---|---|---|
| xs | 4 | Micro gaps, icon padding |
| sm | 8 | Tight, within components |
| md | 12 | Related elements |
| base | 16 | Standard padding |
| lg | 24 | Between sections |
| xl | 32 | Major separation |
| 2xl | 48 | Screen margins on tablets |
Touch Targets:
| Platform | Minimum Size |
|---|---|
| iOS | 44×44 pt |
| Android | 48×48 dp |
| Comfortable | 56×56 |
Type Scale (sp/pt):
| Size | Use Case |
|---|---|
| 11-12 | Captions, labels |
| 14 | Body text, default |
| 16 | Emphasized body |
| 18-20 | Subheadings |
| 24 | Screen titles |
| 28-34 | Large titles (iOS style) |
Shadow/Elevation Scale (dp):
| Level | Elevation | Use Case |
|---|---|---|
| 0 | 0 | Flat surfaces |
| 1 | 1-2 | Cards, tiles |
| 2 | 4 | Raised buttons, app bar |
| 3 | 8 | Bottom sheets, dialogs |
| 4 | 16 | Navigation drawers |
| 5 | 24 | Modals |
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
| Topic | File | When to Read |
|---|---|---|
| Visual hierarchy, labels, emphasis | mobile-hierarchy.md | Balancing element importance |
| Spacing, touch targets, layout | mobile-spacing.md | Layout decisions |
| Typography, fonts, readability | mobile-typography.md | Text styling |
| Color, themes, dark mode | mobile-color.md | Color system |
| Shadows, elevation, layers | mobile-depth.md | Adding depth |
| Components, navigation, patterns | mobile-patterns.md | Platform-specific patterns |