Wirify is a great bookmarklet for using existing sites as a base for building new applications, as well as for saving and reusing your designs.
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.
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.
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.