366 lines
9.9 KiB
Markdown
366 lines
9.9 KiB
Markdown
# Design Style Guide
|
|
|
|
Match visual design to app category and target audience for cohesive user experience.
|
|
|
|
## Style Selection Principle
|
|
|
|
> **The visual style must match the app's purpose and audience.**
|
|
> A finance app should feel trustworthy, not playful.
|
|
> A children's app should feel fun, not corporate.
|
|
|
|
## Style Selection Matrix
|
|
|
|
| App Category | Visual Style | Color Palette | Typography | Interaction |
|
|
|--------------|--------------|---------------|------------|-------------|
|
|
| Utility/Tool | Minimalist | Neutral + 1 accent | Clean sans-serif | Direct, efficient |
|
|
| Finance/Banking | Professional Trust | Blue/Green/Navy | Conservative | Secure, deliberate |
|
|
| Health/Wellness | Calm & Natural | Soft greens, earth tones | Rounded, friendly | Gentle, encouraging |
|
|
| Kids (3-5) | Playful Simple | Bright primary colors | Large, rounded | Big targets, forgiving |
|
|
| Kids (6-12) | Fun & Engaging | Vibrant, varied | Bold, readable | Gamified feedback |
|
|
| Social/Entertainment | Expressive | Brand-driven | Dynamic | Gesture-rich |
|
|
| Productivity | Clean & Focused | Minimal, high contrast | Professional | Keyboard-friendly |
|
|
| E-commerce | Conversion-focused | Brand + CTA colors | Scannable | Quick actions |
|
|
| Gaming | Immersive | Theme-driven | Stylized | Custom gestures |
|
|
|
|
## Detailed Style Profiles
|
|
|
|
### Minimalist / iOS-like (Utility Apps)
|
|
|
|
**When to use**: Tools, utilities, calculators, file managers, settings apps
|
|
|
|
**Visual Characteristics**:
|
|
|
|
| Element | Specification |
|
|
|---------|---------------|
|
|
| Colors | 2-3 colors max, neutral base |
|
|
| Whitespace | Generous, 24-48dp margins |
|
|
| Typography | Single font family, clear hierarchy |
|
|
| Icons | Line-based, consistent stroke |
|
|
| Shadows | Subtle or none |
|
|
| Borders | Thin (1dp) or none |
|
|
| Shapes | Subtle corners (8-12dp) |
|
|
|
|
**Interaction Style**:
|
|
- Direct manipulation
|
|
- Immediate feedback
|
|
- No unnecessary animations
|
|
- Efficient task completion
|
|
|
|
**Color Palette**:
|
|
|
|
| Role | Light Mode | Dark Mode |
|
|
|------|------------|-----------|
|
|
| Background | #FAFAFA | #1C1C1E |
|
|
| Surface | #FFFFFF | #2C2C2E |
|
|
| Primary | #007AFF | #0A84FF |
|
|
| Text | #000000 | #FFFFFF |
|
|
| Secondary | #8E8E93 | #8E8E93 |
|
|
|
|
**Reference Apps**: iOS Settings, Apple Notes, Google Calculator
|
|
|
|
---
|
|
|
|
### Professional Trust (Finance/Business)
|
|
|
|
**When to use**: Banking, investment, enterprise, B2B applications
|
|
|
|
**Visual Characteristics**:
|
|
|
|
| Element | Specification |
|
|
|---------|---------------|
|
|
| Colors | Blues, greens, navy (trust colors) |
|
|
| Whitespace | Structured, grid-based |
|
|
| Typography | Formal, conservative weights |
|
|
| Icons | Filled or outlined, consistent |
|
|
| Data visualization | Clear, accurate charts |
|
|
| Security indicators | Prominent locks, badges |
|
|
|
|
**Interaction Style**:
|
|
- Confirmatory (double-check important actions)
|
|
- Deliberate (not rushed)
|
|
- Secure-feeling
|
|
- Clear feedback on transactions
|
|
|
|
**Color Palette**:
|
|
|
|
| Role | Color | Name |
|
|
|------|-------|------|
|
|
| Primary | #00695C or #1565C0 | Teal 800 / Blue 800 |
|
|
| Secondary | #37474F | Blue Grey 800 |
|
|
| Accent | #FFC107 | Amber |
|
|
| Background | #ECEFF1 | Blue Grey 50 |
|
|
| Success | #2E7D32 | Green 800 |
|
|
| Error | #C62828 | Red 800 |
|
|
|
|
**Key Patterns**:
|
|
- Balance summaries prominent
|
|
- Transaction history easily scannable
|
|
- Secure entry for sensitive data
|
|
- Biometric authentication prompts
|
|
|
|
**Reference Apps**: Banking apps, Trading platforms, Enterprise tools
|
|
|
|
---
|
|
|
|
### Calm & Wellness (Health Apps)
|
|
|
|
**When to use**: Meditation, fitness tracking, health monitoring, therapy
|
|
|
|
**Visual Characteristics**:
|
|
|
|
| Element | Specification |
|
|
|---------|---------------|
|
|
| Colors | Soft, muted, natural |
|
|
| Whitespace | Abundant (breathing room) |
|
|
| Typography | Rounded, friendly fonts |
|
|
| Shapes | Organic, soft corners (16dp+) |
|
|
| Animation | Gentle, slow transitions |
|
|
| Imagery | Nature, soft gradients |
|
|
|
|
**Interaction Style**:
|
|
- Encouraging, not demanding
|
|
- Progress-oriented
|
|
- Gentle reminders
|
|
- Celebration of achievements
|
|
|
|
**Color Palette**:
|
|
|
|
| Role | Color | Name |
|
|
|------|-------|------|
|
|
| Primary | #4CAF50 | Green 500 |
|
|
| Secondary | #81C784 | Green 300 |
|
|
| Tertiary | #B2DFDB | Teal 100 |
|
|
| Background | #F1F8E9 | Light Green 50 |
|
|
| Text | #33691E | Light Green 900 |
|
|
| Accent | #FFB74D | Orange 300 |
|
|
|
|
**Key Patterns**:
|
|
- Progress rings and charts
|
|
- Streak tracking
|
|
- Motivational messages
|
|
- Quiet notification style
|
|
|
|
**Reference Apps**: Headspace, Calm, Apple Fitness
|
|
|
|
---
|
|
|
|
### Playful & Kid-Friendly (Children's Apps)
|
|
|
|
**When to use**: Educational games, children's content, family apps
|
|
|
|
#### Ages 3-5
|
|
|
|
**Visual Characteristics**:
|
|
|
|
| Element | Specification |
|
|
|---------|---------------|
|
|
| Colors | Bright, saturated primary colors |
|
|
| Touch targets | 56dp minimum, 64dp recommended |
|
|
| Shapes | Very rounded (full radius) |
|
|
| Typography | Large (18sp+ minimum), simple fonts |
|
|
| Icons | Large, colorful, recognizable |
|
|
| Animation | Frequent, rewarding |
|
|
|
|
**Interaction Style**:
|
|
- Simple gestures only (tap, drag)
|
|
- No multi-finger gestures
|
|
- Forgiving error handling
|
|
- Immediate, multi-sensory feedback (sound + visual + haptic)
|
|
- No text-only buttons
|
|
|
|
**Color Palette**:
|
|
|
|
| Role | Color | Name |
|
|
|------|-------|------|
|
|
| Primary | #F44336 | Red 500 |
|
|
| Secondary | #FFEB3B | Yellow 500 |
|
|
| Tertiary | #2196F3 | Blue 500 |
|
|
| Background | #FFFFFF | White or soft pastels |
|
|
| Accent | #4CAF50 | Green 500 |
|
|
|
|
#### Ages 6-12
|
|
|
|
**Visual Characteristics**:
|
|
|
|
| Element | Specification |
|
|
|---------|---------------|
|
|
| Colors | Vibrant, varied palette |
|
|
| Touch targets | 48dp minimum |
|
|
| Shapes | Rounded but can be varied |
|
|
| Typography | Bold, readable, can include text |
|
|
| Icons | Stylized, character-driven |
|
|
| Animation | Gamified, achievement-based |
|
|
|
|
**Interaction Style**:
|
|
- Can introduce some complexity
|
|
- Gamification elements
|
|
- Progress and rewards
|
|
- Some text is acceptable
|
|
|
|
**Key Patterns for All Kids Apps**:
|
|
- Icon-based navigation (no text-only)
|
|
- Home button always visible
|
|
- Back navigation clear
|
|
- Parent gate for settings (math problem, hold button)
|
|
- Multi-sensory feedback
|
|
- Encouraging error states (no punishment)
|
|
- Joint engagement opportunities with parents
|
|
|
|
**Reference Apps**: PBS Kids, Khan Academy Kids, Duolingo ABC
|
|
|
|
---
|
|
|
|
### Expressive & Social (Entertainment Apps)
|
|
|
|
**When to use**: Social media, content creation, entertainment
|
|
|
|
**Visual Characteristics**:
|
|
|
|
| Element | Specification |
|
|
|---------|---------------|
|
|
| Colors | Bold brand colors |
|
|
| Typography | Dynamic, personality-driven |
|
|
| Media | Rich, prominent |
|
|
| Animation | Expressive, delightful |
|
|
| Shapes | Brand-specific |
|
|
|
|
**Interaction Style**:
|
|
- Gesture-rich
|
|
- Quick actions
|
|
- Social interactions prominent
|
|
- Content-first design
|
|
|
|
**Key Patterns**:
|
|
- Feed-based layouts
|
|
- Quick action buttons (like, share, comment)
|
|
- Stories/ephemeral content
|
|
- Creation tools accessible
|
|
- Notification badges
|
|
|
|
**Reference Apps**: Instagram, TikTok, Snapchat
|
|
|
|
---
|
|
|
|
### Clean & Focused (Productivity Apps)
|
|
|
|
**When to use**: Note-taking, task management, email, documents
|
|
|
|
**Visual Characteristics**:
|
|
|
|
| Element | Specification |
|
|
|---------|---------------|
|
|
| Colors | High contrast, minimal |
|
|
| Whitespace | Strategic, content-focused |
|
|
| Typography | Highly readable, clear hierarchy |
|
|
| Icons | Functional, consistent |
|
|
| Density | Adjustable (compact to comfortable) |
|
|
|
|
**Interaction Style**:
|
|
- Keyboard-friendly
|
|
- Batch operations
|
|
- Drag and drop
|
|
- Quick capture
|
|
- Search-centric
|
|
|
|
**Color Palette**:
|
|
|
|
| Role | Light Mode | Dark Mode |
|
|
|------|------------|-----------|
|
|
| Primary | #1976D2 | #64B5F6 |
|
|
| Background | #FFFFFF | #121212 |
|
|
| Surface | #F5F5F5 | #1E1E1E |
|
|
| Text | #212121 | #E0E0E0 |
|
|
| Accent/Priority | #FF5722 | #FF7043 |
|
|
|
|
**Key Patterns**:
|
|
- List views with swipe actions
|
|
- Quick add buttons
|
|
- Checkbox interactions
|
|
- Due dates and reminders
|
|
- Tags and categories
|
|
|
|
**Reference Apps**: Notion, Todoist, Google Tasks
|
|
|
|
---
|
|
|
|
### Conversion-Focused (E-commerce)
|
|
|
|
**When to use**: Shopping, marketplace, booking apps
|
|
|
|
**Visual Characteristics**:
|
|
|
|
| Element | Specification |
|
|
|---------|---------------|
|
|
| Colors | Brand + clear CTA colors |
|
|
| Images | High quality, zoomable |
|
|
| Typography | Scannable, price prominent |
|
|
| Cards | Product-focused |
|
|
| Badges | Sale, new, limited |
|
|
|
|
**Interaction Style**:
|
|
- Quick add to cart
|
|
- Easy checkout flow
|
|
- Comparison features
|
|
- Reviews accessible
|
|
- Wishlist/save for later
|
|
|
|
**Key Patterns**:
|
|
- Grid and list view toggle
|
|
- Filter and sort
|
|
- Product detail with gallery
|
|
- Cart always accessible
|
|
- One-tap purchase options
|
|
|
|
**Reference Apps**: Amazon, Shopify apps, Booking.com
|
|
|
|
---
|
|
|
|
## Consistency Principles
|
|
|
|
### Match Style to Subject Matter
|
|
|
|
| App Purpose | Style Should Feel |
|
|
|-------------|-------------------|
|
|
| Utility | Efficient, invisible |
|
|
| Finance | Trustworthy, secure |
|
|
| Health | Supportive, calm |
|
|
| Kids | Safe, fun |
|
|
| Social | Expressive, personal |
|
|
| Productivity | Focused, powerful |
|
|
| Shopping | Exciting, trustworthy |
|
|
|
|
### Internal Consistency Rules
|
|
|
|
| Rule | Implementation |
|
|
|------|----------------|
|
|
| Same icon style | All outlined OR all filled |
|
|
| Consistent color meaning | Red = destructive, Green = success |
|
|
| Uniform spacing | Use 8dp grid |
|
|
| Predictable interaction | Same gesture = same result |
|
|
| Typography system | Use M3 type scale |
|
|
|
|
## Anti-Patterns: Style Mismatch
|
|
|
|
| Mismatch | Problem |
|
|
|----------|---------|
|
|
| Playful colors in banking app | Undermines trust |
|
|
| Complex gestures in kids app | Frustrates young users |
|
|
| Cluttered UI in wellness app | Defeats calming purpose |
|
|
| Boring visuals in entertainment | Fails to engage |
|
|
| Aggressive CTAs in health app | Feels manipulative |
|
|
| Childish design in professional tool | Lacks credibility |
|
|
| Dense information in casual app | Overwhelms users |
|
|
|
|
## Implementation Checklist
|
|
|
|
- [ ] Identified app category and target audience
|
|
- [ ] Selected appropriate style profile
|
|
- [ ] Color palette matches style
|
|
- [ ] Typography matches style
|
|
- [ ] Interaction patterns match style
|
|
- [ ] Touch targets appropriate for audience
|
|
- [ ] Animation style consistent
|
|
- [ ] Internal consistency maintained
|
|
- [ ] No style mismatches
|
|
- [ ] Tested with target users
|