Prototyping/Sketching in Code

Assumed audience: Other software developers who think about the visual design aspects of thier work.

When I am working on some new bit of visual design — say, for the next version of this website, or the occasional little app idea I take a swing at (rarely with much success on that latter count!) — I often find that I do my best work in code. Sure, I often start with pen and paper, as I do with a lot of my thinking. When it comes time to actually get higher fidelity than that, though, it nearly always happens in a text editor.

I was thinking about this earlier today because of a related discussion on this week’s epsiode of ATP on exactly the same lines. As both John and Marco described their own workflows, I found myself nodding along. Several times over the years, I have pulled own Sketch or opened up Figma and tried to use them for design work. No doubt I could build up the skills to find them productive, and were I doing a lot of that kind of work I would make that investment. For one thing, as fast as I can iterate in HTML and CSS, purely visual iteration can still be much faster once you know those tools. For another, that speed can translate into trying more things, sticking with fewer of one’s first ideas.

As it is, though, I am fast enough working directly in code and slow enough working in those kinds of dedicated tools, and above all I do that kind of dedicated visual design rarely enough, that it doesn’t currently make sense for me to take the time to — as John put it in that episode — do it twice. Once, in HTML and CSS, is enough at this point.

Your mileage may vary: I have been writing HTML and CSS for the better part of 20 years now, and that makes a huge difference!