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