Page Layout and Wireframing

Page Structure & Layout

While each website has specialized information to serve particular and unique audiences, web pages tend to have the same kinds of elements: headers, footers, navigation menus, search boxes, logos, copyright information, contact information, page titles, bread crumbs, etc. Website visitors have learned to look for these elements in familiar places, such as the logo in the top left and the copyright at the bottom. Your website will be most usable and user-friendly if it places these elements in standard places. Otherwise, users may become confused and leave your site because it is too difficult to use.

Wireframing

Wireframes communicates a designer’s decisions about information placement. Specifically, a wireframe conveys:

  • what information, controls, form elements, and other interactions should be present on a page;
  • their general placement; and
  • their relative priority.

Wireframes are intended to build and document a consensus between site planners, designers, developers, and owners.

Wireframing Tools

Wireframes are, by design, lower fidelity and have less detail than visual mockups. To many, traditional graphic design software feels like too much for simple layouts and sketches of page content. Consequently, simple wireframing tools have been developed to allow designers to quickly create, change, and communicate their plans.