Home | Search Engine Optimization | Awesome Ways to Build Website Wireframes

Awesome Ways to Build Website Wireframes

John Doherty —  November 29, 2011
  • Buffer
  • Vote on Hacker News
  • Sharebar
  • Buffer
  • Vote on Hacker News

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):

Site Wireframe

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:

Drag and drop!

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.

John Doherty

Posts

I'm the new (as of October 2013) Online Marketing Manager of Hotpads.com, soon to be based in San Francisco. Previous to Hotpads I worked at Distilled for 2 years as an online marketing consultant. In my spare time I shoot lifestyle photography, explore new and interesting food in New York, ski, rock climb, and update my Twitter and Google+ accounts.

8 responses to Awesome Ways to Build Website Wireframes

  1. Excellent post, thank you. Wirify looks really cool and I’ve grabbed the bookmarklet and will definitely be using it often.

    I also wanted to suggest another chrome extension for full screen capture, called screen capture and it’s by Google. Just another option https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg

  2. John great post – I would also recommend Balsalmiq – heard Will Critchlow talk about it at Searchlove and I’ve had great results working with it (it’s Mac only though)

  3. Take also a look on http://framebox.org – lightweight online mockup tool. No downloads, no plugins – just browser :)

  4. Hadn’t seen wirify yet, nice one. Thanks for the tip.

Trackbacks and Pingbacks:

  1. Seven Links for Saturday #4 - January 14, 2012

    [...] #4: Awesome Ways to Build Website Wireframes 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. [...]