A good proportion of the time taken to construct a successful website lies in the planning phase before the designer even opens PhotoShop or the developer writes a single line of code. Proper planning is essential in order to avoid costly redesigns and re-engineering at later stages in the website development life cycle. Wireframing is a technique that lays this foundation.
If a website layout looks bad as a wireframe, color and pretty photos are not going to make it look much better.
In essence, a wireframe is a simplified mock-up of how your final site will look, but devoid of colors, images and custom font styles to distract or influence choices. If a website layout looks bad as a wireframe, color and pretty photos are not going to make it look much better. As a bare bones design, designers and clients can start to visualize how the site will utilize available screen space, what interface elements are required and even the relationships between various pages on the site. Once the functional requirements are mapped out in this way, developers can start to make informed choices about the underlying software architecture. At this stage it is especially important for clients to speak up about any concerns or requests.
Wireframes can be deployed as either static page mockups or dynamic prototypes with the help of various web development tools. For a complex project, dynamic wireframes are usually better since they may highlight important interrelationships and enable all the project participants to get a sense of the navigational flow. User interface planning is often much more successful as a result.
There are several popular wireframing tools available. Most have basic free versions and premium versions. These tools allow designers, developers and clients to collaborate on design planning from physically separated locations. Below are some of the more popular wireframing applications:
Axure – Includes a built in documentation feature for easy exporting into Word format.
MockFlow – Very affordable premium pricing and an interesting MockStore free design library.
Gliffy – Includes flowchart diagramming along with many other powerful diagramming tools.
iPlotz – Developed by the same people behind the Virtual Training Company. Many good colaboration features.
