Un wireframe web es una representación esquemática de una pantalla. Muestra la distribución del contenido, las prioridades y las acciones previstas antes de desarrollar el acabado visual. Puede ser un dibujo sencillo o un esquema más detallado; lo importante es saber qué decisiones permite revisar.
No es una promesa de que la web final tendrá cajas grises ni una versión incompleta del diseño para opinar sobre colores. Es una herramienta para comprobar si la página organiza bien la información que necesita el visitante.
Empieza por la tarea de la pantalla
Antes de revisar bloques, escribe qué debería conseguir la persona en esa página. Si se trata de un servicio, quizá necesite entender el alcance, comprobar si encaja con su caso y solicitar una consulta. Esa tarea proporciona un criterio para valorar cada sección.
Lee el esquema de arriba abajo e identifica dónde se responde cada pregunta. Si un bloque aparece muy pronto pero no ayuda a decidir, discute su prioridad. Si falta información imprescindible para actuar, no esperes a la fase visual para incorporarla.
Sustituye el texto vacío por contenido representativo
Un rectángulo que dice «texto» no permite saber si cabrá una explicación compleja. Introduce títulos y fragmentos próximos a los reales, aunque todavía necesiten edición. Haz lo mismo con tarjetas de servicios, preguntas y botones.
Ejemplo ficticio: tres tarjetas parecen equilibradas con títulos de una palabra, pero los servicios reales tienen nombres largos y requieren condiciones distintas. Detectarlo en el wireframe permite ajustar la estructura antes de pulir tipografías y espaciados.
Recorre una acción completa
Imagina que llegas a la página sin conocer el proyecto. Localiza la acción principal y comprueba qué ocurre al seguirla. ¿Abre un formulario, conduce a otra pantalla o inicia una descarga? Si el esquema es estático, esa información debe quedar anotada.
Revisa también los estados que cambian la experiencia: un formulario con errores, una búsqueda sin resultados o una lista todavía vacía. No todas las pantallas requieren todos los estados, pero los que formen parte del recorrido necesitan una decisión.
Da comentarios que indiquen el problema
Un comentario útil relaciona una observación con la tarea del lector. Puedes formularlo así:
- «Aquí todavía no se entiende qué incluye el servicio; necesitamos explicarlo antes del formulario».
- «Este botón dice pedir presupuesto, pero lleva a una reserva de reunión».
- «En móvil, la información para comparar queda separada de las opciones».
Estas observaciones permiten buscar soluciones. «No me convence» puede iniciar una conversación, pero necesita concretarse para orientar una revisión.
Decide qué se aprueba en esta fase
Al cerrar el wireframe, confirma jerarquía, bloques, contenido previsto y comportamiento de las acciones principales. Anota las dudas pendientes y quién las resolverá. Los detalles de color, fotografía y tipografía pueden desarrollarse después sin reabrir constantemente el propósito de la pantalla.
En FEBEN conectamos esta revisión con el diseño web, para que la dirección visual se apoye en una estructura comprensible. Aprobar el esquema significa acordar cómo debe funcionar la página como comunicación, antes de decidir su acabado.