Gráfica
El plano de tu sitio o aplicación. Define dónde va cada elemento antes de pensar en colores, fotos o código.
Es un esquema visual, simple y en blanco y negro (o grises), que muestra la estructura de una pantalla: qué elementos tiene, dónde se ubican y qué jerarquía tienen.
Piensa en el plano de una casa: te dice dónde van las habitaciones y las puertas, no el color de las paredes ni los muebles. Un wireframe cumple el mismo papel para una página web o una app.
No incluye colores finales, tipografías definitivas ni imágenes reales. Usa cajas, líneas y textos genéricos para que todos se concentren en la estructura y la usabilidad.
Dibujos a mano o cajas muy simples. Rápidos de hacer, ideales para explorar ideas.
Estructura clara con proporciones reales y textos genéricos. El punto de equilibrio más usado.
Textos reales, tamaños exactos y flujos completos. Se acerca al diseño definitivo.
Corregir en un esquema cuesta minutos. Corregir en código cuesta días.
Convierte una idea abstracta en algo que se puede ver, discutir y mejorar.
Diseñadores, programadores y clientes hablan de lo mismo desde el inicio.
Detecta errores de estructura antes de programar o diseñar a detalle.
Permite probar la navegación y el recorrido del usuario con prototipos simples.
Deja claro qué es lo más importante en cada pantalla y qué puede esperar.
Sirve como referencia para construir la página, por ejemplo con HTML y CSS.
Tres wireframes típicos, uno por cada tipo de proyecto.
Cabecera con navegación, imagen principal, tarjetas de contenido y pie de página.
Barra superior, contenido en lista y navegación inferior pensada para el pulgar.
Menú lateral, indicadores clave, gráfica principal y tabla de datos.
Casi todo wireframe web se construye con estas piezas.
| Elemento | Qué representa |
|---|---|
| Cabecera | Logo, menú de navegación y acciones principales como buscar o iniciar sesión. |
| Contenido principal | Título, textos e imágenes que cumplen el objetivo de la página. |
| Llamada a la acción | Botones que guían al usuario, como "Comprar" o "Registrarse". |
| Formularios | Campos para que el usuario escriba datos, junto con su botón de envío. |
| Pie de página | Enlaces secundarios, contacto, redes sociales y derechos de autor. |
Un proceso de seis pasos que funciona para cualquier proyecto.
Responde qué debe lograr la página y quién la va a usar. Todo lo demás depende de esto.
Anota títulos, textos, imágenes, botones y secciones que necesitas, ordenados por importancia.
Dibuja varias versiones rápidas con lápiz. No busques que quede bonito, busca probar ideas.
Pásala a una herramienta de wireframes usando rectángulos, líneas y textos genéricos.
Define cómo se navega de una pantalla a otra y qué pasa al pulsar cada botón.
Muéstralo a usuarios o compañeros, recoge comentarios y ajusta antes de pasar al diseño visual.
Opciones gratuitas para empezar hoy mismo.