A simplified representation of a web page or an application screen that illustrates and describes its proposed information and structure, as well as its functional behaviors.
Creates visual clarity and direction for website or application content by allowing for a rapid exploration and refinement of its functionality, behaviors, and relative properties.
Wireframes are variable and flexible diagrams, both in their format and purpose. Typically prepared in grayscale with minimal styling (graphical or typographical), wireframes are a rapid and relatively inexpensive tool for representing screens, or portions of them, to other core members of the project team.
Their simplified appearance is precisely what helps steer any discussion closer towards how a screen will behave and what kinds of information will be displayed, rather than what the page or screen will look like. This lack of visual realism isn’t always seen as a good thing. Wireframes—often flat, nonfunctional vector-based drawings—don’t always effectively demonstrate dynamic client-side screen interactions.
There is an ongoing debate about the merits of displaying real content, as opposed to placeholder content. Some argue that, in much the same way that injecting enhanced visual elements onto a wireframe that make a screen seem closer to the final design can shift focus away from its functionality and behavior, incorporating content elements on wireframes that aren’t really in question can have a similarly adverse affect.
The answer most likely lies somewhere in between, where structural and instructional content integral to a screen’s core functionality and behavior is a must, but, say, mocking up a lengthy article to demonstrate a screen’s flexibility may risk undermining its true purpose. However wireframes are presented, they are ultimately about clearly communicating the different information elements and their relative properties, as well as the range of behaviors available to users.