I spent a good portion of today transcribing my personal notes for a UI design for work onto a form that I built to hold such information.

The layout I designed in Open Office basically splits the page into three sections and includes a 4:3 rectangle for doodling the web page into. For some of the later diagrams, I drew some templates (including the logo, header, and sidebar boxes/lines) into the web page box before I printed the sheet. Onto these pre-printed sheets of paper I drew UI parts.

There are boxes where certain UI elements go. I like to use lines to denote lines of text. I drew in little buttons and rectangles to group areas in the UI. Near blocks of related elements, I drew a line to group them (if they weren’t already grouped in the UI somehow) and a leader line to a description outside of the virtual “web page”. I would write a few details about how this particlar UI element worked, if necessary.

And so I have a stack of UI design docs that are reasonably intricate. If I want to email them to someone, I guess I have to scan them. Or I could re-draw them in Open Office (or I could bring my personal copy of CorelDraw 12 to bear, which would be much easier) and make PDFs. None of these options really help convey/courier the interface very well.

You might also have noted my complaint of late about the lack of good, cheap groupware…

For now, though, I will simply ask if anyone has a good UI prototyping solution. Keep in mind that web pages/sites are not (necessarily) .NET applications, and I certainly don’t want my (this) UI to look like a Windows app.

If my eventual groupware solution did task and issue tracking and had a Flash-based UI doodler (that the server converted seamlessly between editable Flash and JPG) that let you share your design mock-ups with your clients, wouldn’t you pay $50 for it?

I would. In a heartbeat.