Shitty Code Prototypes

I love building prototypes. They allow me to explore and sketch ideas, test my assumptions, and try out things at an early stage to make better design decisions. Prototyping is the single best tool we have in our toolbox as designers and developers. And because anything can be a prototype, I use whatever gets the job done: Sometimes, I grab a pen and do a series of rough sketches. Sometimes, I use prototyping software like Adobe XD or ProtoPie to try out an idea for an interaction. And sometimes, I write code.

Prototyping with code is my favorite way to build prototypes whenever I want to work with the real material of the Web and sketch out an idea in the browser with HTML, CSS, and JavaScript. Maybe it’s a layout that uses CSS Grid, a GSAP animation test, or a little interactive component. Whatever it is, I try to focus on the essence of what I want to try out and learn. What I don’t focus on, however, is code quality. And this is where it can get complicated.

What I’ve experienced several times now, is that other team members will misunderstand this conscious decision to not write production code in a prototype. Some engineers will wonder why code prototypes were created when they can’t even reuse the code of those prototypes in production. To project managers, it sometimes feels like we are doing work twice and are wasting precious time and budget. Maybe the problem also lies in how differently designers and developers understand prototypes. Here’s Bill Buxton quoting a junior industrial designer:

Engineers view prototypes as part of the process of building things. Designers build prototypes to criticize and tear apart.”

Maybe that’s it: To me, a prototype is a means to an end, a rough sketch, a shitty first draft. It will probably even be thrown away once we’ve found what we were looking for. A code prototype is not a first step in the process of building the final thing, it is a tool that helps you decide whether and how you should build something in the first place.

A prototype lets us make better design decisions at any step of the process because we can see what works. And to see what works, we don’t need production-ready code. A shitty code prototype will do.


10 Webmentions

Photo of Frank Rausch
Frank Rausch
I enjoy your articles a lot. Keep writing these!👌;
Photo of Matthias Ott
Matthias Ott
☺;️; Danke! 🙌; September was quite busy so there wasn’t much time to write. Looking forward to write a little bit more again soon…
Photo of Walter Ebert
Walter Ebert

Walter Ebert Follow Apparently, some engineers expect prototypes to be re-usable ????; Maybe the term Proof of Concept (PoC) would be better at setting expectations. Maybe not ????; Oct 03, 2022, 17:02 · · 0 · 0 · 0 Sign in to participate in the conversation

Apparently, some engineers expect prototypes to be re-usable 🤨; Maybe the term Proof of Concept (PoC) would be better at setting expectations. Maybe not 🤷;
Photo of Luis Orduz
Luis Orduz
Some code is meant to be replaced or thrown away. Just gotta make sure it doesn't reach production.…