This series I have been developing since 2019 deconstructs websites into abstract geometric images. This concept branched off from another, as-yet-unshown experiment around visually corrupting website content—while working on that process I had ended up with a script that reduced a website to a bare-bones representation of the DOM hierarchy, and iterated from that point.

The DOM, or Document Object Model, is a tree structure generated from a page’s HTML markup. Most of my job involves outputting or manipulating HTML one way or another, and I spend a lot of time thinking about these sorts of structures. DOM “depth” (level of nesting) can be a source of performance issues, but I’ve begun to think of the overall structure of the page as a kind of “anonymous fingerprint” for a website. Anonymous, because you could not easily reverse the process; fingerprint, because the unique structure is tied directly to the content on display.

One kind of tree easily maps to another: the page hierarchy of a complex website becomes a series of nested SVG rectangles, which I can draw into a sketchbook using my pen plotter.

A happy accident in Inkscape while plotting gave me the more vertical orientation for each grid element, which I found more satisfying than random walks between object centroids (right page, above).

Why plot them at all, though? The physicality introduces irregularity, for one; these images in a sketchbook feel much more error-prone and approachable than a pure SVG viewed on a screen. The way they evoke circuit diagrams or architectural plans also comes across more when you’re holding a book in your hands. However simple the site (the one directly above is my own site, which is less complex than the New York Times, or GitHub, both represented earlier in this post), I’m satisfied with the architectural impression these images give.

Having them on paper also permits collaboration. This final piece is a dual portrait created as a wedding gift for friends late last year. Their “meet cute” involved social media, so I extrapolated an interlaced structure from their respective online profiles. (Can you tell which side represents Facebook, and which is Twitter?) My partner Emily Garfield then improvised over the plotted image with watercolor, adding a level of depth beyond the schematic black-and-white images shown previously.

We intend to continue exploring this process over the coming year.