What is a Website Wireframe? Learn to Use Simple Wireframes to Start Your Designs

A Web wireframe is a simple visual guide to show you what a Web page would look like. It suggests the structure of a page, without using any graphics or text. A website wireframe would show the entire site structure - including what pages link to where.
Web wireframes are a great way to start your design work. And while it's possible to create complex wireframes with huge amounts of detail, your planning can start with a napkin and a pen. The key to making good wireframes is to leave out all visual elements. Use boxes and lines to represent pictures and text.
Things to include in a Web page wireframe:

• boxes for primary graphical elements
• placement of headlines and sub-heads
• simple layout structure
• calls to action
• text blocks

How to Build a Simple Web Wireframe

Create a Web page wireframe using any scrap of paper you have handy. Here's how I do it:

1. Draw a big rectangle - this can represent either the entire page or just the visible portion. I usually start with the visible portion, and then expand it to include elements that would be below the fold.
2. Sketch the layout - is it 2-columns, 3-columns?
3. Add in a box for a header graphic - Draw over your columns if you want it to be a single header above the columns, or just add it where you want it.
4. Write "Headline" where you want your H1 headline to be.
5. Write "Sub-Head" where you want H2 and lower headlines to be. It helps if you make them proportional - h2 smaller than h1, h3 smaller than h2, etc.
6. Add in boxes for other images
7. Add in navigation. If you're planning tabs, just draw boxes, and write "navigation" over the top. Or put bulleted lists in the columns where you want the navigation. Do not write the content. Just write "navgation" or use a line to represent text.
8. Add additional elements to the page - identify what they are with text, but don't use the actual content text. For example, if you want a call to action button in the lower right, put a box there, and label it "call to action". Do not write "Buy Now!" in that box.

Once you've got your simple wireframe written, and it shouldn't take you more than 15 minutes to sketch one up, show it to someone else. Ask them if there's anything missing and for other feedback. Based on what they say you can write another wireframe or keep the one you have.

Why Paper Wireframes are Best for First Drafts

While it's possible to create wireframes using programs like Visio, for your initial brainstorming sessions, you should stick to paper. Paper doesn't seem as permanent, and many people will assume you threw it together in 5 minutes and so not hesitate to give you good feedback. But when you use a program to create fancy wireframes with perfect squares and colors, you run the risk of getting caught up in the program itself and spending hours perfecting something that isn't ever going to go live.
Paper wireframes are easy to do. And if you don't like it, you just crumple up the paper, throw it in recycling and grab a new sheet.