Prototyping
Great article on prototyping with a comparison of different methods and tools. I’ve always been a strong proponent of hand-coded HTML/CSS. People instantly get it and can provide meaningful feedback once they have a functional wireframe to review. It’s still amazes me that ‘prototyping’ is not just a given within web/software development.
I’ve tried many tools, including Protoshare, HTML, InDesign, Omnigraffle, iWeb (yes, the Mac blog app), Balsamiq, etc. And, right now I’m actually giving MockFlow a whirl.
But I agree with the author of the article: nothing beats starting out with paper sketches. I tend to use long sheets of blank paper (preferably already used on one side, so we can save a tree), and tack on post it notes indicating content areas, features, modules, etc. It’s a great way to get sketching quickly, with the ability to move things around on the fly (that’s my only qualm with the typical paper approach: you either have to erase with a pencil which is messy, or scrap the drawing every time you want to make a major change; stickies avoid this problem).
I wrote a bit about it here: http://mmcwatters.com/blog/?p=791
I also did a ‘lite’ review of Protoshare here: http://mmcwatters.com/blog/?p=139
Excel is a great prototyping tool. It’s about 10x faster to change things in Excel and you can have graphics, hyperlinks, etc. For most clients, they don’t notice the difference between wireframes in Excel and more typical tools like HTML, provided they “get” what a wireframe actually is and is for. And, unlike Visio, no corporate client is without Excel.
My approach is to try and build as close as possible how the site will actually function before any developer writes a single line of code. This way there is little move of interpretation which is particularly important when you are handing things off to a third party or off-shore team. Designing with the actual tools (HTML/CSS/Javascript) that will be used in the development of the site, gives me a great deal of insight into not only how the front-end will work, but what will be needed behind the scenes. Also I don’t have to write out a big functional specifications document that no one will read. When someone asks, “Where are the specifications?” I just point them to the site.
Here’s a recent wireframe/prototype I created for a marketing application. It is not ‘designed’ (font, color, graphics, etc.), but is pretty damn close to the finished product.
I usually sketch the page or component on a blank sheet then proceed to HTML. Unfortunately, I haven’t sketched for a long time because I’ve been working on the same three applications for almost four years. My wireframes are exact copies of the production sites which I simply modify when new enhancements or changes are needed.
i don’t understand why some people would say that Spongebob is gay,`;