9.9 KiB
9.9 KiB
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