Rapid Prototyping of Web Applications

Ryan Singer from 37 Signals gave a really interesting talk at the Future of Web Apps in London about the rapid prototyping process of web applications.

For me, the most important insight was to start off with building a really bare-bone HTML framework, which then involves step-by-step by having already right from the beginning a programmer working on the data models and controllers in parallel with a web designer improving the markup and CSS, instead of going the traditional way of letting only a graphic designer spending days (or even weeks) bringing his design ideas to perfection and blocking other people (i.e. programmers) from getting started, to then finally figure out a couple of weeks later that from a UX perspective the whole thing doesn't work.

Kinda obvious and simple once you hear it. However, most people in the industry still have their way of thinking that you have to tinker a design visually to perfection, but don't get the point that a static design is only a small proportion of what makes an application gonna work or not.

UI Design (Photo by Lucas Mascaro)

Something I personally like a lot, is what I call "back to kindergarden" or the pen, paper & scissors approach, which basically means that we draw all pages and UI elements on paper by using different sized pens of various colors and then play around with them and walk through different use cases by moving the small paper snippets around and then discuss our ideas with other team members including developers. Including the developers is very important, because they're the ones who actually have to build the whole thing. They sometimes might restrict the creativity with bringing up all these ambiguous technological limits, but they're quite crucial when it comes down to decision making about feasibility and time estimates.

Tipp: having pre-designed templates, which can be printed out makes it a lot easier to throw away the current ideas and start over without having to completely start all the way from scratch again.


  1. This comment has been removed by a blog administrator.

  2. Fantastic post! How to integrate UI and UX design into an agile development process seems so mysterious to a lot of people. The key is working together, as you said. Some of my most productive UI coding happens when sit with the designer and we work on the page together. Synergy! And it removes the friction caused by "throwing it over the wall".

    Your other point, about kindergarten is another one of those ideas that we geeks sometimes struggle with. We seem to want to throw technology at every problem. About 20 years ago I learned about low-fidelity prototyping, and yet everywhere I go, I end up having to teach people about this very simple concept.

    Thanks so much for blogging about these two very important areas.

  3. @jdtangney: Thanks a lot for your long comment. Very appreciated :-)