mobile-app-ui-design

Follow a 5-step process: understand the user context and primary action, structure the layout with thumb-zone placement and F-pattern reading order, apply visual rules for typography, color, and spacing, design an emotional peak moment, then polish states and micro-interactions.

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 for CTAs and key indicators. This creates clear visual hierarchy without overwhelming the user.

Yes, the skill includes implementation notes for React artifacts using Tailwind CSS utility classes, Lucide React for icons, Recharts for data visualization, and CSS transitions for micro-interactions, all designed mobile-first at a 375px 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 celebratory peak moment after core task completion and a closing summary that encourages return.

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

Follow conventions when familiarity builds trust, such as blue palettes in finance apps. Break them deliberately to stand out, but only after understanding what users expect in categories like crypto, health, education, or e-commerce.