Page Layout and Wireframing
Before selecting fonts, picking colors, and designing graphics, is it best to decide where on the screen that information and page elements will go. Mapping or sketching these elements out ensures that the page, once designed, will be useful. A wireframe is a low-fidelity map or sketch of a page, produced before it is fully designed.
Page Structure & Layout Principles
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.
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.
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.
Many at Yale use MyBalsamiq as their tool of choice, but many other options exist. Some of the most popular are listed below.