Browsers / Instructional Design / Uncategorized / Web 2.0 Tools / Web Design Tools

Looking deeper into Web Design with Wirify – a quick tool for WIREFRAMING.

Photo by Baldiri (licensed under Creative Commons)

On a similar topic as my post from yesterday, I’ve found another cool free tool you can use to view a webpage differently.  A little more in-depth.

Wireframes are blueprints that allow you to see the size, shape and orientation of the elements that make up a page. Often referred to as “skeletal” view, a wireframe describes the content, interface and navigation (menus, sidebars, etc) with simple shapes in a greyscale color scheme.  Wireframes are often part the website planning (pre-production) process, but can also be useful when performing usability testing or updating the feel of a website.

As part of a tool demo assignment for my design course, I did some rigorous exploring for a design tool that is both useful and free.  We all like free things.

Wirify is a tool that requires no installation and can be added to any browser (Firefox, Chrome, IE, etc) simply by dragging the “Wirify By Volkside” link into your bookmarks toolbar.  Go ahead and go to Wirify.com and do it.  Drag that link into your bookmarks bar.  I’ll wait.  And hope you come back.

Is it up there?  Ok, now click on that “Wirify by Volkside” bookmark while on this page.  Don’t worry, it won’t break anything.  After you do that, just reload the page and you’ll be back here.  If it all worked according to plan, you should have seen something that looks like this:

Not too exciting, huh?  Well, that’s the point.  With the pictures and type removed, you can see how my WordPress Blog layout or “theme” is put together.  Solid grey boxes with an X through them represent an image of some kind.  Black rectangles stand in for headings, lighter grey for text boxes where my copy lives.

So why would I want to use this tool?

Use this tool when you are looking for inspiration when planning for your website.  Use this tool to show students how all the elements come together to form the user interface of a page.  Use it to point out web pages that are too busy.  Use it to showcase webpages that are put together well…and to show a little about why they are so pleasing to use.

Good design is invisible…it just feels right

For those of you that want to take it further…

There are paid features of Wirify that allow you to export a Wirified (yes, I make up words) website layout into Illustrator, Inkscape, and other vector-based design programs.  Cost is relatively inexpensive ($30/5 credits) and just might be worth it for web designers that are looking to improve their ability to analyze webpage layouts.

I’d love to hear comments from anyone who has used Wirify or another free wireframing tool.  Leave comments below :]

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s