I am often needing to create wireframes for clients during technical site audits. Maybe you’re an SEO consultant or analyst as well, or you want to have a site developed and need to show your developer how you would like the site organized.

I’d like to share a couple of cool tools with you that I find extremely useful when building wireframes of existing sites as well as creating new wireframe mockups for sites to be developed.

Wirify

One bookmarklet that I learned about through Tom Critchlow’s post about SEO bookmarklets on SEOmoz (link) is the Wirify bookmarklet. Here is the code, which you drag as a custom bookmark in your browser:

Wirify

When you are on a page and click the “WirifyMe” bookmarklet (that’s what I named mine, yours may be different), you will see something like this (a wireframe of the site you are currently looking at):

You should use Wirify to create quick wireframes of your, or your competitors, existing site. Then take screenshots (CTRL + Print Screen or use Jing as I talk about below) and manipulate in your favorite editor. Sometimes I use Paint, but Photoshop is quickly replacing that.

Pro tip: If you need to wireframe a page that stretches below the fold of your browser (like most pages do), you’ll need a workaround to get Wirify working. My favorite way is to use the Aviary Chrome extension, in which you can take a screenshot of the entire page (it’s like magic). So you use Wirify on the page, then the Chrome Aviary extension to do a Full Screen capture.

Mockingbird

If you need to mock up a new site, I recommend using GoMockingbird (found via Kris Roadruck). It’s a free tool to use, and very simple as well. It’s a drag-and-drop editor that lets you add in everything from the URL bar to images, videos, text boxes, buttons, and much much more.

Here is a screenshot of the editor you will see:

I’ve used Mockingbird for a lot of things, such as client docs and even blog posts (it’s how I did the screenshots on my Rel Canonical or 301 post

I hope you found this post helpful. What tools do you use for wireframing new or existing websites? I’d love to hear them in the comments.