444 lines
11 KiB
Markdown
444 lines
11 KiB
Markdown
# 🎨 FocusBuddy App Icon Design
|
||
|
||
**Date**: 2025-11-22
|
||
**Status**: Design specification ready
|
||
|
||
---
|
||
|
||
## 🎯 Design Concept
|
||
|
||
### Core Message
|
||
The icon should convey:
|
||
- **Focus**: Centered, calm attention
|
||
- **Gentleness**: Soft, non-intimidating
|
||
- **Support**: A friendly companion, not a strict taskmaster
|
||
|
||
### Design Direction
|
||
**"Gentle Focus Circle"** - A minimalist icon featuring concentric circles representing focused attention, with a soft color palette matching the app's Morandi aesthetic.
|
||
|
||
---
|
||
|
||
## 🎨 Visual Design
|
||
|
||
### Primary Design Option: Focused Circle
|
||
|
||
```
|
||
┌─────────────────────┐
|
||
│ │
|
||
│ ╭───────╮ │
|
||
│ ╭─────────────╮ │
|
||
│ │ ◉ ◉ │ │ <- Friendly "buddy" face
|
||
│ │ ⌣ │ │ (subtle, optional)
|
||
│ ╰─────────────╯ │
|
||
│ ╰───────╯ │
|
||
│ │
|
||
└─────────────────────┘
|
||
```
|
||
|
||
**Elements**:
|
||
1. **Outer circle**: Soft gradient (#A7C4BC to #88C9A1)
|
||
2. **Inner circle**: Lighter shade (#F8F6F2)
|
||
3. **Center dot**: Primary color (#A7C4BC)
|
||
4. **Optional**: Subtle friendly face (two dots for eyes, gentle curve for smile)
|
||
|
||
### Alternative Design: Timer Symbol
|
||
|
||
```
|
||
┌─────────────────────┐
|
||
│ │
|
||
│ ⏰ │
|
||
│ ╱ ╲ │
|
||
│ │ 12 │ │ <- Minimalist clock
|
||
│ ╲___╱ │ showing focus time
|
||
│ │
|
||
└─────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Color Specifications
|
||
|
||
### Primary Palette (from app_colors.dart)
|
||
```dart
|
||
Background: #F8F6F2 // Warm off-white
|
||
Primary: #A7C4BC // Calm green
|
||
Success: #88C9A1 // Encouraging green
|
||
Text: #5B6D6D // Soft gray
|
||
```
|
||
|
||
### Icon Color Strategy
|
||
**Option A - Gradient Background**:
|
||
- Background: Gradient from #A7C4BC (top) to #88C9A1 (bottom)
|
||
- Center: #F8F6F2
|
||
- Details: #5B6D6D
|
||
|
||
**Option B - Solid Background**:
|
||
- Background: #A7C4BC
|
||
- Center circle: #F8F6F2
|
||
- Accent: #88C9A1
|
||
|
||
---
|
||
|
||
## 📐 Technical Requirements
|
||
|
||
### iOS Requirements
|
||
| Size | Usage | File Name |
|
||
|------|-------|-----------|
|
||
| 1024×1024 | App Store | `AppIcon-1024.png` |
|
||
| 180×180 | iPhone 3x | `AppIcon-180.png` |
|
||
| 120×120 | iPhone 2x | `AppIcon-120.png` |
|
||
| 167×167 | iPad Pro | `AppIcon-167.png` |
|
||
| 152×152 | iPad 2x | `AppIcon-152.png` |
|
||
| 76×76 | iPad 1x | `AppIcon-76.png` |
|
||
|
||
### Android Requirements
|
||
| Size | Density | Folder |
|
||
|------|---------|--------|
|
||
| 192×192 | xxxhdpi | `mipmap-xxxhdpi` |
|
||
| 144×144 | xxhdpi | `mipmap-xxhdpi` |
|
||
| 96×96 | xhdpi | `mipmap-xhdpi` |
|
||
| 72×72 | hdpi | `mipmap-hdpi` |
|
||
| 48×48 | mdpi | `mipmap-mdpi` |
|
||
| 512×512 | Play Store | `playstore-icon.png` |
|
||
|
||
### Design Guidelines
|
||
- **iOS**: No transparency, no rounded corners (iOS adds them automatically)
|
||
- **Android**: Can have transparency, adaptive icons recommended
|
||
- **Safe area**: Keep important elements within 80% of canvas (avoid edges)
|
||
- **Contrast**: Ensure icon is visible on both light and dark backgrounds
|
||
|
||
---
|
||
|
||
## 🛠️ Design Tools & Resources
|
||
|
||
### Option 1: Figma (Recommended)
|
||
**Steps**:
|
||
1. Go to [Figma](https://www.figma.com) (free account)
|
||
2. Create new file (1024×1024 canvas)
|
||
3. Use the design specifications above
|
||
4. Export all required sizes
|
||
|
||
**Figma Template** (you can recreate):
|
||
```
|
||
Frame: 1024×1024
|
||
├─ Background Rectangle (fill: linear gradient #A7C4BC → #88C9A1)
|
||
├─ Outer Circle (800×800, center aligned)
|
||
│ ├─ Fill: #A7C4BC
|
||
│ └─ Opacity: 90%
|
||
├─ Inner Circle (600×600, center aligned)
|
||
│ ├─ Fill: #F8F6F2
|
||
│ └─ Shadow: 0 4 20 rgba(0,0,0,0.1)
|
||
└─ Center Dot (200×200, center aligned)
|
||
├─ Fill: #A7C4BC
|
||
└─ Optional: Friendly face elements
|
||
```
|
||
|
||
### Option 2: Canva
|
||
**Steps**:
|
||
1. Go to [Canva](https://www.canva.com)
|
||
2. Create custom size: 1024×1024
|
||
3. Search templates: "app icon minimal"
|
||
4. Customize with FocusBuddy colors
|
||
5. Download as PNG
|
||
|
||
### Option 3: Icon Generator Tools
|
||
**Online Tools**:
|
||
- [App Icon Generator](https://appicon.co/) - Upload 1024×1024, generates all sizes
|
||
- [IconKitchen](https://icon.kitchen/) - Android adaptive icons
|
||
- [MakeAppIcon](https://makeappicon.com/) - Generates iOS and Android sets
|
||
|
||
---
|
||
|
||
## 🎨 Detailed Design Specs
|
||
|
||
### Design 1: Minimalist Focus Circle
|
||
|
||
**SVG-like Description**:
|
||
```xml
|
||
<svg viewBox="0 0 1024 1024">
|
||
<!-- Background gradient -->
|
||
<defs>
|
||
<linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#A7C4BC"/>
|
||
<stop offset="100%" style="stop-color:#88C9A1"/>
|
||
</linearGradient>
|
||
</defs>
|
||
|
||
<!-- Background -->
|
||
<rect width="1024" height="1024" fill="url(#bg)"/>
|
||
|
||
<!-- Outer circle (focus ring) -->
|
||
<circle cx="512" cy="512" r="400"
|
||
fill="none" stroke="#F8F6F2" stroke-width="60"/>
|
||
|
||
<!-- Inner circle -->
|
||
<circle cx="512" cy="512" r="280" fill="#F8F6F2" opacity="0.95"/>
|
||
|
||
<!-- Center dot (the "focus point") -->
|
||
<circle cx="512" cy="512" r="80" fill="#A7C4BC"/>
|
||
|
||
<!-- Optional: Friendly face -->
|
||
<!-- Left eye -->
|
||
<circle cx="452" cy="480" r="20" fill="#5B6D6D" opacity="0.7"/>
|
||
<!-- Right eye -->
|
||
<circle cx="572" cy="480" r="20" fill="#5B6D6D" opacity="0.7"/>
|
||
<!-- Gentle smile (arc) -->
|
||
<path d="M 452 540 Q 512 570 572 540"
|
||
stroke="#5B6D6D" stroke-width="12"
|
||
fill="none" opacity="0.7" stroke-linecap="round"/>
|
||
</svg>
|
||
```
|
||
|
||
### Design 2: Timer with Focus
|
||
|
||
**Description**:
|
||
```
|
||
- Background: Solid #A7C4BC
|
||
- Clock circle: #F8F6F2, 700×700
|
||
- Clock hands: #5B6D6D
|
||
- Hour hand pointing at 12 (straight up)
|
||
- Minute hand at 25 (Pomodoro reference)
|
||
- Center dot: Small circle #A7C4BC
|
||
- Shadow: Subtle drop shadow for depth
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 Design Checklist
|
||
|
||
### Before Creating
|
||
- [ ] Review app's color scheme (app_colors.dart)
|
||
- [ ] Decide on primary design concept
|
||
- [ ] Sketch rough ideas on paper (optional)
|
||
|
||
### During Design
|
||
- [ ] Create 1024×1024 master file
|
||
- [ ] Use exact color codes from app
|
||
- [ ] Ensure visibility at small sizes (test at 48×48)
|
||
- [ ] Keep design simple and recognizable
|
||
- [ ] Test on light and dark backgrounds
|
||
|
||
### After Design
|
||
- [ ] Export 1024×1024 PNG (for iOS App Store)
|
||
- [ ] Generate all required iOS sizes
|
||
- [ ] Generate all required Android sizes
|
||
- [ ] Test icon appearance on real devices (if possible)
|
||
- [ ] Update Xcode assets (ios/Runner/Assets.xcassets)
|
||
- [ ] Update Android resources (android/app/src/main/res)
|
||
|
||
---
|
||
|
||
## 🚀 Quick Start Guide
|
||
|
||
### Fastest Method: Use Figma
|
||
|
||
1. **Create Master Icon** (15 minutes)
|
||
```
|
||
1. Go to figma.com → New file
|
||
2. Press 'F' for frame tool
|
||
3. Enter dimensions: 1024×1024
|
||
4. Create the design using shapes (circles, rectangles)
|
||
5. Apply colors from the spec above
|
||
```
|
||
|
||
2. **Export Master** (2 minutes)
|
||
```
|
||
1. Select the frame
|
||
2. Right panel → Export
|
||
3. Format: PNG, 1x
|
||
4. Click Export
|
||
5. Save as: icon-1024.png
|
||
```
|
||
|
||
3. **Generate All Sizes** (5 minutes)
|
||
```
|
||
1. Go to appicon.co
|
||
2. Upload icon-1024.png
|
||
3. Select iOS and Android
|
||
4. Download generated assets
|
||
5. Unzip the files
|
||
```
|
||
|
||
4. **Install Icons** (10 minutes)
|
||
- See installation instructions below
|
||
|
||
---
|
||
|
||
## 📦 Installation Instructions
|
||
|
||
### iOS Installation
|
||
|
||
1. **Locate Assets Folder**:
|
||
```
|
||
ios/Runner/Assets.xcassets/AppIcon.appiconset/
|
||
```
|
||
|
||
2. **Replace Files**:
|
||
- Copy all generated iOS icons to this folder
|
||
- Ensure file names match Contents.json
|
||
|
||
3. **Update Contents.json** (if needed):
|
||
```json
|
||
{
|
||
"images": [
|
||
{
|
||
"size": "20x20",
|
||
"idiom": "iphone",
|
||
"filename": "Icon-20@2x.png",
|
||
"scale": "2x"
|
||
},
|
||
// ... more entries
|
||
]
|
||
}
|
||
```
|
||
|
||
4. **Build and Test**:
|
||
```bash
|
||
flutter clean
|
||
flutter build ios
|
||
```
|
||
|
||
### Android Installation
|
||
|
||
1. **Locate Resource Folders**:
|
||
```
|
||
android/app/src/main/res/
|
||
├── mipmap-mdpi/
|
||
├── mipmap-hdpi/
|
||
├── mipmap-xhdpi/
|
||
├── mipmap-xxhdpi/
|
||
└── mipmap-xxxhdpi/
|
||
```
|
||
|
||
2. **Replace ic_launcher.png**:
|
||
- Copy the corresponding size to each folder
|
||
- Name all files: `ic_launcher.png`
|
||
|
||
3. **Update for Adaptive Icons** (Optional):
|
||
- Create `mipmap-anydpi-v26/ic_launcher.xml`
|
||
- Reference foreground and background layers
|
||
|
||
4. **Build and Test**:
|
||
```bash
|
||
flutter clean
|
||
flutter build apk
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Design Recommendations
|
||
|
||
### Do's ✅
|
||
- Keep it simple and recognizable
|
||
- Use the app's color palette
|
||
- Test visibility at small sizes
|
||
- Ensure contrast with backgrounds
|
||
- Make it friendly and approachable
|
||
|
||
### Don'ts ❌
|
||
- Don't use text (hard to read at small sizes)
|
||
- Don't use complex gradients (may not scale well)
|
||
- Don't use thin lines (invisible at 48×48)
|
||
- Don't copy other apps' icons
|
||
- Don't use photos or realistic images
|
||
|
||
---
|
||
|
||
## 🔍 Testing Your Icon
|
||
|
||
### Visual Tests
|
||
1. **Size Test**: View at 48×48 - is it still recognizable?
|
||
2. **Background Test**: Place on white, black, and colored backgrounds
|
||
3. **Neighboring Test**: View alongside other popular apps
|
||
4. **Quick Glance Test**: Can you identify it in 1 second?
|
||
|
||
### Technical Tests
|
||
```bash
|
||
# iOS: Check in simulator
|
||
flutter run -d "iPhone 15 Pro"
|
||
|
||
# Android: Check on device
|
||
flutter install
|
||
```
|
||
|
||
---
|
||
|
||
## 💡 Design Philosophy
|
||
|
||
**FocusBuddy Icon Should Feel**:
|
||
- 🧘 **Calm**: Soft colors, rounded shapes
|
||
- 🤝 **Supportive**: Friendly, non-threatening
|
||
- 🎯 **Focused**: Clear center point, minimal distractions
|
||
- 💚 **Gentle**: Morandi palette, no harsh contrasts
|
||
|
||
**Avoid**:
|
||
- ⚠️ Aggressive colors (bright red, harsh orange)
|
||
- ⚠️ Sharp angles (intimidating)
|
||
- ⚠️ Complicated details (confusing)
|
||
- ⚠️ Dark/depressing tones (discouraging)
|
||
|
||
---
|
||
|
||
## 📚 Resources
|
||
|
||
### Color Inspiration
|
||
- Current app palette: Morandi tones, calm greens
|
||
- Reference: Calm app, Headspace (but make it unique!)
|
||
|
||
### Design Inspiration
|
||
- Search "minimalist app icon" on Dribbble
|
||
- Look at productivity app icons on App Store
|
||
- Browse "focus timer" apps for ideas
|
||
|
||
### Tools
|
||
- **Figma**: https://www.figma.com (free)
|
||
- **Canva**: https://www.canva.com (free)
|
||
- **AppIcon.co**: https://appicon.co (free generator)
|
||
- **IconKitchen**: https://icon.kitchen (Android adaptive)
|
||
|
||
---
|
||
|
||
## 🎯 Next Steps
|
||
|
||
1. **Design the Icon** (20-30 minutes)
|
||
- Use Figma or Canva
|
||
- Follow the specifications above
|
||
- Export 1024×1024 PNG
|
||
|
||
2. **Generate All Sizes** (5 minutes)
|
||
- Use AppIcon.co to generate all required sizes
|
||
- Download the zip file
|
||
|
||
3. **Install in Project** (10 minutes)
|
||
- Replace iOS assets
|
||
- Replace Android resources
|
||
- Test on simulators/devices
|
||
|
||
4. **Document** (5 minutes)
|
||
- Save master file for future updates
|
||
- Note any design decisions
|
||
- Take screenshots for app store
|
||
|
||
---
|
||
|
||
## 📝 Final Checklist
|
||
|
||
- [ ] Master icon created (1024×1024)
|
||
- [ ] All iOS sizes generated
|
||
- [ ] All Android sizes generated
|
||
- [ ] iOS assets installed
|
||
- [ ] Android resources installed
|
||
- [ ] Tested on iOS simulator
|
||
- [ ] Tested on Android emulator/device
|
||
- [ ] Icon looks good at small size (48×48)
|
||
- [ ] Icon matches app's design language
|
||
- [ ] Master file saved for future updates
|
||
|
||
---
|
||
|
||
**Time Estimate**: 30-60 minutes total
|
||
**Difficulty**: Beginner-friendly
|
||
**Tools Needed**: Browser (Figma/Canva), no design experience required
|
||
|
||
**Ready to design?** Follow the "Quick Start Guide" section above!
|