TDvorak/1356
1
0
Fork 0
mirror of https://github.com/Dvorinka/1356.git synced 2026-06-03 19:42:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
5ab2773f98d4b991a7101b93a47e6d14e7b08390
1356/lifetimer/app_store_assets/app_icon_guidelines.md
T
Tomas Dvorak 37ffb93923 feat: Complete Phase 1 - Full Flutter app implementation with comprehensive features 
Version: 1.1.0

Major changes:
- Implemented complete Flutter app structure with all core features
- Added comprehensive UI screens for auth, countdown, goals, profile, settings, and social features
- Integrated Supabase backend with authentication and data repositories
- Added offline support with Hive caching and local storage
- Implemented comprehensive routing with go_router
- Added location services with Google Maps integration
- Implemented notifications and home widget support
- Added voice recording capabilities and AI chat features
- Created comprehensive test suite and documentation
- Added Android and iOS platform configurations
- Implemented achievements system and social features
- Added calendar integration and bucket list functionality

This represents a complete Phase 1 milestone with 3,775 additions across 31 files.
2026-01-04 14:33:54 +01:00

4.5 KiB
Raw Blame History

LifeTimer - App Icon Guidelines

Icon Design Specifications

Concept

The LifeTimer app icon should represent:

  • Time/countdown theme
  • Progress and achievement
  • Motivation and forward movement
  • Clean, modern aesthetic

Design Elements

Primary Elements

  • Hourglass or Timer: Central element representing time
  • Progress Ring: Circular indicator showing completion
  • Arrow/Upward Motion: Symbolizing progress and achievement
  • Number 1356: Subtle reference to the challenge duration

Color Palette

  • Primary: #6366F1 (Indigo) - Main brand color
  • Secondary: #8B5CF6 (Purple) - Accent
  • Highlight: #EC4899 (Pink) - Energy and motivation
  • Background: Gradient from primary to secondary

Style Guidelines

  • Flat Design: Modern, clean aesthetic
  • Minimalist: Simple shapes, clear focal point
  • Scalable: Must work at all sizes (from 16x16 to 1024x1024)
  • High Contrast: Ensure visibility on all backgrounds
  • No Text: Avoid text in the icon (except possibly "1356" as a subtle element)

Required Sizes

iOS (App Store)

  • 1024x1024 pixels (App Store icon)
  • 180x180 pixels (@3x iPhone)
  • 167x167 pixels (@3x iPad Pro)
  • 152x152 pixels (@2x iPad)
  • 120x120 pixels (@3x iPhone)
  • 87x87 pixels (@3x iPhone)
  • 80x80 pixels (@2x iPhone)
  • 76x76 pixels (@2x iPad)
  • 60x60 pixels (@2x iPhone)
  • 58x58 pixels (@2x iPhone)
  • 40x40 pixels (@2x iPhone)
  • 29x29 pixels (@2x iPhone)
  • 20x20 pixels (@2x iPhone)

Android (Google Play Store)

  • 512x512 pixels (Play Store icon)
  • 192x192 pixels (Adaptive icon)
  • 144x144 pixels (Master icon)
  • 96x96 pixels (Master icon)
  • 72x72 pixels (Master icon)
  • 48x48 pixels (Master icon)
  • 36x36 pixels (Master icon)

Favicon

  • 512x512 pixels (PWA icon)
  • 192x192 pixels (PWA icon)
  • 180x180 pixels (Apple touch icon)
  • 32x32 pixels (Favicon)
  • 16x16 pixels (Favicon)

Design Concepts

Concept 1: Hourglass Progress

  • Central hourglass with sand flowing
  • Progress ring around the hourglass
  • Gradient background (indigo to purple)
  • Clean, minimalist design

Concept 2: Circular Timer

  • Circular timer face with hands
  • Progress indicator ring
  • Subtle "1356" in the center
  • Modern, elegant design

Concept 3: Arrow and Ring

  • Upward arrow in center
  • Progress ring with arrow
  • Dynamic, forward-moving feel
  • Energetic design

Concept 4: Abstract Time

  • Abstract hourglass shape
  • Geometric progress elements
  • Modern, tech-forward design
  • Unique and memorable

Implementation Notes

iOS

  • Use Asset Catalog in Xcode
  • Provide all required sizes
  • Ensure proper transparency handling
  • Test on different iOS versions

Android

  • Use adaptive icon format
  • Provide foreground and background layers
  • Test on different Android versions and devices
  • Ensure proper masking on different devices

Tools

  • Design: Figma, Adobe Illustrator, Sketch
  • Export: IconKitchen (Android), AppIconGenerator (iOS)
  • Testing: TestFlight, Firebase App Distribution

Brand Consistency

The app icon should:

  • Match the app's color scheme
  • Reflect the app's purpose and values
  • Be recognizable at small sizes
  • Stand out in the app store
  • Appeal to the target audience

Accessibility

  • Ensure sufficient color contrast
  • Provide alternative text for screen readers
  • Test with accessibility tools
  • Follow platform accessibility guidelines

Next Steps

  1. Choose a design concept
  2. Create the main design (1024x1024)
  3. Export to all required sizes
  4. Test on different devices and backgrounds
  5. Gather feedback and iterate
  6. Finalize and prepare for submission

Additional Assets Needed

Splash Screen

  • iOS: Launch screen storyboard
  • Android: Launch screen drawable
  • Size: Full screen (varies by device)
  • Design: App logo on gradient background

App Store Screenshots

  • iPhone 6.7" Display (1290x2796)
  • iPhone 6.5" Display (1242x2688)
  • iPad Pro 12.9" Display (2048x2732)
  • Android Phone (1080x1920)
  • Android 7" Tablet (1200x1920)
  • Android 10" Tablet (1600x2560)

Feature Graphic (Android)

  • Size: 1024x500 pixels
  • Content: App branding and key features

Promotional Art

  • Size: 1800x1200 pixels (iOS)
  • Content: App showcase for marketing

Resources

Reference in New Issue View Git Blame Copy Permalink