How to Turn ANY Website into a Wireframe Mockup INSTANTLY : A Tutorial


The everyday problem:

You really like the layout of a web page.  You want to build a wireframe mockup based on it, and it takes too long. 

Why not just screencapture the page?  Mainly because images and text distract your vision when you’re trying to figure out the best layout possible.  You may also want to compare different layouts and having everything mocked up on wireframe instead of screencaptured may provide a more unbiased view of things.

The simple solution:

Wirify is a cross-browser bookmarklet which instantly turns full blown web pages into wireframe mockups with a single click.


Step 1: Visit the Wirify webpage

Step 2: If you’re using Chrome or Firefox, just drag and drop the bookmarket onto your browser bookmark bar.  (If you’re using Internet Explorer switch now for a better experience)

wirify bookmarklet

Step 3: Click on the bookmarket whenever you want to turn the website into a wireframe mockup.

That’s it!  So simple :)

Check out the YouTube video below for a step-through Wirify

565 Replies to “How to Turn ANY Website into a Wireframe Mockup INSTANTLY : A Tutorial”

Leave a Reply

Your email address will not be published. Required fields are marked *

2 + 16 =