Welcome to the very first version of this tutorial on how to create prototypes using code!
Why would I use code to create prototypes?
Excellent question! As you might know, for example if you've been in our lectures at the New Media Design program (shameless plug), the landscape of prototyping tools is vast and complex — it's easy to get lost and forget when to use which technique. A prototype is generally created in order to answer a question about a design or an idea. It has a specific goal in mind, as well as a particular audience. It's also wise to take into account your own experience and preferences. For example, with a background in computer science you might be more likely to lean towards prototyping in code because you're comfortable with the technology and you're relatively fast with programming. However, generally speaking coded prototypes take a lot more time to create than alternatives such as rich interactive prototypes or click-throughs, so it makes sense to carefully consider whether the question you want answered really requires the use of code.
Here's a number of concrete cases where I believe code to be the solution:
- Testing complex functionalities or animations (e.g., games or other playful elements)
- Integration with existing systems (e.g., tools for accessibility, Google Maps, other services);
- Using data from various inputs or sensors (gyroscope, camera) of the device;
- Storing information from the user, within one session and between sessions (e.g., diary-keeping app);
- Allowing communication between different users — social, collaborative applications;
- Getting as close as possible to the real context of use: running on the user's own device, for prolonged periods of time if needed, using analytics to keep track;
- Being able to re-use (parts of) the code in the final product;
- Exploring technical feasibility of a certain feature: you need to see it in order to believe it is possible.
If your prototype doesn't need to result in an experience as realistic as outlined above, and for now it is fine to fake certain features (e.g., use screenshots of Google Maps rather than the actual thing), you should probably consider other, more time-efficient tools. It all depends on the goal of your prototype!
As a small teaser, here's what you'll be making by the end of Chapter 8:
A short disclaimer
Although I did my best, there is a chance that this relatively short tutorial won't give you all you need in order to learn how to code. It might be overly ambitious, seeing as how there are entire courses, even programs, that focus solely on teaching you the way of the code. We're going to have to stick to the basics, move fast and take some shortcuts — exactly how prototyping ought to be done! So while I cannot guarantee that you will be able to throw jargon around like a pro at the end of this, I hope that you will at least be able to bring your ideas to life and take advantage of some of the perks that prototypes in code have to offer.
I do hope that some of the concepts behind the examples we will cover will stick, and that you will be able to generalize them to many different use cases other than what we talk about here. Oh yeah, that's another thing: in this tutorial we use one specific language (JavaScript) along with a framework that's particularly suitable for prototyping websites, apps and the likes (FramerJS). That's another way of trying to scope this thing in such a way that it becomes manageable. Just don't expect to be able to prototype smart physical objects (e.g., Arduino), interactive games or anything fancy like that — that's a story for next time.
PS: You're probably one of the first to ever use this tutorial, so any suggestions and feedback you might have are much appreciated. This will help to make this set of pages even more relevant for many generations to come. When it relates to a specific part of the series, feel free to drop a comment at the bottom of that particular page. There's also a contact button at the top for general feedback or life stories.
And now, it's time to get started with setting up our development environment!