What Is a Website Wireframe & How Can It Help You Develop Your Website?

Ads by Google

wireframe   What Is a Website Wireframe & How Can It Help You Develop Your Website?On a technical level, a modern website isn’t just one thing. It’s a complex soup of interacting technologies, such as HTML (the markup you see on the page), JavaScript (the language running in your browser, affecting interactions), CSS (the language for setting the page’s appearance), and more. But on a more basic level, a website is an idea.

If it’s your website, you probably know what you want it to do, or what you want users to get out of it. Maybe it’s supposed to be an easy place for them to find information about technology; or maybe it should explain why you’re the best band or dog-walker around. In any case, long before you have to deal with HTML, CSS, JavaScript, or any other specific Web development technology, you should have a very clear idea of what your site should do, and what it should generally look like. And website wireframes are the way to solidify that idea and communicate it.

The Back Of A Napkin

shutterstock 5909971   What Is a Website Wireframe & How Can It Help You Develop Your Website?

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:

Ads by Google

wireframe7   What Is a Website Wireframe & How Can It Help You Develop Your Website?

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

shutterstock 107929565   What Is a Website Wireframe & How Can It Help You Develop Your Website?

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: 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!

Image Credits: Crumpled napkin image via ShutterStock, Red notebook image via ShutterStock

Ads by Google

8 Comments - Write a Comment

Reply

Leon Stafford

Great article Erez. If I am lazy and try to skip giving developers a wireframe, it usually comes back to bite me with either a request for the wireframe or a developed product which is not at all what the client wanted. A bit more planning saves a lot more development for sure… I’ve used the free Firefox extension, Pencil (http://pencil.evolus.vn/), which can also be installed as a stand-alone tool. It has extensible libraries, such as iOS.

Florin Ardelian

Nice! Thanks for the info on Pencil. The Windows version should install and run fine on any Linux/Unix distribution if you have Wine.

Gustavo Costa

Inkscape, Dreamweaver, Kompozer and Coda 2 make it.

Erez Zukerman

Oh wow, that’s a great recommendation! Thanks Leon :)

Reply

Anonymous

Smashing Magazine has published 35 excellent wireframing resources:

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

Reply

Lisa Santika Onggrid

I made wireframes way back when I still learn HTML and designing blogger templates. I did the process twice: sketch on paper then a dummy page. I’d touch the code once I was satisfied with the design. Much more efficient than coding the whole page and deciding you want something different.

Reply

Bernardo Delapasion

didnt know it could do that ….

Reply

Ross Dempsey

Balsamiq is a great wireframing tool – it is commercial, but they’re willing to give free keys to people doing open-source or charitable work.

Your comment