Definition:
A wireframe,
also known as a page schematic or screen plane, is a visual guide that represents the skeletal structure of a website.
Wireframes are created for the purpose of organizing the elements so that they better carry out their particular purpose. The purpose is usually to be informed by a business objective and a creative idea. The page scheme represents the design of the page or the arrangement of the contents of the website, including elements of the interface and navigation systems and how they work together.
Table of Contents
Features of wimeframes
The wireframe usually lacks typographic style, color, or graphics, as the focus is primarily on the functionality, behavior, and priority of the content. In other words, it focuses on what a screen does, not its appearance. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced through a wide range of free or commercial software applications. Wireframes are generally created by business analysts,
user experience
designers, developers, visual designers, and other professionals with expertise in interaction design, information architecture, and user research.
Wireframes focus on:
- The range of functions available.
- The relative priorities of information and its functions.
- The rules for viewing certain types of information.
- The effect of different scenarios on the screen.
The screen plan is a non-graphic design of a web page. The wireframe connects the underlying conceptual structure, or information architecture, to the surface or visual design of the web page. Wireframes help establish functionality and relationships between the different screen patterns of a web page.
Creating wireframes is an effective way to quickly prototype pages, while simultaneously measuring the feasibility of a design concept. Within the process of building a website, performing the wireframe is where the thought becomes tangible.
Aside from websites, wireframes are used for prototyping computer applications or other display-based products involving human-machine interaction.
Advantages of Wireframes
Among the benefits of Wireframes we can mention the following:
- They help visualize and plan the overall structure and layout of a website or app before the design process begins.
- It allows potential design problems to be identified and resolved in advance, reducing the need for costly subsequent revisions.
- It facilitates collaboration among project stakeholders, including designers, developers, and clients, by providing a shared vision of the project.
- It provides a streamlined approach to user interface design, ensuring that design decisions are consistent and based on user needs.
- It helps in the development of responsive design, as wireframes can be used to design and test how different screen sizes will affect the user experience.
- It can serve as a model for development, providing detailed information on how the various elements of the design should work and interact with each other.
Related Terms
