While plagiarism is bad for writers, it is perfectly acceptable for Web developers, and some may even call it flattery. I am not saying copy a site bit for bit, but mimicking a site design or layout is an accepted practice.

Wirify provides a starting point for the process by allowing you to easily create a wireframe from an existing site. This week we take a closer look at Wirify and how it can help Web designers and/or developers on their next project.

The wireframe

A wireframe defines the basic frame or structure of a Web application. You begin with a site map to use as a blueprint. The framing portion is the translation of the blueprint into actual pages within a site. Each page will be a portion of the wireframe where you state the purpose of the page, and the flow of the site will be demonstrated in the complete wireframe. Basically, you give the client an idea of what will be built (they can change their minds later), because nothing tells a story like a picture. A wireframe separates the graphical elements from their functional counterparts; it is a mainstay in demonstrating the user experience.

The tool used to build a wireframe can be as basic as your favorite text editor or as fancy and costly as Photoshop. Wirify provides the conduit from an existing site design to your editor.

Generate a wireframe

Wirify is a bookmarklet that lets you turn any Web page into a wireframe with one click of the mouse. It is a browser-based tool that works in most major browsers. Setup depends on your browser, but the Wirify site provides simple to understand instructions. Basically, you add the Wirify tool URL (which is JavaScript) as a bookmark in your browser. Once there, you select the bookmark to generate a wireframe for the current page open in your browser. Figure A shows a portion of a wireframe generated for the TechRepublic home page.
Figure A

Wireframe generated for TechRepublic.com. (Click the image to enlarge.)

At this point, you may be thinking that Wirify does some cool things with JavaScript, but how can it be useful in your everyday work when actually creating wireframes? This is where Wirify Pro‘s features enter the picture. Wirify Pro allows the wireframe to be saved in a format to be used in other programs, and it allows you to export the design to the following formats: OmniGraffe, Balsamiq, Visio and SVG. Figure B shows this feature as it appears (grayed out) in the standard version.
Figure B

Options available in Wirify Pro. (Click the image to enlarge.)

The Pro version is where you leave the free world and must spend some cash. They call them Wirify credits (five credits is $30.00), whereas the export of a wireframe counts as one credit. Additional features of the Pro version (like editing a wireframe in place) are available.

Why you should use Wirifiy

You may be skeptical with regards to the usefulness of such a product. The normal process for creating wireframes is create the design and then move on to the markup (HTML); Wirify offers a new approach where you dive right in to the design and focus more on the design elements as opposed to the nitty-gritty of the coding. This means you won’t get mired in the details because Wirify allows you to focus on the overall design.

Another useful feature of Wirify is learning; that is, generating the wireframe (and markup) for a design allows you to see how sites are designed (both good and bad) and learn from the work of others. What better way to learn than the visual representation generated by Wirify?

Cut time spent on wireframes

While Wirify is great for using existing sites as a base for building new applications, it also offers a way for saving and reusing your own designs. You can load a current design, tweak it, and generate a new wireframe, thus saving time. This does require going with the Pro version, but the cost is minimal compared to the time saved.

There are plenty of other ways to build wireframes (one tool I have always liked is PowerMockup), as well as other options like rapid prototyping which many developers favor, but Wirify can be a great asset if your approach includes wireframes.

Keep your engineering skills up to date by signing up for TechRepublic’s free Software Engineer newsletter, delivered each Tuesday.