mobile-app-ui-design

Follow the 5-step process: understand context, structure the UX first, then apply visual design rules. Use one font family with maximum 4 sizes and 2 weights, apply the 60/30/10 color rule, and create hierarchy through size, weight, and opacity rather than bolding everything.

The 60/30/10 rule allocates 60% of the interface to a neutral base color, 30% to a complementary color, and 10% to a brand accent color for CTAs and key indicators. Use opacity variations of the neutral color for text hierarchy instead of introducing new colors.

Yes, the design principles apply to React Native, Flutter, and SwiftUI interfaces. Implementation notes specifically cover React with Tailwind CSS, Lucide React icons, and Recharts, using a 375px mobile-first baseline.

The Peak-End Rule, from Daniel Kahneman's research, states users remember the most intense moment and the final impression of an experience. Design one peak moment with celebratory feedback and craft a deliberate ending with summary cards and progress affirmation.

Key anti-patterns include using more than 4 font sizes, random spacing values outside the 8-point grid, placing CTAs outside the thumb zone, generic empty states, pure gray shadows on colored backgrounds, and giving all information equal visual weight.