A wireframe is a visual guide that represents the skeletal framework of a website or app. It is a two-dimensional skeletal outline of a webpage or app that provides a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose, usually driven by a business objective and a creative idea. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and by those with expertise in interaction design, information architecture, and user research.
Wireframes focus on the range of functions available, the relative priorities of the information and functions, the rules for displaying certain kinds of information, and the effect of different scenarios on the display. They help establish functionality and the relationships between different screen templates of a website. Wireframes may be utilized by different teams, including designers, developers, and stakeholders, to communicate ideas and collaborate on the design process.
Wireframes are usually the initial iteration of a webpage or app, used as a jumping-off point for the products design. They are an effective way to make rapid prototypes of pages while measuring the practicality of a design concept. Wireframes can vary in their production, from paper sketches to computer-drawn images, and in the amount of detail that they convey. Low-fidelity wireframes help facilitate project team communication and are relatively quick to develop, while high-fidelity wireframes are more detailed and provide a more accurate representation of the final product.