Visual Asset Specifications

This guide provides comprehensive specifications for all visual assets needed to create a professional presence on the FanFest Platform.

Quick Reference

Asset	Minimum Upload Size	Aspect Ratio	Max File Size
Channel Logo	256 x 256 px	1:1 (square)	2 MB
Channel Banner	1640 x 600 px	~2.73:1	5 MB
Show/Contest Thumbnail	624 x 400 px	1.56:1	3 MB
Media Share (Portrait)	1080 x 1350 px	4:5	5 MB
Media Share (Square)	1080 x 1080 px	1:1	5 MB
Offer Image	640 x 640 px	1:1 (square)	3 MB
Contest Prize Image	640 x 640 px	1:1 (square)	3 MB

What You'll Need to Provide

As you prepare to launch your channel on FanFest, you'll need to provide:

1. Visual Assets - Logo, banner, and thumbnail images for shows, contests, and interactive content
2. Brand Theme - Optional custom color tokens for your channel (see Design Tokens)

---

Channel Logo

Your channel logo is the primary visual identifier for your brand within the FanFest Platform. It appears throughout the interface and should be instantly recognizable at various sizes.

Use Cases

Usage Context	Display Size	Description
Channel Header	64 x 64 px	Main channel page header and navigation

Format Requirements

• Shape: Square (1:1 aspect ratio)
• Display Size: 64 x 64 px
• Upload Resolution: Minimum 256 x 256 px (for Retina/4K displays)
• File Type: PNG (preferred for transparency support)
• Transparency: Supported and recommended for dark/light theme flexibility
• Maximum File Size: 2 MB

Design Best Practices

• Legibility: Ensure the logo remains clear and recognizable at small sizes. Avoid intricate details or thin lines.
• Padding: Include a small margin around the main symbol to prevent visual clipping in circular or rounded containers.
• Background: Use solid or gradient colors from your brand palette. Avoid photos or noisy textures.
• Typography: Avoid text smaller than 10 px in height within the logo.

---

Channel Banner

The channel banner serves as the hero image for your FanFest channel, appearing prominently at the top of your page. It's your first opportunity to make a visual impression on visitors.

Use Cases

Usage Context	Display Size	Device	Description
Channel Header	Full-width x 300 px	Desktop	Hero banner at top of channel page
Channel Header	Full-width x 260 px	Mobile	Hero banner with responsive center cropping

Technical Specifications

Platform	Recommended Size	Display Height	Notes
Desktop	820 x 300 px	300 px	Full-width container, center-aligned
Mobile	820 x 260 px	260 px	Scales proportionally with responsive center cropping

• Aspect Ratio: Approximately 2.73:1
• Upload Resolution: Minimum 1640 x 600 px (2x scale for Retina/4K displays)
• File Type: JPG or PNG (PNG preferred for better color depth)
• Maximum File Size: 5 MB

Safe Zones

A single banner image is used across all devices with responsive cropping. To ensure your key content remains visible:

• Core Safe Zone: Keep logos, text, or focal points within the central 640 x 180 px zone
• Edge Zones: The outer areas (top/bottom 60 px, left/right 90 px) may be cropped on smaller screens or different aspect ratios
• Best Practice: Avoid placing essential visuals near the edges; keep the composition centered

Design Guidelines

• Keep it simple --- this is a hero image, not a detailed infographic
• Use high-quality imagery that represents your brand identity
• Ensure good contrast if overlaying text or logos
• Test how it looks cropped at different sizes

---

Show and Contest Thumbnails

Thumbnails are visual entry points to interactive content on your channel. They appear in content rails and widget cards, providing a preview of what users can engage with.

Use Cases

Usage Context	Display Size	Aspect Ratio	Description
Show Cards	312 x 200 px	1.56:1	Displayed in the horizontal scrollable rail on your channel page
Contest Cards	312 x 200 px	1.56:1	Used for contest widgets across the platform

Requirements

• Upload Resolution: Minimum 624 x 400 px (2x for Retina/4K displays)
• File Type: PNG or JPG (PNG preferred for better definition and transparency)
• Maximum File Size: 3 MB

Design and Composition Guidelines

• Contrast: Use high-contrast imagery with clear focal elements to attract attention
• Hierarchy: Maintain consistent visual hierarchy (e.g., subject centered, branding at bottom)
• Text Limitation: Limit embedded text or logos to 20% of the total area to maintain clarity
• Backgrounds: Use gradient overlays or blurred visuals that align with your brand palette
• Simplicity: Avoid cluttered compositions or elements that might be cropped in responsive layouts
• Mobile First: Design with mobile viewing in mind, as the majority of users engage via mobile devices

Typography and Branding

• Text Overlays: Titles and key information are handled by the UI layer; avoid embedding large text within the image
• Brand Placement: If including sponsor logos, position them in the bottom area of the thumbnail

---

Media Share Images

Media share images appear within shows when content is shared by users or hosts. These images are displayed with zoom-to-fit scaling.

Format Specifications

• Recommended Format: Portrait or Square
• Aspect Ratio:
  • Portrait (Recommended): 4:5 (e.g., 1080 x 1350 px) - Optimized for mobile viewing
  • Square: 1:1 (e.g., 1080 x 1080 px) - Universal compatibility
  • Landscape (Supported): 16:9 (e.g., 1920 x 1080 px) - Desktop-optimized
• Upload Resolution:
  • Portrait: Minimum 1080 x 1350 px
  • Square: Minimum 1080 x 1080 px
  • Landscape: Minimum 1920 x 1080 px
• File Type: JPG or PNG (JPG preferred for photos, PNG for graphics)
• Maximum File Size: 5 MB

Design Considerations

• Mobile First: Portrait orientation (4:5) is recommended as it maximizes screen real estate on mobile devices
• Safe Area: Keep important content away from edges as zoom-to-fit may crop slightly
• Focal Point: Center key subjects as the image may be displayed at different aspect ratios
• Quality: Use high-resolution images that maintain clarity when zoomed

---

Offer Images

Offer images are used to promote special deals, products, or services within shows. They appear as square cards in both horizontal and vertical layouts.

Format Specifications

• Aspect Ratio: 1:1 (Square)
• Display Size: 280 x 280 px (mobile), 320 x 320 px (desktop)
• Upload Resolution: Minimum 640 x 640 px (2x for Retina/4K displays)
• Recommended Resolution: 1080 x 1080 px for optimal quality
• File Type: PNG or JPG (PNG preferred for sharp text and graphics)
• Maximum File Size: 3 MB

Design Best Practices

• Clarity: Use bold, clear imagery that communicates the offer at a glance
• Text: Keep text minimal and large (min 48 px for key text in source file)
• Branding: Include your logo but keep it subtle (10-15% of image area)
• Call-to-Action: Visual indicators (arrows, buttons) should be clear and prominent
• Contrast: Ensure high contrast between background and foreground elements
• Mobile First: Design at mobile size first, then verify it scales well to desktop

---

Contest Prize Images

Contest prize images showcase rewards and incentives for contests.

Format Specifications

• Aspect Ratio: 1:1 (Square)
• Display Size:
  • Channel Page: 240 x 240 px
  • Within Shows: 280 x 280 px
• Upload Resolution: Minimum 640 x 640 px (2x for Retina/4K displays)
• Recommended Resolution: 1080 x 1080 px for optimal quality
• File Type: PNG (preferred for transparency) or JPG
• Maximum File Size: 3 MB

Design Guidelines

• Product Focus: Feature the prize prominently with clean, uncluttered composition
• Background: Use solid colors or subtle gradients that don't compete with the prize
• Lighting: Ensure even lighting that highlights the prize attractively
• Transparency: Use PNG with transparent background when the prize image allows
• Mobile First: Ensure key details are visible at small sizes (240 x 240 px)

Image Types by Prize Category

• Physical Products: Professional product photography on clean background
• Digital Prizes: Icon or graphic representation with clear branding
• Experiences: Lifestyle photography showing the experience context
• Gift Cards/Vouchers: Brand logo or styled voucher design