An experimental tracing paper interface tool
About depth and materiality on the web
We’re past due for a change of the metaphor of desktop, folders, and files. The web1 has borrowed from the material world but in doing so it constrained itself to never look beyond it, ending up with a million personal websites that look like a literal desktop with coffee mugs, sheets of paper and fake sounds. We’re importing surfaces and appearances rather than operations and logics. Flusser distinguishes the image (a surface, a residue) from the gesture (the operation that produced it). When the web borrows from the material world it has mostly imported images, I’m interested in importing something closer to gestures.
Possibilities are endless now, so endless they’re even overwhelming at times. Technical constraints have been lifted, to an extent, leading to what to me is a great moment for creating proofs of concept. I’ve been prototyping tools that take operations from the material world, analyze them, borrow the logic, decide which parts to keep-invert-extend-translate, and produce artifacts using web native properties in order to go beyond them. And so this edition presents two things: first, an argument: we can borrow operations and logics from the material world beyond surface level and second, a tool based on tracing paper, the tool is both a research instrument2 and an approximation of what importing gestures could look like on the web.
In The Discipline of Tracing in Architectural Drawing3 (TAD from now on), Dr. Ray Lucas states that tracing can constitute a form of knowledge production in architecture and defines the operations of tracing paper. Working with this paper as scaffolding, I landed on two main operations I want to explore: layering and generating. I’ll now expand on what they are to me, why I’m drawn to them, how they may be relevant for the web, and how they are expressed through the tool I created.
Layering
Tracing paper is widely used in architectural drawing, which is where I first encountered and used it extensively as a thinking tool. The contrast between one base layer of clean paper and multiple layers of messy tracing paper on top is the perfect environment for the iterative nature of the design process itself. Adding layers on top of each other, which allows lines from one drawing to be superposed onto a second drawing, has been replicated by software4 like Photoshop, Illustrator, Figma, CAD, etc. But the operation has been half borrowed: digital layers are fully transparent, leading to confusion where you think you’re working on one layer but you’re actually not, or deleting sections because the difference between them is represented by a faint border color when selected. Layering, then, has been brought to the web but not quite completely, and my tool is exploring the question: what if we created visible layers instead of transparent ones?
My proposed answer and the foundational idea of this tool is to first weave two properties into each layer: opacity and blur. Neither opacity nor blur on its own are able to convey the effect of tracing paper, it is only by merging both that we get the effect of semi-transparent paper. An aspect I explicitly wanted to avoid was to mimic exactly the appearance that tracing paper has in the real world5. Opacity and blur are not for making it look like but to create the conditions of. Again, my interest is to take the original material as a source and add something else: functionalities that are only possible through the web.
Layers, then, are the foundation; what we want next is to find the ability to stack them and compare states. In Lucas: “the stack is considered as simultaneously singular and multiple: the support has that thing paper is often assumed not to have: thickness rather than merely surface.”6 There isn’t any meaningful difference visually when we stack transparent layers, opaque layers instead create a sense of depth, of something behind what we have in front of us. The web has layers and some could argue that z-index creates depth, but depth isn’t fully visible yet. What would happen if we expanded on that, what if we added a sense of thickness using multiple stacked layers? In how many ways can we expand what a multiple surface can look like on the web?
In my tracing paper tool we can add sheets that augment the opacity of the drawing and create this sense of depth on the nodes that stay clear, like a window into the plate I defined as the base layer. And if we invert the logic of the tool, with the layer vs nodes buttons, we can also stack nodes, as if they were sections of tracing paper that would only alter one defined space within the drawing. Addressed in TAD as: “the multiplicity of the drawing act allows a conceptual moving between layers, back and forth rather than a straightforward progress from A to B to C and on.” My intention here is that by making possible this back and forth movement on the web we can use layers to generate something new, to turn a static image into a dynamic composition, to transform it into an actual thinking tool, where the process of figuring out a design solution can be made visible7.
Generating
Tracing (the activity of using paper on top of something else, and copying every line) is made possible by the use of tracing paper (the material substrate for the activity of tracing) and has a long history. In painting, tracing was used as a way of replicating the work of the masters and learning from them, more importantly, it was used to find your own style and invent something, in Lucas: “tracing represents a form of copying which opens the original source up to intervention and interpretation: that the initial copying moves beyond replication.”
Without getting too in the weeds about defining representation, copying, imitation which are all fascinating art theory topics, the act of tracing that creates beyond replication and allows you to add your own interpretation to an existing material is an idea I’m fascinated by. And so when I mentioned earlier that my aim wasn’t to imitate the material, I was also thinking about this property: what is my interpretation of tracing paper? How can I go beyond replication? The act of “simultaneously addressing the ‘original’ drawing and the further possibilities it contains” is, for Lucas, about bringing out something new from something existing. Which is my intention here, both with the tool and the possible outputs of the tool.
There’s a definition I adhere to that says that design is the generation of variety and the reduction of variety. This combines really well with another concept I stand by: while creating a new thing, we should aim for adding only 3% new to something that already exists ( because everything is a remix anyway).
The first aspect of generating and reducing variety that I’m interested in is made possible by selecting and repeating certain aspects of the original. In TAD: “Tracing is a selection procedure which is distinctly manual in nature, it allows for repetition and serial production: variations on a theme might be produced for comparison.” We select something interesting to us, leave something else behind, duplicate, and continue working on it if we think it has potential. What that thing is and why is it special, it is only known to the person working on it. Some people may even say it depends on your individual Taste8. And in my experience, this is the stage where happy accidents happen and great new things may come up.
After the selection, comes the second aspect that makes generating possible: repetition through the layering. There are three static plates in my tool9 that can be reinterpreted through the use of layers and nodes as ways of repeating the underlying design. We manually select sections that are interesting to us to explore and with the nodes we generate new ways of seeing the drawing, the tracing is done exclusively using reveal effects that are native to digital tools. We are effectively copying, not by redrawing manually, but by reproducing a portion of the selected piece and making alterations. The tool goes beyond replication through effects that are only possible through the web.
The nodes are design elements themselves, said by Lucas: “tracing can also be a form of compositing, allowing elements to be gathered together from a variety of sources and placed into an overall composition; pieces contributing to a whole.” The sections we are repeating and altering are made part of a composition, and an additional layer of reinterpretation comes from altering the nodes’ shapes and appearances. This is another portion of expanding the possibilities of the material: creating sections and openings more than once, dragging and rearranging both the nodes as openings or sections without having to replace the base layer. The plasticity of the web is made visible through the temporary nature of the process.
The plates can be reworked over and over10, preserving the plate while generating variety, creating multiple versions of the original with a layer of compositional nodes. The operation of tracing persists, yet changes, creating newness incrementally, and we see the image through multiple lenses. The tracing tool is proof we can borrow operations that go beyond what the material world does and push through the purely visual, creating something that both resembles the original at its core and expands on its possibilities. The tool demonstrates one way of designing interfaces oriented towards the design process itself, one possible alternative for thinking while making.
Tracing is one material that I’ve been interested in for quite a while but it is only an instance of possible materials that could be introduced to the web. Operations like folding and weaving come to mind, concepts like annotations, details, decay or scaffolding, materials like other types of paper or textiles. We have infinite possibilities: in how many ways can we do more gestures and less imitation? Stay tuned for more(?).
I’m using “the web” loosely here to include everything that lives on the internet, including but not limited to software, websites, apps. IMO the line between these has blurred and will continue to blur.
The tool is part of a longer term investigation project, where I propose simple hypotheses around my conceptual interests and test them out on the web. I’m using sites.laura.computer as a home for them.
Lucas, R. (2017). The discipline of tracing in architectural drawing. In C. Johannessen, & T. Van Leeuwen (Eds.), The Materiality of Writing: A Trace Making Perspective (pp. 116-137). (Routledge Studies in Multimodality). Routledge.
I often wonder if our output that comes from working mostly in Figma is being shaped by iterating side by side in a canvas instead of building on top of what was made before. The action of repeating a frame is fundamentally different from having a frame and then adding a copy on top, where you can still see what is behind and decide which parts to keep and which parts to iterate on.
At some point in art history, paintings were about representing reality as faithfully and exactly as it was, and it was only after decades of experimentation that painters moved on and started distorting, affecting, modifying the frame and actually exploring what else was possible besides mimicking. This comes back to my criticism of desktop and paper looking websites and to my interest in expanding and investigating what else is possible.
“The multiplicity of the drawing act allows a conceptual moving between layers, back and forth rather than a straightforward progress from A to B to C and on. This allows the drawing to revive abandoned ideas which might come into use or relevance once other decisions have been made.” Lucas, R.
I’m reaching here towards a future version of this tool that has more than three plates as a base, where the actual starting point is a design that we are working on and iterate by use of the stacking of opaque layers that inherit the elements of the first design, and by a series of operations, we can iterate on top of the drawing instead of by the side of the drawing.
Taste with a capital T as a joke around that notion of taste that has been circulating recently in the corner of tech twitter where i spend my scrolling time, where Taste is one singular entity that people can grasp, aspire to, and even capitalize on. Conflating Taste with capital T with “good taste”, whatever good taste means. As a big fan of kitsch i feel compelled to make fun of all of it.
The plates of botanical engravings were an excuse. I love what they look like and the process of making this tool started with them. I made a small website for my wedding rsvp using them as the background and I wanted to publish the website without publishing any private information, so I started recreating what I made but it felt weird to just change the text. So I started to think of a collage with tracing paper on top, the tool evolved and then somehow I ended up with the current tool and 1500+ words on the topic.
See some of my compositions or add your own to my open are.na channel.
That's a super interesting project!