132 lines
4.6 KiB
Markdown
132 lines
4.6 KiB
Markdown
# 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`
|