A Wireframe refers to a layout, outline or visual depiction of a web page that contains the framework of the web page. A wireframe shows the key elements that exist on the page.
Wireframes are helpful in navigational processes, they serve as visual guide representing the schematic framework of the web page. General, a wireframe focuses on the space allocation (layout of pages) in the website and the logical arrangement of contents.
A Little More on What is a Wireframe
The wireframe of a website refers to the screen blueprint that a website adopts. It is an architectural design of sites in black and white diagrams. This aids easy navigation and interaction when users visit the website.
This term vital in the screen design process of websites. Websites owners plan the layout of their sites and information displayed using wireframe. The interaction of an interface is planned without any distortion caused by colors or design choices. Wireframe determines how users interact with an interface.
Wireframes contain buttons and menu columns that users use when navigating a website. A wireframe majorly focuses on the behavior of contents, their priority and functionality and not on how beautiful a screen should be.
Business analysts, web developers, professional designers and visual designers create wireframes. These wireframes can take the form of sketches or pencil drawing indicating the page layout of a website, the arrangement of content, interface elements and navigational systems. The major areas wireframes focus on are;
- The variety of functions and contents available on a website,
- How these functions or information are displayed based on priorities,
- The objectives that inform how they are displayed, and
- The effects of items on display.
The wireframe frame of a website is a depiction of the connection between the structure and contents of a website. The combination of architectural design and information arrangement are displayed as the visual design of the website.
Wireframes are used to make prototype designs of pages, sites that involve a high level of human-computer interaction or relationship make use of wireframes.
References for Wireframe
Academic Research on Wireframe
Automatic construction of curvilinear solids from wireframe views, Lequette, R. (1988). Computer-Aided Design, 20(4), 171-180.
Identification of faces in a 2D line drawing projection of a wireframe object, Shpitalni, M., & Lipson, H. (1996). IEEE transactions on pattern analysis and machine Intelligence, 18(10), 1000-1012.
Decomposition method for extracting face topologies from wireframe models, Agarwal, S. C., & Waggenspack Jr, W. N. (1992). Computer-Aided Design, 24(3), 123-140.
Feature matching for outer orientation of single images using 3-D wireframe controlpoints, Schickler, W. (1993). International Archives of Photogrammetry and Remote Sensing, 29, 591-591.
3-D motion estimation and wireframe adaptation including photometric effects for model-based coding of facial image sequences, Bozdagi, G., Tekalp, A. M., & Onural, L. (1994). IEEE Transactions on circuits and Systems for Video Technology, 4(3), 246-256.
Single-pass wireframe rendering, Bærentzen, A., Nielsen, S. L., Gjøl, M., Larsen, B. D., & Christensen, N. J. (2006, July). In ACM SIGGRAPH 2006 Sketches (p. 149). ACM.
3D surface point and wireframe reconstruction from multiview photographic images, Prakoonwit, S., & Benjamin, R. (2007). Image and Vision Computing, 25(9), 1509-1518.
Wireframe projections: physical realisability of curved objects and unambiguous reconstruction of simple polyhedra, Cooper, M. C. (2005). International Journal of Computer Vision, 64(1), 69-88.
A description of the Langley wireframe geometry standard (LaWGS) format, Craidon, C. B. (1985).
Feature-driven, process-based approach to the integration of CAD/CAM in wireframe models, Schulte, R. M., PADMANABHAN, S., & DEVGUN, M. S. (1992). THE INTERNATIONAL JOURNAL OF PRODUCTION RESEARCH, 30(5), 1005-1028.