Web Application Design and Prototyping Tools
I carry a variety of notetaking devices. They all have their benefits and I tend to oscillate between pen/paper and electronic devices. However, the notebook nearly always tends to hang out around me and I dump ideas onto the pages as the day goes on.
Those notebooks have been filling up with ideas for projects. Combine that with some client projects and my shift in schedule (which hasn't freed up as much time as I'd hoped), and I find myself at the beginning of several projects at once.
This raises a few needs that have been hanging out there. Designing and starting a web application project involves a few things for which I've never been happy using the existing tools.
First, there's actual layout design. While Photoshop works fine for doing the "sketches", the people who are in a role to review those design ideas tend to get overly focused on things like font choice when you're trying to figure out whether you should use one screen or a wizard for registration only to suddenly notice that the wizard was chosen just as the app goes to production.
That's why my interest was piqued when Balsamiq came out a while back. It provided a way to do mockups of screens and keep people focused on the functional design instead of colors and fonts, just like I want. However, there are quite a few apps that I'd use more that also are in the $100 range (Balsamiq is $79) and I haven't bought those yet, so it's unlikely that I'll be buying it any time soon. Plus, I'm not exactly a fan of the Comic Sans font.
However, the other night, I was relaxing in front of the TV before bed and I figured I'd doodle a few sketches like the widgets in Balsamiq. As I was drawing, I also was thinking about Antonio Lupetti's technique for sketching on screenshots, which I've been wanting to use more in articles and presentations/screencasts, so I included some of those elements as well.
It didn't take long and I had 4 sheets of paper pretty well covered. Because I started by just sort of doodling, the elements didn't end up to scale, but I like the way some of the icons, etc. turned out. I'm thinking of fixing the tablet PC (battery won't hold even a slight charge and the stylus disappeared) and re-do them on a grid that will make them the right comparative size.
However, I did scan the pages to PNG's for sharing.
One of the other difficulties is that I've seen too many projects, particularly inside the firewall, receive horribly ugly and unusable web templates. At the same time, for my own projects, I'm not ready to pay a designer yet to do the final design (though I may be soon if you're a designer and interested), and need to get on with building things in the mean time.
So, I've been wanting a decent "generic" web application template that lets me focus on building functionality and, once that's nailed down, do the final design as more of a "redesign" from the generic template.
The thing is that, while there are thousands of web "site" templates and blog templates, there are very few that are oriented to web applications. There are so few, that something like 2/3 of the Google links for my searches led back to this 1 template. That theme is nice, but not the look I'm aiming at for my temporary template.
Among other requirements, like the sketchy mockups, I want the the ability to actually have a completely grayscale look to the initial prototypes to hammer home the temporary nature of the design. So, last night, after I tossed Revolver into the DVD player to finally watch it (incidentally, not the kind of movie to be working during as I'm going to have to re-watch it to entirely "get" it), I decided to take a shot at building such a template myself.
I grabbed a copy of the 960 CSS Framework (something else I've been wanting to mess with) and whipped up a batch of pages that covered the basic HTML elements, a bunch of form elements and a start on stuff for data display, like tables. I threw in a bit of jQuery for things like drop shadows and by the end of the movie, had some decent results. There are still plenty of little bugs (like the jQuery tabs didn't cooperate, so I threw some other ones in instead until I can figure that out), but I'm pretty happy with it so far.
It's grayscale by default, but all of the color definitions are in a single CSS file, so changing the colors is easy. All in all, it's pretty modular and I think it will turn into an ASP.NET master page quite easily as well as allow a complete swap-out for a different design later as nearly everything is pretty vanilla HTML tags.
I zipped up both the sketchy PNGs and the web application template together so you can download them if you'd like to take a look.
