alain.bagmi/skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
skills/mobile-app-ui-design/INDEX.md

4.6 KiB
Raw Permalink Blame History

Codebase Index

Overview

This repository contains a comprehensive mobile app UI/UX design skill and reference guide focused on creating professional, polished mobile interfaces.

File Structure

mobile-app-ui-design/
├── SKILL.md                      # Mobile App UI/UX Design Skill Guide
├── references/
│   └── industry-conventions.md   # Industry-Specific Design Reference
├── INDEX.md                      # This file
└── README.md                     # Documentation & Installation

SKILL.md

Mobile App UI/UX Design Skill

A comprehensive guide for designing high-quality mobile app interfaces following proven design principles from top-tier apps.

Key Sections:

  • Core Philosophy (lines 10-18): User-centric design approach
  • Design Process (lines 20-96): 5-step framework
    • Step 1: Understand Context (lines 23-27)
    • Step 2: Structure First - UX Lens (lines 29-37)
    • Step 3: Visual Design - UI Lens (lines 39-76)
      • Typography (lines 41-46)
      • Color System - 60/30/10 Rule (lines 48-56)
      • Spacing - 8-Point Grid (lines 58-64)
      • Shadows (lines 66-69)
      • Visual Cues & Imagery (lines 71-77)
    • Step 4: Design for Emotion - Peak-End Rule (lines 79-87)
    • Step 5: Polish & Details (lines 89-96)
  • Smart Patterns (lines 98-124): User-stage personalization, search, status tracking, categories
  • Anti-Patterns to Avoid (lines 126-136): Common design mistakes
  • Implementation Notes (lines 138-149): Technical guidance for React/Tailwind

Design Principles Summary:

  • One font family, max 4 sizes, 2 weights
  • 60/30/10 color rule
  • 8-point grid spacing system
  • Soft shadows matched to backgrounds
  • Thumb-zone primary actions
  • Emotional feedback loops
  • Peak-end rule application

references/industry-conventions.md

Industry Conventions & Emotional Design Reference

Deep dive into industry-specific design languages and psychological principles for emotional design.

Key Sections:

  • Industry-Specific Design Languages (lines 3-55)

    • AI/Tech (lines 7-11)
    • Crypto/Web3 (lines 13-17): Phantom case study
    • Finance/Banking (lines 19-23): Revolut case study
    • Health/Wellness (lines 25-29): Ahead case study
    • Sleep/Meditation (lines 31-34)
    • Education/Learning (lines 36-39): Duolingo case study
    • Fitness (lines 41-44)
    • Productivity (lines 46-49)
    • E-commerce/Food (lines 51-54)

  • Emotional Design Principles (lines 59-120)

    • Peak-End Rule (lines 60-96): Nobel Prize research by Daniel Kahneman
    • Emotional Feedback Loops (lines 98-103)
    • Three Strategic Principles from Spotify (lines 105-120)
      • The Trojan Horse: Hide complexity
      • The Vanity Mirror: Identity-based sharing
      • The Comfort Trap: Consistency as moat

  • Design Process for Client/Product Work (lines 124-152)

    • Phase 1: Discovery & Inspiration (lines 126-129)
    • Phase 2: UI Direction (lines 131-135)
    • Phase 3: UX Structure (lines 137-144)
    • Phase 4: Combine UI + UX (lines 146-148)
    • UI vs UX lens separation (lines 150-152)

Key Insights:

  • Industry conventions build familiarity vs. breaking them stands out
  • Peak-end rule: users remember the most intense moment + final impression
  • Emotional feedback > functional feedback
  • Separate UI and UX research lenses

Quick Reference Guide

When to Use This Skill

  • Designing mobile app screens
  • Creating app mockups
  • Building mobile UI components
  • Improving existing mobile designs
  • Creating onboarding flows
  • Designing mobile navigation
  • Building React Native/Flutter/SwiftUI prototypes

Core Design Framework

  1. Understand → Context, user, primary action, industry conventions
  2. Structure → User flow, MVP elements, thumb zone, F-pattern
  3. Visual Design → Typography, color (60/30/10), spacing (8pt grid), shadows
  4. Emotion → Peak moment, ending, feedback loops
  5. Polish → Micro-interactions, states, accessibility

Design Laws Applied

  • 60/30/10 Color Rule: 60% neutral, 30% complementary, 10% accent
  • 8-Point Grid: All spacing divisible by 8 or 4
  • Peak-End Rule: Users remember peak + ending moments
  • Thumb Zone: Primary actions in bottom 1/3 of screen
  • F-Pattern: Natural reading/scanning order
  • Typography Hierarchy: Max 4 sizes, 2 weights, opacity for hierarchy

Implementation Tech Stack

  • React (for artifacts)
  • Tailwind CSS (utility classes)
  • Lucide React (iconography)
  • Recharts (data visualization)
  • CSS transitions (micro-interactions)
  • Mobile-first design (375px baseline)

Tags

mobile-ui ux-design emotional-design design-system react-native flutter swiftui tailwind design-principles app-design