Developers, prototyping isn’t just for designers
Prototyping has been an integral part of the design process for a long time now. Sadly, I don’t see code being prototyped nearly as much. It’s an invaluable tool for developers too: finding issues at an early stage brings peace of mind for both the developer and the rest of the team. In this post, I’ll tell you why you should prototype, when is the best time to do so, and how I do my prototyping.
Why prototype as a developer?
There are a lot of reasons why you should prototype, but here are my top three:
1. Give yourself peace of mind
Whether something is possible, let alone how long will it take, is often near impossible for a developer to know until they actually start working on it. Being unsure and having to give promises like “it can be done” and “in X amount of hours” can cause a lot of stress.
I’ve never had anyone oppose me when I say: “I don’t know, I need some time to find out”. Anything that helps turn your guesstimate into an actual estimate is valuable to yourself and the management.
Don’t be afraid to show prototypes to less tech-savvy clients either. Explain in a clear way what you were trying to achieve and make sure to let the client know that the prototype does not represent the final product. Prototypes can give peace of mind to clients and help build your mutual trust.
2. Focus on what’s important
It’s very easy to get distracted in a project environment: you need to add some mock content to the CMS, create a new URL route, upload an image asset to the media bank, then you find a small bug in another feature, and so on, and so on…
You get to laser-focus on the problem at hand when prototyping in an isolated sandbox environment.
The sandbox will also live on as the purest example of the solution, which could be very useful in a future project.
3. You get to affect things
In the classic Waterfall model, developers are at the bottom of the waterfall – they get the “specs” and implement them.
The problem is that a lot of edge cases are found by developers, and often those affect the design aspects as well. It’s much easier to make changes to the designs early on than at the end.
Involving developers in the early stages of the project benefits everyone, though passively sitting in meetings does not. So be valuable by actively listening, giving input, and helping to validate ideas.
When’s the best time to prototype?
Simply put, as early as possible and at any stage of the project.
- Sales phase prototyping helps with planning and cost estimations.
- During the concept phase, it can help validate creative ideas.
- The design phase is where I’d like to see most developer prototyping. This makes sure the developer is able to deliver what the designers promise the client.
- In the development phase, it’s good to jump out of the project source when tackling problems to avoid distractions.
It’s very important that you learn to prototype fast. Projects have a certain momentum and it’s often difficult to find the time.
How do I prototype as a developer?
I think the most important thing when it comes to tools is that you are comfortable using them. Even if tool A is way better than tool B, using it might be pointless if you are spending too much time learning to use it.
I recommend sticking to a limited set of tools that you know well. Don’t be afraid to get primitive. Here are the prototyping tools I use for frontend development, but I’m sure a backend developer can find them useful too:
Codepen.io
For years now, Codepen.io has been the first place I go to when I need to prototype something. It has some quite advanced features like Codepen Projects, but I’ve almost exclusively stuck to the most basic version with just HTML, CSS, and JS editors.
To me, it strikes the perfect balance in simplicity and features. The tool makes it easy for you to focus on the important things, without getting distracted by directory structure etc.
index.html
touch index.html style.css script.js
python3 -m http.server 8000
Open your VSCode and http://localhost:8000 in your browser, and you are ready to prototype in the most zen environment there is.
Codesandbox.io
We do quite a bit of React development here at Evermade, and Codesandbox.io is my go-to place for React prototyping.
When it comes to its features, it is similar to Codepen.io projects. Installing npm packages is easy and the tool has good TypeScript support.
It is easier to get distracted though, as it is tempting to start building a project-like directory structure.
Pen & paper
Sometimes just drawing or writing something out is the best place to start from. It’s the best way of getting an idea out of your brain. It’s also great for explaining concepts to others.
Examples of my prototypes
To wrap things up, here are some examples of my own prototypes vs. the final products:
