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):