This article is part of the “Side Projects” mini-series I started quite some time ago.

As everything I do for my side projects, I keep interaction design as simple as possible and try to do the absolute minimum possible. I really only perform two steps:

Draw a quick sketch on paper: In my notebook, I draw sketches of the user interface. I also add some annotations that describe how everything should work, but I write down very little. Later I try to remember what I thought when drawing the sketch, or I decide about things as I go.

Write the HTML: After drawing I write the HTML that should be rendered and test it. This is no mockup - It will be production code. I can do this because JSXP allows me to easily transform HTML mockups into the production system.

After writing the HTML I implement the functionality and then go back to writing more HTML. This means that the original drawing on paper does not look like the end result most of the time - but this is OK. It was only a quick sketch. The drawing is even optional: For simple things I start directly with the HTML.

I have bought a license for balsamiq mockups but I rarely use it. Don’t get me wrong, it is a great tool. But for a side project where the only designer, programmer, tester, … is me even drawing simple mockups with balsamiq would require too much effort. They’ll become obsolete as soon as I test the real HTML so there is no reason for storing (or even creating) them.

This works quit well because I am alone and I do not have to coordinate my work with anybody else. But I really think this “process” might even work for small teams: Just build something, then iterate to make it better and more beautiful. When you use the right technology, iterating and making things better should be easy.