Just like you wouldn’t build a house without a blueprint, you don’t want to build a website without a wireframe. Whether you’re building an entire site from scratch or just adding on a new page or section, wireframes are a big help to the design team as well as the site developers.
What wireframes do
Essentially, wireframes are the blueprints for your site. They tell the people building the architecture of the site what sections will go where to give them get an idea of what they will have to code, and they give the designers an overview of how the different pages will work together, which is helpful in choosing design elements.

What wireframes don’t do
The point of a wireframe is to provide all involved in the project with a quick, simple idea of how the site will work before any major development is started. Wireframes typically do not include any design elements; they are just black and white, barebones sketches.
How wireframes are made
Wireframes can be rendered digitally (using a software program like Photoshop or Visio) or simply drawn by hand on a piece of paper (which is usually what I do, especially for single page builds).
What to include in the wireframes of your site
In addition to showing the basic layout of the site, other items to include will depend on the project (and what the client has requested to see, most likely). For the most part, your wireframes should display the placement of:

• Navigation (where the bars, buttons, drop-down menus, etc. will go)
• Headers and footers
• Logos or taglines
• Text and/or images

Making your own
Creating your site wireframes is not an exact science, and there’s not really any “right” way to do it. As long as they convey the basic information needed by your developers and designers, your wireframes are going to be a huge help in creating your site efficiently and effectively.