Skip to content

Composition12

Grids, structures, density and rhythm.

Elements

specimen pending Bento Grid Adopting this means dividing a section into rectangular cells of deliberately unequal size that share a single underlying grid and tile it without leaving holes. Each cell is self-contained and carries one complete idea — a fact, a metric, a feature, an image. Rank is expressed by area: one or two large cells carry the headline and the remainder are subordinate, so emphasis needs no change of colour, weight or rule. It is a section-scale device, not a page system: a page may contain a bento block among ordinary sections. Cell-size variation is definitional, not incidental — equal cells make a card grid, and cells of ragged height make a masonry layout. In Modern SaaS specimen pending Modular grid Adopting this means the page is divided into columns and those columns are crossed by horizontal flowlines, so the surface becomes a matrix of modules separated by gutters. Every element — text block, image, caption — occupies a whole number of modules and aligns to module boundaries, and groups of modules form spatial zones reserved for a purpose. The consequence is that position and interval carry hierarchy: an element is important because of where it sits and how many modules it claims, not because it has been enlarged or coloured. The module count is a decision, not a default; a finer matrix permits more arrangements and enforces less. In Swiss Style specimen pending Panel sequence Adopting this means the surface is divided into discrete bordered panels separated by gutters, and those panels are read in a fixed order rather than scanned. In the Japanese convention the order is right to left and top to bottom: the eye enters at the upper right, moves left across a row, drops to the next row, and the final panel sits at the lower left. Panel size and shape are the pacing instrument — a large panel holds the reader longer, a narrow one accelerates. Because order is fixed and directional, reading direction is a hard property of the module and cannot be mirrored without inverting the meaning of every sequence built on it. In Manga specimen pending Mascot-Led One recurring character, character reacts to state, full expression sheet, bold flat colour specimen pending Dashboard / Data-Dense Not yet described. specimen pending Deconstructed / Broken Grid Not yet described. specimen pending Infographic-Led Not yet described. specimen pending Marquee / Ticker Not yet described. specimen pending Material / System Design Not yet described. specimen pending Monogram-Led Not yet described. specimen pending Sketchbook / Wireframe Not yet described. specimen pending Specimen / Catalogue Not yet described.

Where structure carries the look

Manga Japanese Minimalism Editorial Modernism Modern SaaS Maximalism Swiss Style Blueprint Dystopian Bureaucratic Teletext Web 1.0 Cartographic Scientific Archival Web Brutalism Mid-Century Modern New Wave Typography Mexican Graphic Vernacular Broadsheet Anti-Design Scrapbook Developer Dark Fashion Editorial Internetcore Bauhaus Quiet Luxury

Wanted

asymmetric sparseNeeded by Japanese Minimalism
A layout module for very low content density with deliberate off-centre placement against a dominant void.
multi-column print gridsNeeded by Editorial Modernism
A layout module for multi-column continuous-text setting on a baseline grid.
layered compositionNeeded by Maximalism
A layout module for overlapping, z-ordered composition without a settled grid.

Feedback