Design Deconstruction

To me, the hard part about being creative is that you’re always trying to look for a new path.

Sure, you’ve done things a certain way for a long time, and it’s worked for you. But it’s hard not to want to dabble in new directions just to see where it takes you, and hope that it shakes out a new idea or two.

Which is perhaps the reason I’ve started to fixate on a weird idea—that design tools might sometimes work better without an attached graphical interface. Rather than graphics in, graphics out, maybe sometimes it should be text in, graphics out.

The myth about design is that it’s a function of the creativity-driven right side of the brain. But I think that’s only half the story. See, with design, there’s a lot of hidden math involved. Ask your favorite newspaper or magazine designer about pica rulers and column lengths, and you’ll get what I’m saying.

Put another way: Designers need to be creative problem solvers, painting the perfect canvas, but they also need to be pragmatic, considering the realities of “yes, it’s long, but we have to fit this text.”

Tools like InDesign and Final Cut Pro have traditionally combined the canvas and the broader frameworks that make a good design, mixing tools with differing cognitive loads into one interface. But what if design needs to be a bit more deconstructed, where pieces are more separated out, perhaps not even graphical? What if you designed with code or a text editor—would that lead to better results?

It was an idea I stumbled upon by accident, really.

The spark that caused my weird design-with-code obsession

This weird interest started out of a genuine frustration.

I wanted to try a couple of experiments with vertical video, seeing if I liked it and how comfortable I felt with the idea. The problem is, I wanted it to match my general style, which is heavily built around a heavily filtered grayscale imagery.

Unfortunately, all the apps I tried kind of sucked. CapCut, the ByteDance-produced app for creating TikTok videos, seemed unstable, and a lot of other stuff came with spammy upsells. Plus I couldn’t get quite the design I wanted—a faded black and white look that’s a little pixelated, with a slightly choppy frame count.

The only thing I actually liked that could edit mobile videos was Canva. However, it could only get me so far. So, to fill the gap, I did something weird: I started testing whether I could filter videos with ffmpeg to my liking in Termux, the Linux terminal program for Android. Then, in a second step, I’d move the videos to Canva, to finish the edit (including adding the text in my desired font/design). And I’ll be damned, it worked:

I became curious about pushing this idea further, to social objects, and started working on tools to build quick graphics from Markdown files all on my phone—something you can make happen with HTML and CSS, basically. Cool idea, worked pretty simply:

I thought that was enough, and I didn’t need to take this unusual thought any further. But then I saw something that blew my mind.

The guy who edits videos with Vim

Here’s a question I’ve never thought to ask myself: Can you make a full YouTube video—complete with animation, graphics, and so on, in a terminal?

Even with my rendering experiment, there’s no way I would have said yes before a month ago, but then I saw something that really threw me for a loop: A dude who edits his YouTube videos in Vim.

Look at this crazy-ass video. He made this in Vim!

For the uninitiated, this is basically saying that you use scissors to cut a watermelon.

I will admit it was by a guy named “Vimjoyer” whose gimmick is basically doing everything with the popular text editor. (I personally use nano like a lamer.) But fortunately, the how behind it doesn’t need vim to be useful.

Essentially, he is using a tool called Motion Canvas to push his content around so that he can create animations on the fly, shifting them around as desired. This is not totally dissimilar to what Flash could do with ActionScript back in the day, but it’s deconstructed so it’s code-first, GUI interface second.

I was curious, so I started messing around with it using the same on-my-phone format as the earlier ffmpeg experiment. Alas, Motion Canvas didn’t work all that well for such a constrained setting, as it required use of a browser. However, I spotted a similar tool, Remotion, that worked entirely within the command line.

But one change precludes another—it needed Playwright, a headless browser tool. As it’s made, that doesn’t work in Termux at all, as Playwright doesn’t have any builds compatible with Qualcomm chips. But I found someone who had solved this exact problem, and that let me do this:

I can write the copy for these social objects in Markdown—even chain them together—and have it make a bunch of social objects for me, all meticulously set up in my style.

Sound like a lot of work to avoid working in a graphical interface? You bet your ass it is. On the plus side, you only really have to do a complex, repeatable task once (perhaps with some maintenance down the line).

But the thing is, you can use tools like Claude Code to make these sorts of weird connections work—and maybe tell them, after the agent insists you can’t run Playwright on your phone, that it’s actually possible. Then, if you want to dive in further, that’s when you take the time to learn it yourself and build upon the idea you’ve been conjuring.

(The trick I’ve been using lately: Tapping into the super-cheap DeepSeek Chat model via Claude Code Router, an implementation of Claude Code that lets you use models not made by Anthropic. That gives me additional room to screw around with oddball experiments like these, while being relatively minimal resource-wise. I put in $10 a month ago and have yet to run out, while still getting fairly decent results.)

A new script for page layout

But I do think there are further frontiers this basic text-driven ideal could be taken. Lately, I’ve been fascinated by Typst, a scripting technology that is seen as a competitor to LaTeX.

(Let me take a pause here to admit that LaTeX users have been designing with code for a long time. And there are probably some people who build stuff using PostScript they coded by hand. I bow before you, as a guy who started out as designer.)

It’s a tool that is designed for laying out technical documents, with an emphasis on things like math equations. But it could also be used to make all sorts of documents, like zines or even wall calendars. This is actually the perfect format to build a wall calendar, because it’s a highly templated format that can get very complex to manage in something like Affinity or InDesign. Here’s an example I built as a test:

But it goes further than that. To me, I think there’s an opportunity to separate concerns inventively. For example: Let’s say you go into Affinity or Inkscape to build an SVG with the basic shape of your layout, or even a basic background, but then you import that graphic into Typst format. That moves you from texture to copy-layout. This is what I mean about separating concerns. Too often, design software tries to awkwardly mesh together these processes in a way that makes nobody happy.

Typst won’t get you all the way there, I will admit. It does not currently support blend modes, for example, meaning that you have to import raster graphics or SVGs to handle all of that. Same with clipping paths and masks. But I think there’s a world where Typst could have all of these things, making it an effective publishing tool without forcing you in canvas mode when you’d be better served by a framework.

We have a pretty good text-based web design framework in the form of HTML, JavaScript, and CSS. With a few additions or some extensions, Typst could become that for print.

Graphic designers are secretly left-brained people

One thing that I think people don’t realize about graphic design, particularly the print form, is that it’s creativity, but there’s also math going on. It’s not that far removed from architecture, if you think about it.

Any newspaper designer will tell you about pica rulers and column inches until the cows come home. The secret about news design if that it’s a bunch of right-brained people who can think left-brained when the moment shows itself.

If you had asked me about this 15 years ago, I might have considered editorial design all right-brain thinking. But I think the left side of the brain was always there.

I think the thing that ultimately made this all click was probably Markdown, particularly an editor that presented the split in a way I couldn’t ignore. Fairly forgotten at this point, but deeply influential at the time, the 2010s-era MacOS Markdown editor Mou basically let you lay out Markdown and see the visual output in real time. The story of Mou ended in tears—the designer basically ghosted a bunch of people after a crowdfunding campaign—but it still inspired me, personally. (The popular open-source editor MacDown, recently revived as MacDown 3000, is something of a spiritual successor to the defunct Mou.)

I’ve been trying to figure out a way to convey all of this, probably, ever since I started ShortFormBlog in 2009. That site began with the provocative idea that you could design individual posts at a micro level rather than making absolutely everything look the same—as long as you were willing to give everything the right framework to work within.

We can translate that idea to all sorts of objects. We just need to think beyond the parameters in front of us. I’m not quite at the level of Vim video editor guy just yet, but it’s something to aspire to.