Website wireframe
From Wikipedia, the free encyclopedia
 |
This article does not cite any references or sources. Please help improve this article by adding citations to reliable sources. Unverifiable material may be challenged and removed. (July 2008) |
 |
This article contains instructions, advice, or how-to content. The purpose of Wikipedia is to present facts, not to train. Please help improve this article either by rewriting the how-to content or by moving it to Wikiversity or Wikibooks. |
A wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in web design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface. Because of this, they are often completed before any artwork is developed. When completed correctly they will provide a visual reference upon which to structure each page. Wireframes also 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 to develop an awareness of and familiarity with the site.
Creating a set of wireframes for any 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. When creating your wireframes it is beneficial to ensure that branding is central to the identity of a site so as to communicate the personality of the site.
Wireframes can be created in many ways with several tools depending upon one's communication needs and budget. Most simply, pen and paper are key tools for creating web wireframes, but there are also interactive tools available for use by designers, programmers, and project managers, as well as programs that even allow collaboration with clients prior to the website programming stage. These tools include: Adobe Illustrator, Microsoft Visio, OmniGraffle, Axure RP and iRise, as well as online solutions such as Iplotz and ProtoShare. These programs allow for a clean presentation of a website's wireframing and in some cases, prototype a website to share with clients before building the final product.
