Un plano de baja fidelidad de una página web que muestra el diseño y la estructura sin detalles de diseño visual. Se usa para planificar la arquitectura de la página antes de comenzar cualquier trabajo de diseño.
Un wireframe es un esquema de baja fidelidad de una página web que muestra el diseño, la estructura y la colocación de los elementos — sin color, tipografía ni imágenes finales. Piénsalo como el plano de una página: muestra dónde irán el encabezado, el hero, las secciones, las barras laterales y el pie de página, y cómo se relacionarán entre sí, antes de que se tomen decisiones de diseño visual.
Los wireframes cumplen un propósito crítico en el proceso de diseño: separan las decisiones estructurales de las decisiones visuales. Debatir si una sección debe aparecer antes o después de otra es mucho más barato y rápido en la etapa de wireframe que después de que haya sido completamente diseñada y desarrollada. Los wireframes permiten a los clientes, diseñadores y desarrolladores alinearse en la arquitectura de la página antes de invertir en la ejecución.
Para los sitios web de negocios, las decisiones comunes de wireframe incluyen: cuántas secciones incluir en la página de inicio y en qué orden, si usar una barra lateral o un diseño de ancho completo para las entradas del blog, dónde debe aparecer el formulario de contacto en cada página de servicio y cómo debe funcionar la navegación móvil. Estas elecciones estructurales afectan directamente la tasa de conversión y la experiencia del usuario.
Los wireframes existen en un espectro que va desde bocetos toscos hasta planos digitales muy detallados. Para proyectos simples, un boceto en papel o en una pizarra puede ser suficiente. Para sitios web o aplicaciones multipágina complejas, los wireframes suelen crearse en herramientas como Figma, Sketch o Adobe XD, y pueden incluir anotaciones que explican los comportamientos interactivos.