Skip to main content

Visual Assets for Temporal Navigation Documentation

This document outlines the visual assets needed to complete the temporal navigation documentation.

Required Visual Assets​

1. Diagrams (/diagrams/)​

temporal-navigation-flow.svg​

Description: Interactive flow diagram showing user navigation paths Specifications:

  • SVG format for scalability
  • Mind Your Now brand colors (blue, green, orange)
  • Shows: Today View → Historical/Future navigation paths
  • Interactive elements highlighted
  • Clean, professional design matching documentation style

Content Elements:

  • Central "Today View" node (green)
  • Historical path (amber/orange)
  • Future planning path (blue)
  • View mode branches (day/week/month)
  • Return paths to today

ui-component-layout.svg​

Description: Annotated layout showing all navigation controls Specifications:

  • Component callouts and labels
  • Navigation bar breakdown
  • Mobile vs desktop differences
  • Interactive element highlighting

2. Screenshots (/screenshots/chore-management/)​

Desktop Screenshots​

  • date-navigation-controls.png - Navigation bar with labels
  • view-mode-selector.png - Day/Week/Month toggle states
  • completion-status-indicators.png - Badge system and colors
  • calendar-popup.png - Date picker interface
  • historical-view-banner.png - Past date UI state
  • future-view-banner.png - Future planning UI state

Mobile Screenshots​

  • mobile-navigation-controls.png - Touch-optimized controls
  • mobile-week-view.png - Mobile week grid layout
  • mobile-swipe-indicators.png - Gesture feedback visuals

3. Animations (/animations/)​

temporal-navigation-demo.gif​

Description: 15-20 second demonstration of navigation flow Specifications:

  • 800x600px resolution
  • <5MB file size (optimized)
  • 10fps for smooth playback
  • Looping animation

Animation Sequence:

  1. Start on today view (2 seconds)
  2. Click Previous button → slide to yesterday (2 seconds)
  3. Show historical banner appear (1 second)
  4. Navigate through week view (3 seconds)
  5. Use date picker to jump to specific date (2 seconds)
  6. Return to today with Today button (2 seconds)
  7. Quick mobile swipe demonstration (3 seconds)

mobile-swipe-demo.gif​

Description: Mobile-focused gesture demonstration Specifications:

  • Mobile screen dimensions (375x667px)
  • Shows finger swipe gestures
  • Visual feedback during swipes
  • Smooth transitions

Creation Guidelines​

Brand Consistency​

  • Use Mind Your Now primary colors:
    • Primary Blue: #2196F3
    • Success Green: #4CAF50
    • Warning Amber: #FF9800
    • Background: #F5F5F5
  • Typography: Inter font family
  • Consistent spacing and padding
  • Mind Your Now visual design language

Technical Requirements​

  • Screenshots: PNG format, 2x resolution for retina
  • Diagrams: SVG format for infinite scalability
  • Animations: GIF format, optimized for web
  • Accessibility: Alt text provided for all images
  • File naming: kebab-case, descriptive names

Quality Standards​

  • High contrast ratios for accessibility
  • Clear, readable text at all sizes
  • Professional appearance matching existing docs
  • Mobile-responsive considerations
  • Loading performance optimized

Implementation Priority​

Phase 1 (Essential)​

  1. temporal-navigation-flow.svg - Core navigation diagram
  2. date-navigation-controls.png - Primary UI screenshot
  3. temporal-navigation-demo.gif - Main demonstration

Phase 2 (Enhancement)​

  1. Mobile screenshots and demos
  2. Detailed component diagrams
  3. Status indicator examples

Phase 3 (Polish)​

  1. Advanced use case diagrams
  2. Interactive component documentation
  3. Accessibility-focused visuals
  • Screenshots: Built-in browser dev tools, Figma, Sketch
  • Diagrams: Draw.io, Figma, Adobe Illustrator
  • Animations: OBS Studio, Peek (Linux), Kap (Mac)
  • Optimization: ImageOptim, SVGO, GIF compression tools

Notes for Content Creators​

  • All visual assets should be created from QA environment (https://qa.myn.test)
  • Ensure consistent chore data across screenshots
  • Use realistic household member names and chore assignments
  • Test all animations for smooth playback across devices
  • Validate that all interactive elements mentioned in docs are captured

This visual asset plan ensures comprehensive documentation support for the temporal navigation feature while maintaining Mind Your Now's professional documentation standards.