What is a wire-frame?

I heard this word yesterday mentioned in class. It sounded so cool & design-friendly, I just had to know what it meant. So I of course googled it & found its meaning. A wire-frame is where you plan out the details of a site before going into the visual design of it. You figure out a sites architecture, functionality and content. There are many methods you can use, but my favorite is paper wire-framing or “pwireframing”, isn’t that cute? Wish I would of thought of it.

Fisher Price wire-frame tool

if only it was this easy

This should be where a Web Designer spends at least 30% or more of his/her time before starting the project. A teacher must have a lesson plan before going into a classroom to teach, or should, so why shouldn’t we as designers have a plan before going into making a web page or pages? So first things first, get the goal of your web page. Next find out what topics are going to be covered on this site. Then think of what perspective you are going to take with the site. Finally, figure out who your target audience is going to be and tailor it to them. 

As I was searching for information on Wire Framing I came across three popular websites for designing websites. The first was Axure.com, the second was muiomuio.com and the last one was called Omni Graffle (only for macs). All these tools cost money and I was surprised I could not find a free tool to wire-frame. I guess I’ll have to come up with my own process.

I’d like to share a few sites I found fascination in my quest.

http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/

http://www.axure.com

If anybody can think of a good way to wireframe for free please let me know, and if you know of any free tools, please drop me a line.

Advertisements

De~nada!

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