Respuesta corta: Un wireframe web es un plano sencillo de una página: qué bloques tiene, en qué orden y dónde van el menú, los botones y los formularios. Suele hacerse con cajas grises y etiquetas simples, antes del diseño, para acordar primero la estructura.
Qué es un wireframe web
Balsamiq, que hace una herramienta de wireframes, llama al wireframe el esqueleto de un proyecto digital. Se centra en la distribución y en dónde va el contenido, no en los colores, las fuentes ni el acabado visual.
La Interaction Design Foundation describe los wireframes como representaciones visuales básicas de la estructura y la distribución de una página o una app. Muestran dónde van las cabeceras, los botones, la navegación y los bloques de contenido, para que diseño, desarrollo y todos los demás trabajen con el mismo plano.
Tom Lowry, de Figma, lo resume así: un wireframe le da a la gente una primera vista del proyecto antes de que nadie haya invertido mucho tiempo en pulirlo.
Baja, media y alta fidelidad
La fidelidad es cuánto se parece un wireframe a la página terminada. Un wireframe de baja fidelidad es un boceto o un diagrama de bloques, casi siempre en blanco y negro o en gris, centrado en la distribución y la estructura.
Uno de alta fidelidad añade contenido real, espacios precisos, tipografía, colores y elementos de marca, así que se parece mucho al diseño final. Figma describe también un paso de fidelidad media que ayuda a iterar y dar forma al diseño final.
El consejo de Balsamiq es empezar con un wireframe de baja fidelidad mientras decides qué construir, y añadir detalle cuando la idea esté clara.
Wireframe, mockup y prototipo
| Entregable | Qué muestra | Cuándo llega |
|---|---|---|
| Wireframe | La estructura: bloques, orden, menús y botones | Primero, porque es lo más rápido de hacer y de cambiar |
| Mockup | Cómo se verá el diseño final | Después del wireframe |
| Prototipo | Una simulación cercana al producto en la que se puede hacer clic | Antes de construir, para probar el diseño con personas |
Según la guía de wireframes de Balsamiq, consultada el 3 de noviembre de 2026.
NN/g, una firma de investigación de experiencia de usuario, señala que los wireframes muestran muy bien la distribución pero no describen bien la interacción. Eso lo cubre un prototipo: NN/g lo llama un diseño candidato que puedes poner delante de personas. Nuestra guía de UX y UI explica en qué se diferencian la experiencia de usuario y el diseño de la interfaz.
Qué poner en un wireframe web
La Interaction Design Foundation enumera las partes que suele tener un buen wireframe: la distribución y la estructura, la navegación, una jerarquía que pone primero el contenido más importante, los elementos interactivos como botones y formularios, y notas que explican las decisiones.
Dibújalo al tamaño que usan tus visitantes. Figma recomienda ajustarlo a su pantalla e indica 393 por 852 píxeles para un teléfono y 1,440 por 1,024 para una computadora.
Nuestras guías de la cabecera web y del pie de página web tratan dos bloques que comparten casi todas las páginas de un sitio.
Cómo hacer un wireframe web
- Escribe el objetivo de la página y la acción principal que quieres que haga quien la visita.
- Haz la lista de bloques que necesita la página, de la cabecera al pie.
- Ordena los bloques como los necesita el visitante, lo más importante primero.
- Dibuja cada bloque como una caja gris con una etiqueta, en papel o en una herramienta.
- Usa titulares y textos de botón reales siempre que puedas, aunque sean provisionales, en lugar de texto de relleno.
- Dibuja la página otra vez al tamaño de un teléfono y mira dónde cae cada bloque.
- Enséñaselo a alguien, anota lo que le confunde y corrige las cajas antes de diseñar.
Cuando la estructura está clara, pasa al mockup y al diseño. Nuestra guía de landing pages explica lo que necesita una página hecha para una sola acción.
Nuestra página de inicio como wireframe
El 3 de noviembre de 2026 leímos nuestra página de inicio en inglés como un wireframe, en un navegador a 1,440 y 390 píxeles de ancho.
Tiene siete bloques en el mismo orden en los dos anchos: la apertura, una frase de presentación, nuestros servicios, nuestro trabajo, nuestro proceso, el blog y el contacto. Después viene el pie de página.
En computadora la página mide 14.1 pantallas de alto, y el bloque de contacto empieza a 11.2 pantallas del inicio. En el teléfono mide 16.8 pantallas, y el contacto empieza a 12.1.
El orden deja el contacto al final, así que la cabecera lleva el camino hasta él. Se queda fija al bajar: en computadora muestra «Write to us» en cada pantalla, y en el teléfono el mismo enlace está en el menú que abre su botón «Menu».
Ese es el tipo de decisión para el que sirve un wireframe: dónde va la acción principal y cómo llega a ella un visitante desde cualquier bloque.
Antes de pasar al diseño
- La página tiene un objetivo y una acción principal.
- Cada bloque tiene una etiqueta y un motivo para estar.
- Los bloques siguen el orden que necesita el visitante.
- Los botones y formularios dicen lo que hacen.
- Hay una versión para teléfono con todos los bloques.
- Alguien de fuera del proyecto lo ha visto.
RecuerdaDecide primero los bloques y su orden con cajas grises: un wireframe se cambia más rápido que un diseño terminado.
Si quieres un sitio planeado así, nuestro servicio de diseño web puede hacerlo contigo.
Respuestas rápidas sobre los wireframes web
¿Qué es un wireframe en diseño web?
Es un plano sencillo de una página web que muestra su estructura: los bloques, su orden, la navegación y dónde van los botones y los formularios. Balsamiq lo llama el esqueleto del proyecto, sin colores, fuentes ni acabado visual.
¿Qué diferencia hay entre un wireframe y un mockup?
Balsamiq lo explica así: los wireframes se centran en la estructura y la funcionalidad, y los mockups muestran cómo se verá el diseño final. El wireframe va primero, y el mockup añade colores, tipografía e imágenes sobre esa estructura.
¿Un wireframe debe tener colores?
Al principio, normalmente no. Figma recomienda empezar en escala de grises, con pocas fuentes y cajas en lugar de imágenes, para que la conversación se quede en la estructura. El color y la tipografía llegan después, en un wireframe de alta fidelidad o en el mockup.
¿Con qué herramientas puedo hacer un wireframe?
El lápiz y el papel sirven para bocetos rápidos, y Balsamiq los pone primero en su lista de herramientas. Programas como Balsamiq o Figma ayudan cuando un equipo necesita compartir, guardar y cambiar wireframes, o convertirlos en mockups.
¿Necesito un wireframe para la web de un negocio pequeño?
Ayuda incluso en un sitio de pocas páginas. Un wireframe te deja acordar qué lleva cada página y dónde va la acción principal antes de dedicar tiempo al diseño. Además, los wireframes se hacen rápido y se cambian con facilidad.
Fuentes
Consultadas el 3 de noviembre de 2026, en inglés. Balsamiq, What is a wireframe? A guide for non-designers; Figma, What is wireframing?; Interaction Design Foundation, Wireframes; Nielsen Norman Group, UX Prototypes: Low Fidelity vs. High Fidelity y Wireflows: A UX Deliverable for Workflows and Apps. Nuestro caso: nuestra página de inicio en inglés leída en un navegador a 1,440 y 390 píxeles de ancho, el 3 de noviembre de 2026.