Collage

Applying a Collage visual direction

You are being asked to apply a Collage visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Collage” means here

Collage assembles a composition from fragments that visibly came from somewhere else. A photographic cutout with a torn edge overlaps a hand-drawn shape, which overlaps a piece of printed type; a person is larger than the building behind them; several pieces sit at angles. Nothing is blended, and that is the point — the seams between materials are the subject, not a flaw to be smoothed away.

The register this produces is handmade and slightly surreal, closer to a physical scrapbook or a cut-paper poster than to anything rendered. It carries editorial and cultural work well, and it fights any interface that needs to feel systematic.

The one place it needs discipline is text. Running text over a busy cutout is unreadable no matter what color you pick, because the background changes every few pixels. In a physical collage the solution is what a designer would actually do: paste a clean piece of paper over the fragments and write on that. The same move works here.

Recommendations

• Assemble at least three fragments with genuinely irregular edges — torn, cut, or hand-traced. A rectangular crop is not a cutout, and neither is a circle.
• Break scale on purpose. Take two things that would be similar in size in reality and make one several times larger. That mismatch is what makes a collage read as a collage instead of as a busy layout.
• Overlap in a stated order. Fragments should cross each other with a deliberate front-to-back sequence, not merely sit near one another.
• Mix material kinds. Photography with illustration, illustration with treated type, type with texture. Two kinds is enough; the point is that they are visibly not the same substance.
• Rotate pieces off-axis by more than a few degrees. Unlike directions where a slight tilt reads as a hand, here the angles want to be obvious.
• Give text its own clean ground. A solid panel, a band of flat color, or an area of the composition kept deliberately empty — then set the text there at full contrast.
• Consider letting a fragment run past the edge of the frame. Collage tends to look composed rather than contained.

Avoid

• Rectangular or circular crops used as fragments, which read as a photo grid rather than a collage.
• Fragments arranged neatly with no overlap.
• All fragments at similar scale, which loses the dislocation that defines the style.
• Running text placed directly over a busy cutout.
• Blending, feathering, or blurring the seams between fragments.
• A single material — a page of photographs alone is a gallery, not a collage.

How to check your own work

Before considering the result finished, look at it and ask:

• Are any of the edges perfectly straight or perfectly round? Those pieces are not reading as cut, and they will pull the whole composition toward a conventional layout.
• Is anything unexpectedly large or small relative to the things around it? If everything is proportionate, the surreal quality is missing.
• Do the fragments actually cross one another, or are they merely adjacent?
• Find every piece of running text. Is it on a clean ground? If any sits on a fragment, move it or give it a panel.
• How many different material kinds are present? If the answer is one, the seams have nothing to be between.

Collage — Specification

Definition

Collage is a web-interface design style that assembles a composition from visibly heterogeneous fragments — photographic cutouts, illustration, treated type, texture — layered at clashing scales and angles with their seams left exposed. Nothing is blended between materials. Because fragment surfaces are visually unpredictable, running text is placed on its own clean ground rather than over the assembly.

Core principles

• The seam is the subject. Boundaries between materials are shown, never smoothed.
• Scale is dislocated deliberately. Mismatched proportions produce the surreal quality that defines the style.
• Layering is ordered. Fragments cross one another in a stated front-to-back sequence.
• Materials are mixed. A single material produces a gallery, not a collage.
• Text gets clean ground. Reading copy sits on a solid surface rather than on the assembly.

Visual characteristics

• Three or more fragments with torn, cut, or hand-traced edges.
• Objects rendered at proportions unrelated to their real relative sizes.
• Overlapping pieces with explicit stacking order.
• Photography, illustration, treated type, and texture coexisting.
• Fragments rotated visibly off-axis.
• Text confined to solid panels or deliberately empty regions.

Rules

1. Irregular cut edges. Fragments read as cut rather than cropped. Acceptance criterion: At least three images have irregular, non-geometric edges; rectangular and circular crops do not satisfy this rule.

2. Dislocated scale. Proportion is broken on purpose. Acceptance criterion: At least two elements representing objects of comparable real-world size differ in rendered scale by a factor of 3 or more.

3. Ordered overlap. Layering is explicit. Acceptance criterion: At least three elements overlap with a declared z-index.

4. Mixed materials. The assembly is heterogeneous. Acceptance criterion: At least two distinct material treatments coexist among photography, illustration, type-as-image, and texture.

5. Off-axis rotation. Pieces are visibly angled. Acceptance criterion: At least two elements carry a rotation greater than 3°.

6. No blended seams. Boundaries remain visible. Acceptance criterion: No fragment boundary uses feathering, blur, or a blend mode that dissolves the edge into the layer beneath it.

7. Text on its own ground. Reading copy is never set over the assembly. Acceptance criterion: Every text element sits on a solid panel or a uniform background region and measures at least 4.5:1 against it; no running text is placed directly over a busy fragment.

Avoid

• Rectangular or circular crops used as fragments.
• Fragments arranged tidily with no overlap.
• Uniform scale across all fragments.
• Running text placed directly over a cutout.
• Feathering, blurring, or blending the seams between fragments.
• A composition made from a single material.

Acceptance criteria

• Rule 1: At least three fragments have irregular, non-geometric edges.
• Rule 2: Two comparable objects differ in rendered scale by 3× or more.
• Rule 3: At least three elements overlap with declared stacking order.
• Rule 4: At least two distinct material treatments are present.
• Rule 5: At least two elements are rotated more than 3°.
• Rule 6: No fragment boundary is feathered, blurred, or blended away.
• Rule 7: All text sits on solid ground at 4.5:1 or better.

Blocking failures

• Running text is set directly over a photographic or illustrated fragment, where the background varies at the scale of individual glyphs and no single text color can remain legible across it.
• Meaning depends on the spatial arrangement of overlapping fragments alone, so the content is unavailable to anyone reading the page linearly or through assistive technology.
• Interactive controls are placed over fragments without their own ground, leaving their boundaries and focus states indeterminate.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Fragment count reduces at narrower viewports rather than fragments being scaled down uniformly; three irregular pieces (Rule 1) is the floor, below which the composition stops reading as an assembly.
• Scale dislocation (Rule 2) is preserved by keeping the enlarged element large and shrinking its counterpart, not by normalizing both toward a middle size.
• Rotations (Rule 5) may reduce toward 3° where a steeper angle would cause clipping at narrow widths, but at least two elements stay visibly off-axis.
• Rule 7 is re-verified after every reflow without exception, since a text panel that clears the fragments at desktop width frequently lands on them once the layout collapses.
• Text panels grow rather than shrink as the viewport narrows, since the available clean ground is what limits how much copy the composition can carry.