Wireframe Examples

Wireframes are a basic visual guide used in digital design to suggest the layout of fundamental elements in the interface. Because of this, they are often completed before final visual designs are developed. When completed correctly, they provide a visual reference upon which to structure each screen.
  1.  RR – Detailed Wireframes (PDF)

Wireframes allow for the development of variations of a layout to maintain design consistency throughout the site. This is an important part of the initial development stage because it creates user expectations and helps develop familiarity with the site.

Creating a set of wireframes for a project also acts as a way to communicate with clients and stakeholders such as content creators, engineers, and developers. Over the course of a project the wireframing exercise functions as a stable base on which to consider changes, diverse user paths, and new requirements. The information architect and information designer typically use the wireframes as a meeting of the minds and as solid working documents on which to establish the language, content, and structure of interactions users will have with a given site or project.

The creation of wireframes also helps to define the positioning of global and secondary levels of navigation in a prominent and intuitive position, as well as providing an area for utilities such as helpful information and search facilities. Generally, it is after creating wireframes that branding is applied to the site to communicate the identity and personality of the site.

Wireframes can range from simple structural drawings of the site to a high-fidelity simulation of the navigation, which has movements, functional links and complex interactions. For simple drawings, paper prototyping is the most common technique, but it’s becoming increasingly common to use software for more complex projects.[1]. The most used programs for lo-fi wireframing are Visio, Mockingbird, Balsamiq, Pidoco, InDesign, Illustrator, Photoshop, and OmniGraffle. Hi-fi, enterprise wireframing/prototyping tools include Axure, ProtoShare, Justinmind, and Irise. For collaborative user interface design purposes, online wireframing tools like Pidoco or Protoshare, which offer collaboration or project management functionality, are common.

— Adapted from Wikipedia, Website Wireframe