It’s best to start out creating a wireframe for the shell of your site. This generally includes the site-wide header and footer, and defines the horizontal space you have to work in.
Some Usability Considerations for Your Site Shell:
- Page Width
How wide is your site going to be? You need to be sure that it will fit into most of your users' computer screens. It is important to establish this now. If it changes later in the process, you’ll have a lot of revisions to make. - Page Fold
Establish the line below which content will not visible only when a user scrolls down. This will be important later, when you're trying to position elements on a particular page.
Quick Tips for Better Wireframes
- Page Header
Create a page header that includes the name of the document, the name of the page, version number, and revision date. Visio and Omnigraffle let you insert automatic fields so you don’t need to update then every time you create a page or change the document. - Background / Master Page
Designate your site shell as a background / master page. (These are the terms used in Visio and Omnigraffle, respectively.) This lets it appear as a background to every page in your deck of wireframes.