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.
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:
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.
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.
8 thoughts on “Awesome Ways to Build Website Wireframes”
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
Sweet! Good luck. It’s the bookmarklet I use most often, probably!
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)
Thanks, Tom! I’ve also heard great things about it. I used it at my old job, but have taken to using GoMockingbird recently, as it’s online and easily accessible.
hey Tom, Balsamiq is cross platform and indeed they have just launched the cloud based version of MyBalsamiq.
Thx John for Wirify tip off!
Take also a look on http://framebox.org – lightweight online mockup tool. No downloads, no plugins – just browser 🙂
Pingback: Seven Links for Saturday #4
Hadn’t seen wirify yet, nice one. Thanks for the tip.
Comments are closed.