Building Wireframes

A wireframe is a basic visual guide used to design websites. It suggests the structure of a website and relationships between its pages. A wireframe is a similar illustration of the layout of fundamental elements in the interface. Typically, wireframes are completed before any artwork is developed.

Requirements

Page Layout

Each page should have DIV tags as placeholders for the navigation, main content, footer and any other areas your site will have. Each DIV tag needs an ID to correspond to its purpose. (Ex. id=”footer” or id=”wrapper”)

Navigation

The navigation needs to be linked and working so that each of the pages link to one another. On the active page the link should be inactive. (Ex. on the home page, the link for “Home” should not be an active link because you are already on the home page.)

Main Content

Each page should have the title of the page marked as a H1. The title should be placed inside of the content section. Additional text content should be included at this point. Each page should also be titled according to its content.

Example

Simple Website Wireframe