curiositech/collage-web-design

Collage Web Design

Creates web experiences with overlapping, layered, grid-breaking compositions inspired by editorial magazine spreads, scrapbooks, and mixed-media art. This is not about photo gallery grids — it is about the aesthetic of intentional visual overlap, cut-out shapes, blend modes, and typography-as-imagery that breaks the rectangular monotony of standard web layouts.

Decision Points

When to Choose Blend Modes

Background Analysis:
├── Dark background (< 40% lightness)
│   ├── Text over image → mix-blend-mode: difference (always readable)
│   ├── Image over image → mix-blend-mode: screen (brightens overlap)
│   └── Accent color → mix-blend-mode: lighten (preserves vibrancy)
├── Light background (> 60% lightness)
│   ├── Image overlay → mix-blend-mode: multiply (darkens where overlap)
│   ├── Text emphasis → mix-blend-mode: color-burn (high contrast)
│   └── Subtle blend → mix-blend-mode: soft-light (gentle interaction)
└── Mixed/variable background
    └── Test all blends → Use normal as fallback for accessibility

Z-Index Stacking Strategy

If primary content (text, CTA, navigation):
    z-index: 100+
    │
    ├── If overlapping decorative elements
    │   └── Decorative z-index: 1-50, pointer-events: none
    │
    └── If background elements
        └── Background z-index: -1 to 0

If equal importance elements:
    Use transform: translateZ() for 3D layering instead
    │
    └── More important visually = higher translateZ value

Overlap Legibility Decision Tree

Overlap Assessment:
├── Text over image?
│   ├── High contrast image → Add semi-transparent background
│   ├── Low contrast image → Use mix-blend-mode: difference
│   └── Busy image → Clip-path image to create clear text areas
├── Image over image?
│   ├── Similar tones → Use contrasting blend mode (multiply/screen)
│   ├── Different subjects → Partial overlap (30-60% maximum)
│   └── Same subject → Full blend with multiply/overlay
└── Element over interactive content?
    └── pointer-events: none on overlay OR restructure layout

Mobile Responsive Restructuring

Screen Width < 768px:
├── Heavy overlaps (>50% area coverage)
│   └── Convert to vertical stack, remove overlaps
├── Light overlaps (<30% area coverage)
│   ├── Maintain 1-2 subtle overlaps for personality
│   └── Reduce rotation angles to 1-2 degrees
├── Blend modes
│   └── Disable (set to normal) — mobile performance + accessibility
└── Clip-paths
    ├── Simple shapes → Keep
    └── Complex polygons → Simplify or remove

Failure Modes

Over-Overlap → Illegibility

Symptom: Nothing stands out, text disappears, users can't find key content Detection: If >70% of viewport has overlapping elements, you've hit this Fix: Establish clear focal hierarchy — 1 primary element, 2-3 supporting, rest background

Blend-Mode Contrast Loss

Symptom: Text becomes unreadable on certain backgrounds, dark-on-dark or light-on-light Detection: Test by setting all blend modes to normal — if text disappears, you have contrast loss Fix: Add CSS fallbacks: mix-blend-mode: multiply; @supports not (mix-blend-mode: multiply) { background: rgba(255,255,255,0.9); }

Z-Index Layer Jank

Symptom: Elements flicker, appear/disappear on hover, or stack incorrectly across components Detection: If z-index values exceed 1000 or you use z-index: 99999, you have z-index chaos Fix: Implement consistent z-index scale: decorative (1-50), content (51-100), modals (101-200)

Mobile Overlap Collapse

Symptom: Collage becomes unusable on mobile — text covered, buttons unreachable Detection: If mobile bounce rate >20% higher than desktop, check overlap accessibility Fix: Use @media (max-width: 768px) to flatten overlaps into readable linear flow

Clip-Path Accessibility Trap

Symptom: Screen readers can't access content, text selection broken, focus indicators disappear Detection: If clip-path applied to containers with interactive content or text Fix: Apply clip-path only to <img> tags and decorative elements, never to text containers

Worked Examples

Magazine Hero Section Implementation

Scenario: Fashion brand wants editorial magazine spread as hero section

Step 1 - Analyze Reference: Magazine spread has: large model photo (60% width), overlapping text block (30% width), small accent photo (20% width), handwritten annotation

Step 2 - Choose Blend Mode: Light background → Primary image uses mix-blend-mode: multiply for text overlay Accent photo uses mix-blend-mode: screen for ghostly effect

Step 3 - Z-Index Hierarchy:

.hero-main-image { z-index: 1; }     /* Foundation */
.hero-accent-image { z-index: 2; }   /* Supporting */
.hero-text-block { z-index: 3; }     /* Key content */
.hero-annotation { z-index: 4; }     /* Accent detail */

Step 4 - Overlap Testing: Text block overlaps 40% with main image — add subtle background: background: rgba(247, 243, 238, 0.95);

Expert catches: Novice would apply blend mode to text container → illegible. Expert applies blend mode to images only, ensures text has background for contrast.

Step 5 - Mobile Restructure:

@media (max-width: 768px) {
  .hero-main-image { position: static; width: 100%; }
  .hero-text-block { position: static; transform: none; background: white; }
  .hero-accent-image { width: 60%; transform: rotate(2deg); }
}

Quality Gates

• [ ] Text contrast ratio ≥ 4.5:1 when all blend modes disabled
• [ ] Interactive elements (buttons, links) have tap targets ≥ 44px × 44px
• [ ] Page passes WCAG color-blind simulation (protanopia, deuteranopia, tritanopia)
• [ ] Z-index values follow consistent scale (no random large numbers)
• [ ] Mobile layout removes overlaps that cause illegibility on <768px screens
• [ ] Clip-path applied only to images/decorative elements, never text containers
• [ ] All overlapping decorative elements have pointer-events: none
• [ ] At least one element uses mix-blend-mode correctly (not causing contrast loss)
• [ ] Typography includes display/handwritten font for editorial personality
• [ ] Layout has clear focal point (one dominant element anchoring composition)

NOT-FOR Boundaries

This skill should NOT be used for:

• Photo gallery grids/masonry layouts → Use collage-layout-expert instead (different "collage" meaning)
• Corporate dashboards or data-heavy interfaces → Use maximalist-web-design for density without artistic overlap
• Clean minimalist sites → Use web-design-expert for structured layouts
• Brutalist flat-color designs → Use neobrutalist-web-designer for bold geometric approaches
• Glassmorphism/frosted blur effects → Use vaporwave-glassomorphic-ui-designer for translucent layering
• E-commerce product pages → Overlapping elements reduce conversion; use standard grid layouts
• Legal/medical/financial sites → Professional industries require clear hierarchy without artistic chaos

Delegate to other skills when:

• Client wants "organized chaos" with information density → maximalist-web-design
• Focus is on CSS Grid mastery for complex layouts → web-design-expert
• Typography is the primary visual element → typography-expert
• Need glass/blur effects instead of print-inspired overlaps → vaporwave-glassomorphic-ui-designer