Website wireframes are grayscale block diagrams that illustrate the overall navigation and blocks of elements such as images, content and functionality. They are the skeletal rendering of how the web page elements fit onto the page. These are an organizing plan and not a design. They are done before any artwork is generated.

The term “wireframe” comes from the world of computer graphics and 3D animation. Here wireframes are used for prototyping and because they are quick to generate and they use a minimum of computer processing.

Using a planning wireframe will often generate new requirements and questions that hadn’t been thought of before. It forces you to think through your website’s functionality at the page level. This helps minimize more costly changes later on in the development process.

How to make a wireframe

1. Determine the basic layout such as how many columns the page will have. Should the navigation be along the top (horizontal) or on the side (vertical)?
2. Decide on the call to action for the page. Place it where it can be easily seen, preferably above the fold.
3. Organize and place the page elements such as the header, footer, navigation, content objects, and branding elements. Group and prioritize the elements according to how you want them seen.
4. Label the navigation links, headings and content objects.

Use placeholders for text and images. Use dummy text such as lorem ipsum to show text areas.
The wireframe gives the web designer a visual guide to design from. This ensures the call to action and priority elements are placed on the page for maximum effectiveness.

Related posts:

1. Create a Website Wireframe Before You Design
2. Planning Your Website: The Site Map
3. Call to Action Gets Website Results
4. How to Design a Website with CLASS
5. Website Call to Action