What Is a Website Wireframe & How Can It Help You Develop Your Website?
The Back Of A Napkin
A website wireframe is just a sketch of what you want your site to look like. It’s not supposed to be pretty, and you don’t even need software to create it. You can just grab a piece of paper, or even a napkin, and start blocking in your website, element by element. “The title goes here… and then we have a navigation menu… oh, and here I can put a search box.” Just in those general, simple terms, put one part of your website together, until the end result looks something like this:
As you can see, this isn’t computer code or anything overly technical or complex. Anyone could look at this quick sketch and instantly figure out what they’re seeing. And that’s the point about wireframes: They are very quick to make, and easy to understand. They let you get the important stuff right, like the site layout, navigation structure, and ad placement, before you touch a single line of code. And if you’re working with other people, such as a coder or a designer, they let you all come to an agreement about what the end result is going to look like. This can save a ton of confusion and double work, especially when it comes to larger projects.
It’s important to note the lack of detail in the wireframe above: The images next to each article aren’t “real” images, but obvious placeholders. Even the article text isn’t filled in – it’s just a bunch of lines. You can’t see what the color scheme is going to be – it’s all just black and white. This is what a wireframe is supposed to look like. It’s not supposed to be a complete representation of the final website, but only its spirit or essence, if you will. It’s just the most important stuff.
Tools For Wireframing
As I’ve previously mentioned, the best tool for wireframing is often just a piece of paper and a pen. Getting away from your computer can really help clear your mind and focus on what you want your website to look, without annoying interruptions or messing about learning a new wireframing tool. A math notebook (as shown above) usually works best because you the trace along the lines, create neat rectangles, and easily align the different pieces of your site together. Grab one, a pen or two, and go have a cup of coffee somewhere far away from your computer. You’ll come back with a clear idea of what exactly you’re trying to create.
That said, sometimes wireframing software is necessary. For example, maybe you’re working as part of a team that’s spread out across the country or globe, or maybe you’re writing a blog post about wireframing. In these cases, manually scanning wireframes isn’t a very practical solution. Here are some free software tools that can help, if you really can’t use a pen and paper:
- Lumzy: A free, Flash-based wireframing tool with a rich library of objects. This is the tool I used to create the wireframe you see above – it’s quick and painless.
- QuirkTools Wires [Broken URL Removed]: A simpler tool, without alignment options. It’s not Flash-based, though.
- Mockingbird: A commercial tool, but it does have a limited free plan.
Not Just For Websites
You probably realized this yourself, but this is a good note to end off with: Wireframes are a fantastic tool for creating any product, not just a website. Maybe you have a rough idea for an iPhone or Android app, or even a full-fledged computer application. In these cases, website wireframes are invaluable for showing what everything looks like, and may even help you get people to support your project in different ways.
Have you ever created a wireframe yourself? Are you going to start now that you’ve read this? Let me know in the comments!
Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.