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