graffik

Research on spatial arrangement or composition or layout (2022)

Where goes what? is a frequent challenge in graphic design practice. It involves embodied spatial knowledge, a sense for balance, and the ambition for a meaningful arrangement. I am exploring these aspects using computer-based methods, including machine learning techniques.

One goal of this research is to make better layout tools.

Layout of three elements depending on just one coordinate. Try it out, it follows your mouse’s/finger’s position.

This simple example clearly shows that layout is about relations. Shouldn’t our design tools take this into account? Think of a layout tool like this:

Try it out, it follows your mouse’s/finger’s position.

The question of balance

Graphic designers move around the elements in their design for a sensible composition. This is done in many cycles of re-arrangement and evaluation. At the end, often some kind of balance is achieved. This insistent practice is hidden from the public eye, it is a tacit skill every designer works with.

((( Move the circle with your mouse ))) The canvas is divided into 4 areas. The mean of all pixel values in each quarter area is calculated. If a:d = b:c then there is balance.

‘Spatial feeling’ (Kepes, 1969) or the expressiveness of ‘above’ and ‘below’

Since long, artists and designers are preoccupied with the expressiveness of compositions. In Point and Line to Plane (Kandinsky 1947 [1926]) writes: “The ‘above’ gives the impression of a great looseness, a feeling of lightness, of emancipation and, finally, of freedom. […] The effect of ‘below’ is completely contrary: condensation, heaviness, constraint.” He even provides an algorithm – here is my computational interpretation:

Interact with it and see the code here: https://codepen.io/j-raff/full/LYzPWBK.

Müller-Rockmann: Grid Rhythms = layouts as/with rhythms

Layouts are taken here literally as rhythms. Modular grid layouts can be filled analogous to a sequencer. Placing a headline, text, image, and whitespace also produces a drum sound. That way the layout can be appreciated with eyes and ears. Try it out and see code at https:editor.p5js.org/jraff/sketches/3sVKVGSuU

Müller-Rockmann: Grid Rhythms, explained.

This is also a playful way to obtain data to train an artificial neural networks (it is a pattern in data finder) that generates new, preferred layouts:

Müller-Rockmann: Grid Rhythms 2x3, based on data from a “trained” machine.