Skip to main content

Screenshot Annotation Standards

Purpose

This guide establishes consistent standards for capturing, annotating, and organizing screenshots for Mind Your Now documentation. Following these standards ensures professional, accessible documentation that enhances user understanding.

Screenshot Capture Standards​

Technical Requirements​

Resolution & Quality​

  • Minimum Resolution: 1920x1080 (1080p)
  • Recommended Resolution: 2560x1440 (1440p) for Retina displays
  • Format: PNG for UI screenshots, JPEG for photos
  • Quality: High quality, no compression artifacts
  • File Size: Optimize for web (under 500KB when possible)

Browser & Environment​

  • Browser: Use Chrome or Firefox in standard desktop view
  • Viewport: 1440px width minimum for desktop captures
  • Mobile: Use device emulation mode (375px width for mobile)
  • Clean State: Clear notifications, hide personal data
  • Consistent Branding: Use staging environment with consistent demo data

Content Guidelines​

What to Include​

  • Relevant UI Elements: Focus on the feature being documented
  • Context: Include enough surrounding UI for orientation
  • User States: Show realistic, populated states (not empty views)
  • Success States: Capture completed actions, not loading states

What to Avoid​

  • Personal Information: No real user data, emails, or names
  • Browser Chrome: Crop out browser bars unless necessary
  • System Elements: Hide OS-specific elements (Windows taskbar, Mac dock)
  • Distracting Elements: Remove notifications, popups, or irrelevant content

Annotation Standards​

Annotation Tools​

  • Primary Tool: [Tool recommendation - consider Snagit, Skitch, or similar]
  • Alternative: Any tool that supports the annotation standards below
  • Consistency: Use the same tool across all documentation

Visual Elements​

Colors​

  • Primary Highlight: #FF6B35 (Orange) for main focus areas
  • Secondary Highlight: #4285F4 (Blue) for supporting elements
  • Success/Positive: #34A853 (Green) for confirmations
  • Warning/Attention: #FBBC05 (Yellow) for important notes
  • Error/Critical: #EA4335 (Red) for problems or warnings

Shapes & Indicators​

Callout Boxes​
  • Style: Rounded rectangle with 4px corner radius
  • Border: 3px solid in appropriate color
  • Fill: Semi-transparent (20% opacity) background
  • Text: White text with dark semi-transparent background for readability
Arrows​
  • Style: Bold arrows (6-8px width)
  • Color: Matching the callout color system
  • Direction: Point to specific UI elements
  • Spacing: Leave adequate space between arrow and target
Numbered Steps​
  • Style: Circular markers with numbers
  • Background: Solid color matching annotation theme
  • Text: White numbers, bold, readable size (14-16px)
  • Sequence: Follow logical user flow
Text Labels​
  • Font: Arial or system font, bold
  • Size: 14-16px for readability
  • Background: Semi-transparent dark background for contrast
  • Color: White text for dark backgrounds, dark text for light

Annotation Types​

Feature Highlights​

Purpose: Draw attention to new or important features
Style: Orange callout box with descriptive label
Usage: "New in Cycle 11!" or "Enhanced Feature"

Step-by-Step Instructions​

Purpose: Guide users through processes
Style: Numbered circles in sequence
Usage: 1, 2, 3 progression with arrows showing flow

UI Element Identification​

Purpose: Point out specific buttons, menus, or areas
Style: Colored arrows with labels
Usage: "Click here" or "Settings menu"

Tips & Notes​

Purpose: Provide additional helpful information
Style: Blue callout boxes with lightbulb or info icon
Usage: "Pro tip:" or "Remember:"

Warnings & Important Info​

Purpose: Highlight critical information
Style: Yellow or red callout boxes with appropriate icons
Usage: "Important!" or "Note:"

File Organization​

Directory Structure​

docs/assets/screenshots/
├── chore-management/
│   ├── raw/                    # Original, unprocessed screenshots
│   ├── annotated/              # Processed screenshots with annotations
│   └── optimized/              # Web-optimized versions
├── habits/
│   ├── raw/
│   ├── annotated/
│   └── optimized/
├── achievements/
├── focus-mode/
├── mobile/
├── calendar-integration/
└── general-ui/
    ├── onboarding/
    ├── navigation/
    └── settings/

File Naming Conventions​

Format Pattern​

[feature-area]_[specific-feature]_[view-type]_[sequence].[ext]

Examples:
chores_temporal-nav_list-view_01.png
chores_temporal-nav_calendar-view_02.png
habits_template-selection_modal_01.png
habits_streak-display_dashboard_01.png

Naming Elements​

  • feature-area: Major feature category (chores, habits, etc.)
  • specific-feature: Exact functionality being shown
  • view-type: UI view or context (list, modal, dashboard, etc.)
  • sequence: Number for multi-screenshot sequences (01, 02, 03)
  • ext: File extension (.png, .jpg)

Special Suffixes​

  • _before.png - Before state (for comparisons)
  • _after.png - After state (for comparisons)
  • _mobile.png - Mobile-specific screenshots
  • _desktop.png - Desktop-specific screenshots (when both exist)
  • _annotated.png - Version with annotations
  • _thumb.png - Thumbnail version

Accessibility & Usability​

Text Readability​

  • Contrast Ratio: Minimum 4.5:1 for normal text
  • Font Size: Minimum 14px for annotation text
  • Background: Use semi-transparent backgrounds for text overlay
  • Color Independence: Don't rely solely on color to convey meaning

Alternative Text​

  • Alt Descriptions: Provide descriptive alt text for all screenshots
  • Context: Include what the screenshot shows and its purpose
  • Screen Readers: Consider how annotations would be described audibly

Internationalization​

  • Text in Images: Minimize text within annotations (use captions instead)
  • Universal Symbols: Use internationally recognized icons and symbols
  • RTL Considerations: Be mindful of right-to-left reading patterns

Quality Assurance Checklist​

Before Publishing​

  • Screenshot is clear and high resolution
  • All personal/sensitive information removed
  • Annotations are clearly visible and readable
  • Color contrast meets accessibility standards
  • File is optimized for web delivery
  • Filename follows naming conventions
  • Alt text is descriptive and helpful
  • Screenshot shows realistic, populated state
  • All UI elements relevant to documentation are visible

Review Process​

  1. Content Review: Does the screenshot effectively support the documentation?
  2. Technical Review: Meets resolution and quality standards?
  3. Accessibility Review: Readable and accessible to all users?
  4. Brand Review: Consistent with Mind Your Now visual identity?

Tools & Resources​

  • Screenshot Capture: [Platform-specific recommendations]
  • Annotation: Snagit, Skitch, or similar professional tools
  • Optimization: TinyPNG, ImageOptim, or similar compression tools
  • Editing: Photoshop, GIMP, or similar for advanced edits

Templates & Assets​

  • Color Palette File: [Link to design system colors]
  • Annotation Templates: [Link to reusable annotation templates]
  • Style Guide: [Link to overall brand guidelines]

Quality Control​

  • Checklist Template: Use the QA checklist above for every screenshot
  • Peer Review: Have another team member review critical screenshots
  • User Testing: Test screenshot clarity with actual users when possible

Examples​

Good Example: Feature Highlight​

A good screenshot effectively highlights features with clear, contrasted annotations that guide the user's eye to important elements without overwhelming the interface

Poor Example: Cluttered Annotations​

A poor screenshot might have too many annotations, poor contrast, and overlapping elements that confuse rather than clarify the user experience

Following these standards ensures our documentation screenshots are professional, accessible, and truly helpful to our users. When in doubt, prioritize clarity and user understanding over visual complexity.