Composition

What is composition in visual design?

Composition is the arrangement of elements within a frame — how things are placed relative to each other and to the edges. A good composition feels inevitable: nothing could be moved without the whole becoming weaker.

Every page on this site is a composition. The hero title, the sections, the dividers, the footer — all are placed, not just stacked. Switch styles and watch how the same elements rearrange: centered in Art Deco, left-aligned in Swiss International, full-width in Web Brutalism.

How does symmetry create formality?

Symmetric composition — mirroring elements across a central axis — creates feelings of order, authority, and ceremony. It is inherently formal because it requires intention: nature rarely produces perfect symmetry.

Art Deco is the most symmetric style on this site. Every heading is centered. Every ornament mirrors itself. The page has a spine — a vertical axis that everything hangs from.

Victorian uses symmetry for headings and frames, but allows asymmetry in body content. This creates a hierarchy: symmetric = ceremonial, asymmetric = practical.

The limitation: symmetry can feel static. Nothing moves in a perfectly balanced composition. For dynamism, you need asymmetry.

How does asymmetry create dynamism?

Asymmetric composition places elements off-center, creating tension and movement. The eye is drawn through the composition rather than resting at the center.

Art Nouveau achieves balance through asymmetry — like a plant leaning toward light. Elements are not mirrored but counterweighted.

Swiss International uses asymmetric grids — left-aligned text creates a strong left edge while the right edge is ragged and free. The composition is anchored on one side and open on the other.

Memphis uses deliberate imbalance — not balanced asymmetry but active instability. This creates maximum energy at the cost of calm.

What is visual weight and how does it affect composition?

Visual weight is how 'heavy' an element feels — how much attention it demands. Dark elements are heavier than light ones. Large elements are heavier than small ones. Textured elements are heavier than smooth ones.

In composition, heavier elements pull the eye. A small, dark element can balance a large, light one — like a seesaw where a heavy child sits closer to the center.

Dark Luxury is mostly 'light' (thin type, minimal elements) with one 'heavy' accent (the gold or rose color). The heaviness of the accent is amplified by the lightness surrounding it.

Victorian is uniformly heavy — thick borders, bold type, dense ornament. When everything is heavy, hierarchy must come from relative weight rather than absolute weight.

How does the edge of the frame affect composition?

The frame — the edges of the viewport or container — is not neutral. Elements near the edge feel tension with it. Elements at the center feel stability. The relationship between content and edge defines the composition's energy.

Wide margins (Art Deco, Dark Luxury) isolate content from the edge. The content floats, surrounded by space. This creates focus and luxury.

Narrow margins (Victorian, Memphis) push content toward the edges. The tension between content and frame creates energy and density.

No margins (Web Brutalism) eliminate the frame entirely. Content touches the edge — or rather, the edge does not exist. The viewport is not a frame; it is simply where the content happens to end.