Recently, I had a very novel design experience: I created a website entirely in the browser, using only default CSS colours and system fonts. With the exception of a squiggle posing as a logo, not a single draft was made in Figma. No pencil ever touched paper. The whole process only took a few hours, and I loved every second of it.

Normally I wouldn’t advocate such a radical approach. I generally think code is too slow a tool to explore a range of different ideas quickly, and comparing one idea against another is cumbersome at best. But this time the circumstances not only allowed for it, but downright invited it:

First of all, the site in question is the home of Web Materials, a podcast about – you guessed it – the material of the web. It made a lot of sense to make the inaugural experience consist only of the basic building blocks of HTML and CSS.

Second, I had no clients to appease, only myself and my co-host Vasilis. Those  familiar with Vasilis’s work will know he, too, invites novel approaches that combine native web experiences and code-centric design.

Third, there was no pressure to perform. This is a tiny site with no audience (yet, at least). We recorded the first episode of our podcast and needed a low-maintenance, accessible place to put it. No more, no less.

Finally, Vasilis had already made a starting point. Basic typography and a rudimentary grid were in place and required little thought (although I did go in circles for a while wrestling with minmax() and fr units). Besides, we had already agreed that each subsequent episode would allow design iteration on the site, removing the urge to make it just perfect before launch.

The result of these circumstances, at least for me, was profound. Instead of expanding on the foundation that Vasilis built, I stripped it back. Instead of fighting restraints, I embraced them. I spent zero time in Figma, but discovered a catalogue of default CSS colours (I settled on a trio of tomato, khaki and powder blue resting on a bed of white smoke, with coral and aquamarine for interactive accents). I committed to Impact as my header font without a shred of irony. The body font much more restrained: Georgia. By using web-first instruments like viewport units and clamp(), I avoided media queries altogether.

After 15 years in the industry I felt like I was back in school relearning the basics. I suspect that’s exactly what I needed. Peeling back the layers and working with defaults has sparked in me a newfound appreciation for the material I work with. It was fun, exciting, and, above all, liberating. 

I highly recommend it.