Creating prototypes constrained by the medium not our skills or understanding

Recently it’s been good to see posts advocate working with code as designers to understand the medium, such as this one by Mike Gallagher about designing in code

But there’s a time and place where this is problematic.

When the innovation, the imagination is limited by the designers control and understanding of the medium.

Cardboard artwork of figures
Figma has its own material limits that a designer needs to learn. It’s not free of that and it shifts all the time

Let’s imagine a scenario where you’re rushed against a deadline. Need to create something forward looking that’s more imaginative. But you also need to have something tangible. How things work will often be subtly limited by the designers skill and that time limitation.

So something doesn’t save to database? Who cares … it’s just a prototype. That can be faked.

But what if the limitations in the mind of a designer are their own and not the mediums? What if they don’t get how it works? What if they do but can’t make it work?

I’ve helped so many designers make prototypes work in ways they couldn’t do. Either explaining how things work on the web or in apps. Or by stitching things together to make a vision work that they had paused because it wouldn’t work. I loved helping each designer every time.

But it’s a problem to be aware of. Designing and prototyping in code can mean:

  • people design unrealistic or limited things because they don’t understand how the web or apps work
  • people put better designs to the side because they cannot realise them in a tangible way
  • people miss opportunities or take more time to do so because they don’t understand the medium well enough to do it quickly

Now if you think this is a case for using figma or other “clicky picture” tools it’s not quite. They introduce a different constraint. Which isn’t grounded in some material realism. But really “how well do you understand this tool".

Figma has its own material limits that a designer needs to learn. It’s not free of that and it shifts all the time. Faster than html and the web does. There is also a tax on recreating the platform you’re faking that you often get cheaper with html and CSS (particularly in places with design systems or frontends).

This experience of the medium develops with time and experience. Of making real things with engineering teams or engineers. I’d always advocate to (slowly if needed) get to a place that you can do it in html rather than figma (or other tool).

Happily with AI tools there’s a chance, which again a solid understanding of how the web works, of making and faking things in a realistic manner. Of stretching the “I know this could be real but can’t make it” to “I could reasonably fake it”.

Recently I was able to fake a conversational interaction UI with AI that looked and felt real (but wasn’t because if it was the scenario might not have gone the way I wanted it in the prototype).

Without AI it would have taken me a few hours to set this up. Maybe even a day or so. But it was minutes with an AI before I got close enough I could fly from there.

I still needed to understand the web to ask it the right questions. It was my idea of the flow. I needed to know what magic words to use to get it to give me what I wanted. I needed to know how to glue it into my prototype kit. But what it did do was speed up making my prototype more credible and more provocative.

This took out the time pressure. But it did still rely on me knowing the medium to ask and then implement the code is spat out.

It didn’t directly resolve the deep understanding of a medium a designer needs to develop. But could AI tools also be used to help fill in and answer a person’s specific needs to understand how the web works? I think so, as part of a set of ways of learning.

However, for those designers who want their teams working in the medium and html, the question is:

how do we ensure our designs (or designers) are constrained by the medium and not our capabilities or understanding using it?

Don't miss an article