The HiFi wireframe takes the approved LoFi wireframe layouts, and combines them with a Static Content Server framework based on the site structure defined during the IA design process, creating a functional design prototype ready for skinning.

Stage 2 : The HiFi Wireframe

HiFi Wireframe

LoFi wireframes have their place early in the visual design process, but they suffer from one massive drawback. They're not even remotely interactive. And websites are all about interaction.

To overcome this shortcoming, we've developed our HiFi wireframing methodology, which takes the approved LoFi wireframes, and applies them to a CMS framework based on the proposed information architecture for the site.

Moving quickly to a stage where instead of just looking at mock-ups, interested parties are looking at, and interacting with a prototype of the real site brings several significant benefits.

1 : Greatly increased realism

Moving around a website is the only way to accurately identify if the correct decisions have been made regarding the information architecture and the navigation. It allows the client to get a feel for their new site that paper prototypes can't match. Which leads to...

2 : Increased feedback

And increased feedback generally leads to a better end-result.

3 : Faster time to launch

Because the HiFi wireframe is built on a live CMS based framework, the content can start to be entered directly into the site. So instead of looking at pages of Lorem Ipsum, the real content is on the page. So the site's content is under constant scrutiny.

Additionally, allowing the client to enter their own content prior to the completion of the web project is the one of the keys to transforming the traditionally slow and inefficient web development process. The entire development process is accelerated because both the client and developer are able to work simultaneously on content, programming and design rather than continually waiting for each other to proceed.

dthree say…

The particularly eagle-eyed might notice that the HiFi wireframe illustrated is slightly narrower than the final site ended up. This change in width was made during the final skinning stage of the visual design process, but because we had used our methodology for designing the site, implementing the change was completely painless.