wait just start

Build a prototype without writing a line of code

Several years ago I started teaching myself how to code. I got started with books and various online courses. My goal was to get good enough so that I could build a prototype for an app or website idea. I didn't want to depend on a developer to validate my idea. I imagined I could code a basic prototype, get user feedback, and then collaborate with a developer once I had validation for my idea.

I started learning HTML and CSS. I then got into .NET, Javascript, and SQL. It was a lot to learn. Due to a full-time job and other interests, it would take a year of studying before I reached a point where I could start building something. Even then I only reached a point where the questions on StackOverflow started to make sense. But every time I made progress with my prototype, I had to lookup how to build the next component. In other words, even after a year of studying, I couldn't just open an IDE and start coding. What I found is I was spending more time thinking about how to build my prototype, and less time collecting feedback to validate the idea (which was the ultimate goal).

Side note: I have no regrets for the time I invested in learning how to code. Professionally I'm a Product Manager, and I work with developers everyday. Having a fundamental understanding of coding and different technologies helps tremendously. I view it like a music producer who plays an instrument versus one that does not. A producer who plays an instrument(s) can be much more effective in guiding musicians because they understand the nuances of playing an instrument. 

Today, you only need two things to build a prototype: an idea and an internet connection. Note: no coding required. It's so easy, you can have a working prototype after completing 3 steps:

  1. Sketch your idea
  2. Photograph and upload images to the web
  3. Use a web-based tool to hook them together

Here is an example that took me 15 minutes to create. I started with some sketches:


I then added the screens to a web-based tool, Invision.

Invision eliminates the need for learning how to code by allowing you to hook together your mockups using hotspots. Hotspots are essentially clickable/tappable areas that will trigger an action once clicked/tapped. The action is to navigate you from one mockup to another. Here is a screenshot of creating a hotspot in Invision (the blue rectangle represents the hotspot):


Once your project is hooked up, you get a unique link that when accessed on a mobile device, creates an experience that feels like a real app. Here is the link to my project for viewing on an iPhone. Here is screen grab from my phone of this project:


So in about 15 minutes I was able to draw a few sketches, upload them, and have a working prototype I can send as a link to a user/developer/investor/etc. It's pretty awesome!

The sketching and Invision combo has a very low barrier to entry, but it's not practical if you expect to do a lot of revisions and 10+ screens. This is where computer software can help. I recommend one of the following:

Sketch has taken off over the past several years and has become standard across design shops. It's only downside is it's Mac only.

Balsamiq is more polarizing. You either love or hate it. The biggest downside of Balsamiq is you cannot use your mockups as final designs because everything in Balsamiq looks like a sketch. I see it as a benefit, because my goal with a mockup is to not create something pretty, but something functional. With Sketch you have a greater risk of getting caught up with the look (and trying to get it just right when you should be focusing on just getting a mockup). But if you get it right, you only have to create designs once. You'll always have to redo anything you create on Balsamiq once you are ready for the development stage.

Check out some screens I created in Balsamiq for a mobile app idea:


I exported each screen as a PNG and uploaded them to Invision. Just like with the sketches, I hooked up each screen using hotspots and the outcome feels like a legitimate mobile application.

Check it out on an iPhone.


Invision allows you to create transitions/fades between screens. And it even supports slide actions! You can try this on my app from the main app screen (see above image). Slide from the left to the right of the screen to expose the navigation menu in the app. Slide from right to left to close it. You can get as sophisticated as you'd like!

With the tools available today, it's easier than ever to create a working prototype of your idea. If your aim is to get user feedback, find a technical co-founder, or strike the interest of an investor, a basic prototype will take you much further than a business plan. That doesn't mean you don't put in any effort into thinking about your user base, the market, and a possible business model. Think about these things to validate your idea, but instead of creating 5 year revenue projection charts, create a mockup of your idea and get it out to people.

Get feedback and iterate. Good luck!