Páginas de Aterrizaje (modo Persuadir)
La página tiene un solo trabajo: lograr que el visitante correcto realice una acción. Todo gana su lugar en función de ese trabajo.
Héroe: abre con lo más característico
Elige el tipo de héroe basándote en el producto, no en la costumbre.
| Tipo de héroe | Úsalo cuando | Constrúyelo como |
|---|---|---|
| Product-led | software, CRM, apps | una pantalla de UI real y legible (HTML, no una imagen borrosa) que muestre el producto haciendo su trabajo principal con datos creíbles |
| Proof-led | servicios locales, oficios, agencias | una foto fuerte del trabajo real + el resultado en palabras + calificación/número de reseñas si es real |
| Promise-led | nueva categoría, marca-led | una declaración tipográfica grande; el tipo mismo es el elemento visual |
| Demo-led | herramientas, juegos, interactivo | la cosa misma, jugable o interactiva sobre el pliegue |
| Offer-led | ecommerce, eventos | la foto del producto/precio/fecha al frente y al centro |
El héroe de "gran titular + degradado + dos botones + fila de estadísticas falsas" es el predeterminado. Úsalo solo si nada de lo anterior encaja.
Lista de verificación del héroe: el titular dice qué es y para quién (menos de 10 palabras); el subtítulo dice el resultado (menos de 25 palabras); un CTA principal que nombre la acción ("Reserva una estimación gratuita", "Inicia tu prueba de 14 días"); uno secundario opcional para los indecisos ("Ver precios"); el elemento visual ocupa el 40-60% del héroe.
Menú de secciones (elige de 5 a 8, varía sus formas)
- Franja de problema → resultado (el antes/después en palabras del cliente)
- Cómo funciona (solo si realmente son pasos; entonces la numeración está bien)
- Exhibición de características: alterna filas de imagen ancha + texto, o una cuadrícula bento con UI real dentro de los mosaicos. Evita tres tarjetas de icono idénticas.
- Prueba social: testimonios reales con nombre, rol/ciudad, foto si está disponible; logotipos solo si son clientes reales
- Precios: 2-3 planes, el recomendado marcado por el diseño, no solo una etiqueta; lista simple de lo que está incluido; alternancia anual si existe
- Área de servicio / horario / mapa para negocios locales
- FAQ que responda objeciones reales (precio, contrato, cronograma, ¿qué pasa si...)
- Banda final de CTA que repite la acción principal
Varía el ritmo: alterna secciones a todo color y contenidas, superficies claras y teñidas, texto denso y con muchas imágenes. No dos secciones adyacentes con el mismo diseño.
Copy
- Palabras del cliente, no del sistema. "Ve cada trabajo para hoy" supera a "Visibilidad operativa unificada".
- Lo específico supera a lo ingenioso. Números solo si son ciertos.
- Mayúscula tipo oración para titulares y botones. Sin signos de exclamación en la UI.
- Mismo nombre para la misma acción en todas partes.
Detalles de conversión
- Encabezado fijo con el CTA principal después de que el héroe se desplace.
- Número de teléfono con función "tocar para llamar" en móvil para negocios locales.
- Formularios: tan pocos campos como el negocio necesite; etiquetas sobre los campos; di qué sucede después del envío.
- Confianza cerca del CTA: garantía, tiempo de respuesta, licencia/seguro (solo si es verdad).
- Peso de la página: imagen del héroe menor de 200 KB (AVIF/WebP), fuentes precargadas, nada bloquea la primera pintura.
Presupuesto de movimiento
Un momento emblemático (la entrada del héroe o la UI del producto animando su acción principal). Todo lo demás está quieto o reacciona al usuario. Consulta la habilidad motion.