Screenshots and Videos

This folder contains visual assets for the user guide documentation.

Required Screenshots

Please add screenshots with the exact filenames listed below. Each screenshot should clearly demonstrate the feature or step described in the user guide.

Login & Authentication (5 items)

• login-screen.png - Main login screen with email/password fields
• login-process.gif - Animated demonstration of logging in
• google-login.png - Google sign-in button highlighted
• email-verification.png - Email verification screen
• screen-auth.gif - Screen/device authentication process

Media Management (15 items)

• media-library.png - Overview of media library with various items
• upload-image.gif - Process of uploading an image file
• upload-video.gif - Video upload showing progress bar
• app-selection.png - Grid showing all available app types
• youtube-app-form.png - YouTube app configuration form
• weather-app-form.png - Weather app configuration form
• clock-app-form.png - Clock app configuration form
• message-board-app-form.png - Message board app form
• text-scroll-app-form.png - Text scroll app form
• rss-app-form.png - RSS feed app form
• web-url-app-form.png - Web URL app form
• qr-code-app-form.png - QR code app form
• product-app-form.png - Product showcase app form
• restaurant-app-form.png - Restaurant menu app form
• playlist-app-form.png - Playlist app form
• media-folders.png - Media library with folders

Screen Management (4 items)

• screens-list.png - List view of all screens
• create-screen-form.png - Screen creation/edit form
• manage-screens.png - Screen management interface with actions

Publications (10 items)

• publications-list.png - List of all publications
• publication-editor.png - Main publication editor interface
• publication-name.png - Publication name field highlighted
• layout-templates.png - Layout template selection screen
• assign-media.gif - Animated process of assigning media to regions
• media-in-regions.png - Layout with all regions filled with media
• assign-screens.png - Screen selection/assignment interface
• display-settings.png - Display settings panel
• save-publication.png - Save button highlighted
• update-publication.gif - Animated update process
• multi-region-layout.png - Complex multi-region layout example
• preview-mode.png - Publication preview interface

Screenshot Guidelines

Image Format

• Static images: PNG format (for better quality and transparency)
• Animated demos: GIF format (keep file size reasonable)
• Alternative: Consider using short MP4 videos instead of GIFs

Image Quality

• Resolution: Minimum 1920x1080 for full-screen shots
• Resolution: Minimum 800x600 for dialog/form shots
• Use high-quality, clear screenshots
• Ensure text is readable
• Avoid blurry or pixelated images

Content Guidelines

• Use realistic sample data (avoid test/dummy content when possible)
• Hide or blur any sensitive information
• Use consistent UI theme throughout
• Capture screenshots in a clean state (no error messages unless intentional)
• Show the feature in action, not empty states

Annotations

• Use arrows or highlights sparingly
• If using annotations, keep them consistent in style
• Consider using a tool like Snagit, Skitch, or Preview for annotations
• Save both annotated and original versions

Animated GIFs/Videos

• Keep duration between 5-15 seconds
• Show the complete action from start to finish
• Use smooth, not too fast animations
• File size should be under 5MB when possible
• Consider tools like LICEcap, GIPHY Capture, or ScreenToGif

Recommended Tools

For Screenshots

• macOS: Built-in Screenshot tool (Cmd+Shift+4)
• Windows: Snipping Tool or Snip & Sketch
• Cross-platform: Flameshot, Lightshot

For Annotations

• macOS: Preview, Skitch
• Windows: Paint, Paint 3D
• Cross-platform: GIMP, Krita

For GIF Recording

• macOS: GIPHY Capture, Kap
• Windows: ScreenToGif, LICEcap
• Cross-platform: Peek (Linux)

For Video Recording

• macOS: QuickTime Screen Recording
• Windows: Xbox Game Bar
• Cross-platform: OBS Studio

File Naming Convention

• Use lowercase letters
• Use hyphens (-) instead of spaces
• Be descriptive but concise
• Follow the exact names listed above for consistency
• For additional screenshots: feature-name-description.png

Organizing Screenshots

Once added, organize them by creating subfolders if needed:

screenshots/
├── login/
├── media/
├── screens/
└── publications/

Checklist Progress

Total items: 34 Completed: 0 Remaining: 34

Update this count as screenshots are added!