A website wireframe is a schematic view of your web page layout. This is kind of a “first draft” used in planning and organizing a web page. It is a skeletal rendering of how the web page elements fit together onto the page.
Wireframing is generally done with grayscale block diagrams that illustrate the overall navigation and blocks of elements such as images, content and functionality. The call-to-actions are strategically located. 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. We use creating a sitemap and wireframing as the first two steps in website design.
How to create your wireframe
- 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)?
- Decide on the call to action for the page. Place it where it can be easily seen, preferably above the fold so it can be seen immediately by an arriving visitor.
- 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.
- 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 your 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.
