App Store Screenshots Gallery Generator

App Store Screenshots Gallery Generator

Create a professional, production-ready screenshots gallery for an iOS/macOS/Android app that adheres to the highest design standards of top-tier app developers.

Project Context

You are tasked with designing a screenshots gallery page for an app, which will be deployed to a static hosting service like Netlify, Vercel, or similar. The project has screenshots stored in a folder (typically screenshots/, fastlane/screenshots/, or similar).

Comprehensive Requirements

1. Design System Foundation

Establish a robust CSS custom properties system (design tokens) to ensure a cohesive and adaptable visual language:

• Color Palette: Define a primary palette (50-900 shades), a secondary/accent palette for interactive elements, and a neutral gray scale (50-900) for typography and background.

• Surface Levels: Create three surface levels (surface-1 for primary content, surface-2 for secondary information, and surface-3 for decorative elements).

• Typography: Implement a two-font stack, using a monospaced font for UI elements and a sans-serif font for body text.

• Spacing Scale: Create a consistent spacing scale based on a 4px base unit to maintain visual harmony across the gallery.

• Border Radius Scale: Develop a radius scale (sm, md, lg, xl, 2xl, 3xl) to ensure consistent corner treatment.

• Shadows: Design five elevation levels (sm, md, lg, xl, 2xl) to create depth and dimension.

• Transitions: Define three transition speeds (fast: 150ms, normal: 300ms, smooth: 400ms with cubic-bezier timing functions) for a polished user experience.

2. Layout Architecture

• Container: Implement a responsive container with a max-width of 1600px and centered alignment, with adaptive padding for different screen sizes.

• Grid System: Utilize a masonry-style responsive grid layout using grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) to accommodate varying numbers of screenshot cards.

• Gap: Set responsive gap properties (2rem on desktop, 1.5rem on tablet, 1rem on mobile) to maintain consistent white space between cards.

• Card Aspect Ratio: Ensure a consistent aspect ratio for all screenshot cards to preserve the app's visual integrity.

3. Header Section

• App Badge: Design a small, pill-shaped badge with the app icon and a clear indication of the platform (iOS APPLICATION, ANDROID APP, etc.).

• Title: Create a large, bold app name using a gradient text treatment for visual emphasis.

• Subtitle: Display a one-line description that highlights the key technologies and unique features of the app.

• Background: Add a subtle grid pattern overlay to the background to create depth and texture.

• Padding: Reduce vertical padding (3rem top, 2rem bottom) to create a compact, uncluttered feel.

4. Screenshot Cards

Each screenshot card should follow a consistent structure:

• Container: Implement a white or off-white background with rounded corners (2xl) and a subtle box shadow for elevation.

• Image Container: Place the screenshot within a gradient background container with a centered alignment and a white border (8px) to mimic a device frame.

• Hover Effects:

  • Card Lift: Apply a subtle lift effect (-8px translateY) when the card is hovered over, accompanied by an enhanced box shadow.
  • Image Scale: Introduce a gentle scaling effect (1.04) on the screenshot with a slight rotation (0.5deg) to create a sense of interaction.
  • Border Appearance: Make the top border visible (gradient bar) during hover to draw attention to the card.
  • Glow Overlay: Fade in a radial glow overlay to indicate user engagement.

• Metadata Bar:

  • Number Badge: Display a gradient background number badge (26px square) to indicate the card's position in the sequence.
  • Device Name: Show the device name in uppercase, small font, and a monospaced font.

• Title: Use a bold, monospaced font for the screenshot title, with a font size of 1rem.

• Description: Add a one-line caption in a smaller font and a subtle color to provide context for the screenshot.

5. User Journey Ordering

Order the screenshots to reflect the natural progression of user experience:

1. Login/Onboarding: The first screen users encounter when opening the app.

2. Dashboard/Home: The main landing screen after a successful login or onboarding process.

3. Primary Feature Views: Core functionality and main screens showcasing the app's key features.

4. Settings/Configuration: Screens dedicated to customization and app settings.

5. Permissions/Integrations: Screens illustrating permissions, integrations, or advanced connectivity features.

6. Advanced Features: Screens displaying cloud syncing, sharing, or other high-level functionality.

7. Analytics/Reports: Screens dedicated to data visualization and analysis tools.

8. Archive/History: Screens showcasing historical data views or saved content.

6. Animations

• Entrance: Implement a staggered fade-in effect with translateY (0.1s delays between cards) to create a smooth reveal as the user scrolls.

• Hover: Use a smooth cubic-bezier easing function (0.16, 1, 0.3, 1) for all hover interactions to ensure a consistent and polished feel.

• Scroll: Utilize the IntersectionObserver API to trigger animations when screenshot cards enter the viewport for a dynamic and engaging user experience.

• Performance: Employ the will-change property to optimize transform and opacity changes for smoother animations.

7. Footer

• Background: Use a dark (neutral-900) background with a subtle gradient overlay to create a distinct visual separation from the main content.

• Border Radius: Apply a top border radius (2xl) only for a clean, polished look.

• Content: Display minimal metadata, such as device information, date, and status, using clear and concise iconography.

• Spacing: Maintain compact padding (2rem) to keep the footer unobtrusive and focused on its core information.

8. Responsive Breakpoints

• Desktop (>1280px): Display 4-5 columns of cards to accommodate larger screens.

• Tablet (768-1280px): Reduce the number of columns to 2-3 to adapt to the tablet form factor.

• Mobile (<768px): Display a single column with reduced padding throughout for optimal readability on smaller devices.

9. Technical Requirements

• Single HTML File: Generate a single HTML file with all CSS inline in the <style> tag for easy deployment and maintenance.

• External Dependencies: Limit external dependencies to:

  • Pico.css (minimal CSS framework) for basic styling and layout needs.
  • Font Awesome (icons) for essential visual elements.
  • Google Fonts (Inter + IBM Plex Mono) for a clean and readable typography stack.
  • Animate.css (optional, for additional animations) to enhance the user experience.

• No Build Step: Design the gallery to work as a static HTML file without any build processes for seamless deployment.

• Performance: Optimize animations, minimize layout shifts, and ensure fast loading times for an optimal user experience.

• Accessibility: Implement semantic HTML structure, provide alt text for images, and follow best practices for color contrast to ensure accessibility for all users.

10. Polish Details

• Subtle Gradients: Use background radials sparingly and with restraint to enhance depth without overwhelming the user.

• Border Treatment: Employ a 1px solid border with alpha transparency for a clean and refined edge treatment.

• Shadow Layering: Combine multiple shadow values (lighting and darkening) to create a sense of depth and dimension.

• Typography: Implement tight letter-spacing on headings (-0.03em) to improve readability and visual harmony.

• Color Consistency: Use design tokens exclusively to ensure a unified visual language throughout the gallery.

• Image Presentation: Maintain a white border around screenshots to mimic a device frame and preserve the app's visual integrity.

11. Output Format

Generate a single index.html file with:

1. Complete HTML structure, including the header, footer, and screenshot cards.

2. Inline CSS with design tokens, ensuring a clean and maintainable codebase.

3. JavaScript for scroll animations using the IntersectionObserver API to create a dynamic and engaging experience.

4. All screenshot cards with proper metadata, following the specified structure and ordering.

5. Responsive design that adapts seamlessly to all screen sizes.

12. Example Screenshot Card Structure

<div class="screenshot-card">
    <div class="screenshot-img-container">
        <img src="screenshot-name.png" alt="Description" class="screenshot-img">
    </div>
    <div class="screenshot-info">
        <div class="screenshot-meta">
            <div class="screenshot-number">1</div>
            <div class="screenshot-device">iPhone 17 Pro Max</div>
        </div>
        <h3 class="screenshot-title">Screen Title</h3>