Jeanyoon Choi

← Back to all posts

System Art: Module - Layout and Layers

Updated: 3/23/2025

When thinking about system art - multiple modules composed together, I easily associate the image of grid-based composition, Multiple modules positioned in a grid layout, with each grid square block being a module.
However, grid is not the only layout that can be used to compose system art. Speculating further layouts is crucial to expand the boundaries of system art. For this essay, let’s assume the situation where the system is composed of a combination of multiple modules - Can be agents, profiles, components, etc. - and when we need to display this composition in the form of a layout.
Grid: Most simple. Most intuitive and modular, easy to compose. But grids are not all the same grids. The most simplistic grid has all the same size. Some variations might be: Part of the module gets larger irregularly. Grid size changes dynamically, zoom in and out (Case of ≠)
Grid - Displayed in different levels: Reference to Lee Ufan (From Points)
Tab (Bit Chaotic)-Like Aesthetic: Different tabs (Internet tabs/sometimes explicitly) opened in a single screen - Each portraying a sub-system?/agent.
Circular Layout: Remember Lee Ufan also talked about circular layout
Map Layout: Can be about explicitly having map, but also implicitly metaphoring -- the map-like interaction, the map-like layout. Spatially distributed? Maybe rhizomatic map? 
Collage - Not smth i tried yet, but can be Basquiat-like - In this case, different unit is not positioned within the same layer, but rather, different layer/composition/location/size/appearance. And from this chaos, there emerges a pattern - A collage pattern. Overlaying one with another? How to design a chaotic-yet-orderly collage?
It can be also expanded to 3D:
Cube Layout: Grid in 3D. 
Cylindrical Layout
Sphere/Semi-Sphere Layout
Panopticon Layout: Related to social & system (dystopia system)
Other shapes: Spiral Layout
Destructured/Post-structural/Hyperbolic Layout:
Hyperbolic Layout: Chronology
Post-structural/Destructured: Omega
In my prev works I already considered how to position each module within a single screen - to create a visually comprehensive layout as well as a visually stunning layout, and deliver the feeling I want audiences to deliver
Cases:
Chronology: Hyperbolic layout, bell curve/other different functions/indicators, 12 different layouts. 12 clocks → My assumption: Doesn’t only have to be 12 layouts. Can be even more! Hypothetically even more! Also what makes it interesting: morphing between different layouts.
Nonequality: Representation of grid layout: Expanding grid layout. Initially just a line, but increases in a grid manner. What grid & units can make? What is the value of expandability? Also quotation on state-based approach: Each grid unit had separate states (Text, Image), as well as one global state (Global Nonequality) → Even with this minor use of states, you can create some system, some ecosystem, some system dynamics to be visible. 
Omega: 3D Layout. First starting cylindrical. Then destructing based on user interaction ‘shaking the phone’. I think it was the first good approach to deconstructivist 3d layout, inspired. Also note it had two layers-based positioning: One ‘Row’ of lines (circular composition of elements), and different rows aggregated with each other. What was the limitation though? I guess there are many unexplored deconstructivist territories - How to generate a good deconstructed layout via algorithm? How to make this process of deconstruction interactive? Can a deconstructed shape consist of a couple of parameters -- just as system -- all adjustable, and interactive from the user side?

Also in the context of Multi-Device Web Artwork, it is not only about the matter of layout within a single screen - It can be a matter of layers. 
Multiple modules -- organised in some manner - form a layer. 
Multiple layers -- again organised in another manner - form another layer.
Multiple layers --- again organised in another manner - form another layer.
Module - Layer A - Layer B - Layer C - …. And further layers proceedingly
Or more interestingly: Module - Layer A - Layer B - Layer C - … - Layer Z - Module (Conceptually connection is circulatory -- not sure if this will be 100% possible though)
Practical example: Omega. Two-layer composition system.
Conceptual: Let’s imagine a grid. Multi-device setting. Each device: Layer 1, Within each device is divided by four units: Each unit: Layer 2. (50vw 50vh) Within each layer: again divided by four: Layer 3 (25vw 25vh) … So on and so forth. What will this system consist of? What is the inter-layer differences & within-layer similarities? How to design this precisely?
Junk Site -- Should be Symphony of Civilisation + Rapid Changes -- Symphony of Civilisation Movement 3, but website version. What will this composition consist of? How to display junk sites?
The key about layer/layout: Each module is operating/built upon a specific ‘system’, ‘mechanism’, ‘algorithm’ -- and different modules might be independent… But when looking at them thoroughly, in a multiplied/multi-device manner - different aesthetics/overviews emerge… The whole is never the sum of the parts! (Paul Eisenmann) → That’s why layout/layers/distribution/composition/collage is important.
So traditionally: Grid-based layout + multiple modules integrated on top of the grid
But speculatively: Can this be a collage-layout/experimental layout? Like collaged, disordered composition - but actually, the part of these collages/the unit is all system-based generation. 3D Collage, 2D Collage, random-yet-ordered composition, ordered-yet-random composition.
한남대교를 지나가는 무수히 많은 차들과도 유사 → 각각의 차들은 일종의 합목적성을 가지고 다리를 건너지만, 그 다리를 위에서 바라본다면 완전히 다른 장관, 하나의 흐름, 하나의 자본주의적 흐름, 하나의 살아숨쉬는 생명체, 도시라는 유기체가 인식됨


Text written by Jeanyoon Choi

Ⓒ Jeanyoon Choi, 2025