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.
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.
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.