Composition
Arranging the whole. How elements relate to each other and to the frame.
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.
The eye follows a natural path between power points. Elements have breathing room and visual weight is balanced across the frame.
Toggle between layouts to see how position creates — or destroys — visual balance.
How does symmetry create formality?
Symmetric composition — mirroring elements across a central axis — creates feelings of order, authority, and ceremony. In graphic design, strict symmetry often feels formal because elements are deliberately organized around a central axis.
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 achieves formality without centering — heavy borders, ornate frames, and dense layering create ceremonial structure within a left-aligned layout. The weight of ornament provides the gravitas that Art Deco achieves through symmetry.
The limitation: strict symmetry can feel static because the eye has less positional tension pulling it across the composition. For dynamism, you need asymmetry.
Compare grid structures
A grid divides the page into columns. Content flows into these columns, creating a predictable rhythm that guides the reader through the material.
Narrow columns create shorter lines. The eye returns to the left edge more often. Reading becomes faster, more rhythmic, more structured.
Wide single columns allow longer sentences and more complex thoughts. The pace slows. Each paragraph becomes a self-contained unit rather than part of a flow.
A single column supports a continuous reading flow. Line length matters: when lines become excessively wide, returning to the beginning of the next line becomes more difficult.
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. Visual weight can be influenced by size, value, contrast, texture and position. A large element often attracts more attention than a small one; a high-contrast or visually dense element can feel heavier than its surroundings.
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.
Composition across StyleShift
Each style on this site makes fundamentally different composition decisions. The same content occupies space in radically different ways depending on which design system is active.
Swiss International — rigid grid, wide content area (1100px), two-column structure. Alignment is always left. Everything snaps to the grid. The composition communicates order above all.
Art Deco — narrow content width (800px), centered alignment. Generous vertical spacing creates ceremony between sections. The composition breathes upward, like architecture.
Brutalist — in our interpretation, full-width sections and deliberately irregular spacing reduce visual comfort and create a more confrontational composition.
Nordic Minimal — moderate width (720px), left-aligned, generous whitespace. The composition disappears, leaving only content and air.
Memphis — tight spacing, bold section breaks, playful asymmetry. The composition has rhythm like music: loud, quiet, loud.
Victorian — narrow, dense, heavily framed. Ornamental dividers between sections. The composition fills space because empty space would feel unfinished.
Switch styles now and watch the same text redistribute itself across the page. The words stay; the architecture changes.
What we learned building 18 compositional systems
Building 18 different layouts for the same content taught us that composition is not decoration applied after writing. It is a fundamental part of how content communicates.
Content width is a stronger signal than you expect. In our layouts, moving from 1100px to 720px noticeably changed the reading experience: narrower layouts felt more focused and intimate, while wider ones gave the eye more room to move. We tested every style at multiple widths before settling.
Symmetry is easy to implement, hard to make interesting. Centered, symmetrical layouts look good immediately but become predictable fast. We found that the most engaging symmetrical styles (Art Deco, Dark Luxury) rely heavily on vertical rhythm to compensate.
Asymmetry requires more visual weight decisions. When you leave center, every element needs a reason for its position. Swiss and Brutalist styles work because the grid provides that reason. Without an underlying structure, our asymmetric layouts quickly became chaotic.
Section spacing communicates pace. Large gaps between sections slow the reader down (Nordic, Art Deco). Tight gaps create urgency (Memphis, Brutalist). We tuned section spacing independently for each style because a universal value never worked.
The frame changes everything. Borders, dividers, and ornaments compress content visually. Victorian and Art Nouveau use them liberally; removing them entirely (as in Nordic) makes the same content feel considerably more spacious.