Collage Web Design

---
license: Apache-2.0
name: collage-web-design
description: Collage as a web design aesthetic — overlapping elements, mixed media, cut-out shapes, scrapbook layouts, and editorial magazine spreads adapted for the web. CSS techniques for layered compositions using z-index stacking, clip-path, mix-blend-mode, parallax layering, and grid-breaking layouts. Activate on 'collage web', 'editorial layout', 'magazine layout', 'overlapping elements', 'scrapbook', 'cut-out aesthetic', 'mixed media web', 'layered composition', 'grid-breaking', 'editorial web design', 'fashion website layout', 'David Carson'. NOT for photo collage/gallery grids (use collage-layout-expert), maximalist density (use maximalist-web-design), neobrutalism (use neobrutalist-web-designer).
allowed-tools: Read,Write,Edit,Glob,Grep,WebSearch,WebFetch
metadata:
  category: Design & UX
  tags:
    - collage
    - editorial
    - magazine-layout
    - mixed-media
    - clip-path
    - blend-mode
    - scrapbook
    - grid-breaking
    - web-design
  pairs-with:
    - skill: maximalist-web-design
      reason: Collage can be maximalist; density techniques layer naturally with overlap
    - skill: typography-expert
      reason: Collage treats typography as visual element, not just text
    - skill: web-design-expert
      reason: Grounding collage flourishes within usable page architecture
    - skill: hero-section-design
      reason: Collage hero sections are the most impactful application of this style
category: Design & Creative
tags:
  - collage
  - web-design
  - layout
  - creative
  - visual
---

# 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:**
```css
.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:**
```css
@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`