A leg up: Ten bits I learned prototyping my designs with code

Inspired by the words of Dan Cederholm, Kathryn McElroy, and Scott Witthoft

1. JavaScript

Of all the programming languages I’ve learned, JavaScript is the most useful to me as a designer.

I learned JavaScript more than 15 years ago, so I can’t tell you the best way to learn it now.

Regardless of how confident you feel with JavaScript, I recommend going through Just JavaScript if you haven’t already. It’s worth it. I couldn’t answer all the exercise questions correctly the first time despite 10+ years of experience coding in JavaScript.

Start by learning JavaScript itself (so‐called vanilla JavaScript). There will be time for libraries and frameworks later—they change much faster than JavaScript itself.

Before getting into frameworks, I recommend reading JavaScript: the Good Parts.

Learning JavaScript will give you a meta skill. Once you know one programming language, it will be much easier to learn the next 2 or 3 or 7 as needed in the future.

However, knowledge of a programming language alone is not enough. It isn’t easy to make good prototypes without good data. Make friends with CSV and JSON.

2. Useful file formats (CSV, JSON)

Microsoft Word and Excel are fantastic, but it’s difficult to use these files with code (such as JavaScript).

Unexpectedly, so‐called plain text files are also surprisingly difficult to use in many cases. They lack structure—if someone sends you a book in a TXT file and asks you to write a program that extracts the text of a dozen subsections from several chapters from that book, it can prove to be a non-trivial task. Feasible, but non-trivial. Much more difficult than if you had received the book in the form of a quality JSON file.

Learning to create and read structured data files will allow you to think like a computer. Thinking like a computer will enable you to prepare data for easy consumption in your prototypes.

Did you know… You can export a representation of your data from a Microsoft Excel file to CSV. Such a file will most likely require so-called cleaning, but it’s still a handy feature.

3. SQL

Structured Query Language (SQL) is a language that allows you to ask databases for the information you need. Not only is it useful for coding prototypes, but it also allows you to explore and dive deep into the data of the organizations you’re designing for while doing the research.

Once you’re familiar with JavaScript and SQL, you can write small programs that extract the bits of data you’re interested in from the databases and save them in a format you come up with in your prototype (JSON, CSV).

4. git

Designers call their artifacts Final Final v2 after revisions. Software developers use git for version control.

Knowing git gives you the superpower of freezing the progress of your work in an organized way in a coded prototype and allowing you to experiment without worrying about breaking the results of your work.

5. Technology matters

The best technology stack to code the prototype of your project is the technology your team will use to create the final product—even if that means you have to learn something new. Are you designing a mobile app that will be coded in Swift (a programming language)? Learn Swift. Does your team plan to use JavaScript and React Native instead of Swift? Learn React Native.

This applies not only to the choice of programming language but also to the choice of libraries, tools, and third‐party solutions with which the final product will be integrated.

If you don’t know what technology your team is going to use to create the final product and you can’t figure it out, the next‐best technology for prototyping will be the technology you feel most confident in.*

* Nowadays, you can prototype web, mobile, and even desktop applications using JavaScript. Just please remember not to prototype a desktop application like a web application.

6. Low‐end devices

As a designer, you probably have the most empathy on your team for people who don’t have the latest, greatest, most expensive devices.

If you want to maximize the chances that the final product will work and look good on older or cheaper hardware or software, it’s worth considering how to ensure that the coded prototype of your project also works and looks good in that environment.

7. Fail well

In the final product, you want to record any data entered by users. This is generally unnecessary in a prototype—much more important is how quickly you can prepare the prototype for the new person you want to test it with. You need to remember the data until the person you’re testing the prototype with succeeds in the task or quits. In a good prototype, someone else can start a new test with a new person in 1–3 clicks. In a so‐so prototype, starting a new test requires several minutes of work by a tech‐savvy person.

Failing well is also helpful in case of bugs.

8. Show, don’t tell

Everybody seems to be on the same page until they see a prototype.

Sometimes, it’s worth doing a prototype at a very early stage, when unknown unknowns dominate, as an anchor for conversations with various stakeholders. Gerald Weinberg once wrote, People seldom know what they want until you give them what they ask for. I subscribe to that.

I would quit if I had to do my job by telling, not showing. I can’t imagine being successful this way.

9. State

Simple interactive elements feature states—enabled, disabled, hovered, focused, selected, activated, pressed, dragged, on, off, error, etc.

Fragments of your designs also have states. When you design a list of orders, they can look different depending on whether they have just been placed, have been paid for, are in progress, or have been shipped. Prototyping projects using code makes it easier to anticipate all the necessary states.

You’ll still hear what if […]? from developers, but much less frequently.

Note: When diving into states, you can also learn about state machines. It’s an interesting concept, but you don’t need to use it to do good design work.

10. Regular expressions

Regular expressions let you do things with text that would take a long time to do manually. Writing regular expressions is useful as an independent skill and as a meta skill used in coding prototypes. Most programming languages rely on regular expressions to perform advanced operations on strings of characters.

I don’t think I could learn all this in a year. I’m convinced that it’s reasonably possible to learn it in less than 10 years.

Only learn these things when you need them. Who knows, maybe you’ll never even need to learn regular expressions or SQL. The magic lies in action. You learn much better by doing, when you have an application for your new knowledge. It doesn’t necessarily have to be a commercial one. Otherwise, it’s just a form of entertainment for a certain type of person.

Good luck!

January 4, 2024

Tags: prototyping, prototype, figma, js, nosql, simplebits, twenty bits