Wireframing.
El esqueleto que vende un producto. Si decides bien aquí, el diseño visual es ejecución. Si decides mal, ningún color te salva.
Ordennoesjerarquía.
Un wireframe puede tener todas las cajas alineadas y la rejilla impecable, y aun así no vender nada porque no comunica qué es importante.
Lo que un wireframe NO es.
Si parece arte, lo estás haciendo mal.
El mockup tiene tipo, espaciado fino, estados. El wireframe es anterior.
Es un documento técnico. Se mide.
Tres niveles. Hoy trabajamos en el del medio.
Sesiones rápidas, conceptos iniciales, ideación.
Validar lógica con stakeholders. Estándar profesional. Donde se decide producto.
Aprobación final + sistema de diseño aplicado. Listo para dev.
Lo-Fi se queda corto para cliente. Hi-Fi enturbia con estética. Mid-Fi = conversación pura sobre prioridades.
3 Zonas de Impacto
Un Senior no divide la pantalla. Divide la decisión.
Captura en los primeros 3 segundos.
Dirige al CTA. Cero confusión.
Elimina dudas justo antes de actuar.
Si el usuario hace scroll para entender qué resuelves, has fallado.
Qué hace el producto y por qué le sirve.
Si está logueado: nombre, balance, última acción.
Dónde está y qué hace este producto.
Apps de inversión · Retención = balance + «Invertir». No «Quiénes somos».
Si todo es importante, nada lo es.
Diferenciado de todo lo demás.
Aislamiento visual = peso.
«Empezar mi entrenamiento». No «Continuar».
Test del blur
Si haces un blur total del wireframe y solo se ven formas, ¿se identifica el CTA principal? Si no, el peso está mal.
La objeción encuentra respuesta en el momento exacto del esfuerzo.
Testimonios, reseñas, número de usuarios.
Pago, RGPD, certificaciones.
Devolución, prueba gratis, sin tarjeta.
Colócalo justo debajo del CTA, no al final. La duda y su respuesta tienen que coincidir en el tiempo.
Jerarquía sin color
4 herramientas. Sin color. Sin marca.
Máx. 4 valores
Máx. 3 niveles
Para escaneo, no énfasis
El elemento más aislado gana
El test de los ojos entrecerrados
Mira tu wireframe entrecerrando los ojos.
Distingues bien.
Jerarquía OK.
Manchurrón gris.
Sin jerarquía.
Caos visual.
Demasiado peso a la vez.
Copy real, no Lorem Ipsum
El contenido es la estructura. Lorem Ipsum no testea nada.
Lorem ipsum dolor sit amet.
Entrena en casa sin material. 12 minutos al día.
Continuar · Enviar · Aceptar.
Empezar mi entrenamiento · Reservar mi sesión.
Notificaciones
Tienes 3 mensajes nuevos.
Botón
Empezar mi entrenamiento de 12 minutos.
Pasa todo el copy a una hoja aparte. Si esa hoja explica el producto, has terminado el wireframe.
ConvierteunapantallacríticadelflujoenwireframeMid-Fi.
Elige una pantalla donde se tome una decisión importante: home, checkout, paywall, primera vista del onboarding.
Define las 3 Zonas antes de dibujar.
Retención: qué captura los 3s. Acción: cuál es el CTA. Soporte: qué duda neutralizas.
Diseña en Mid-Fi con las 4 herramientas de jerarquía.
Grises (4 valores) · Tamaño (3 niveles) · Peso · Espacio negativo.
Escribe copy real, no Lorem Ipsum.
CTAs con verbos activos. Títulos con la longitud real. Datos reales.
Aplica el test del blur.
Entrecierra los ojos: ¿distingues 2–3 cosas? ¿se ve el CTA principal? Ajusta hasta pasar.
Próximo capítulo · 2.4