Wireframes can be a great way to visualise your concept and get the client engaged with something other than a written spec, but what are the best practices? Wireframes are supposed to show where items will be placed, and the general layouts of the page. Doing this will save you a lot of time before you start the time intensive design phase. Using wireframes is a great way to begin a project, as it allows you and your client to focus on layout without the distraction of color, type and other design elements. Concentrate on what goes where on your web pages and the percentage of space that each element takes up, which can be determined by your client’s needs. Design is not important. Think about layout, functions and navigation. Think about who the wireframe is for:

• Developers?
• Client?
• Designers?
• Management?

We tend to build wireframes in HTML, but doing them on paper or in Photoshop is fine, the process is the same, to work out the layout and general structure of the site.

Wireframe Example

Figure 1: Wireframe example (click to enlarge)