Wireframes the free and easy way

What is a wireframe? From the web design point of view it’s a skeleton version of a page, just the layout without colour or graphical elements. Creating wireframes can be very helpful especially when you have many pieces to arrange on a page.

There are many ways to create wireframes. You can use graphical tools like Visio, Photoshop or even Powerpoint, but personally I prefer to use HTML. In the past I’ve created simple page prototypes using NoteTab Pro, but today I had some very complex tabular forms to design and I felt the need for something that would be quicker and much more WYSIWYG. Dreamweaver would be the obvous choice but I really don’t want to spend hundreds of pounds on something to solve a relatively narrow problem.

Instead, I installed KompoZer, which being entirely free, was much more in line with my budget! With it, I’ve been able to knock together page designs very rapidly. You can use tables for layout (fine if you are in a hurry and don’t plan to reuse the wireframes for your final site code) or follow current best practice and use CSS.

KompoZer is allegedly aimed at the non-technical user, but to get the best from it I think some knowledge of HTML and CSS is required. I don’t think it’s likely to displace Dreamweaver as the professional’s web designer’s favourite tool, but for wireframing it’s just the ticket.