I am big proponent and fan of prototyping apps before they are built, I find this practice helps a great deal focus project, shorten time, increase quality of the code and ensure all participants have more fun in the process.
So benefits are:
- Focus on the problem
- Shorter development time
- Fun for participants
- Higher quality of codebase and application
As a rule, prototyping should be done by any tool that you are comfortable with, however obviously some are better then others.
While some people will use Balsamiq for prototyping, and it is legitimate tool, as a developer I prefer to have clickable prototype. A lot improved in the meantime, in terms of tools that are available. In the past, I would start prototyping using html and usually grid framework like BluePrint or 960.gs . This was great, however now things are even better today thanks to several new developments.
Let’s first quickly cover the process. Prototype development starts with basic requirements, then pages are built, shown to customer/client who is available to give quick feedback, which is then rapidly applied and cycle is repeated. That way, a lot of flaws and inconsistencies can be discovered earlier then when you already spend 1000 dolars on development. Side benefit is that development of such application is also significantly easier because everything is clear, and you already get all the forms with names etc.
Before you start prototyping, you should have simple way to play with your prototype. I find John Long’s Serve to perform great for such purpose, it is built for ruby projects, you can use haml, sass and coffeescript, all the good stuff.
So before you start, install Serve and start your project ‘like a Bos!’
Then pick your poison, there is Twitter Bootstrap with it’s styling to aid you to assemble your pages and flow:
However, there are also other options. One really good is Skeleton, framework whose goal was to make your app look good both in browser and on mobile device, as of lately Bootstrap is doing that as well, Skeleton is probably a tiny bit better still at it and overall is very clean choice for prototyping, Bootstrap sites all look alike.
Latest choice that I became aware recently is Foundation CSS. It is solid framework made specifically for rapid prototyping.
So, these are some essential tools to use for prototyping. Having a set of common defaults help a great deal when you are thinking about what will application do, not how it will do it. Things looking good, also help a great deal.
So now that you learned about these fantastic tools, let’s get prototyping!