La versión corta
- Una landing page es una página independiente creada para un solo objetivo, como un registro, una reserva o una compra.
- Una estructura fiable es: cabecera, problema, cómo funciona, pruebas, detalles de la oferta, objeciones y una llamada a la acción final.
- La página debe coincidir con el anuncio, la publicación o el correo que envió al visitante, en las palabras y en el estilo.
- Quitar la navegación del sitio y los enlaces sobrantes mantiene la atención en la única acción para la que existe la página.
- Prueba los cambios de uno en uno frente a tus propios números en lugar de fiarte de referencias generales.
En esta página
Un buen diseño de landing page es un objetivo argumentado en orden. A diferencia de la página de inicio, que sirve a todo el mundo, una landing page existe para un visitante que llega desde un sitio concreto para hacer una sola cosa: reservar la clase de prueba, apuntarse a la lista de espera, aprovechar la oferta. La estructura que funciona una y otra vez es una cabecera clara, el problema con las palabras del lector, cómo funciona, pruebas, los detalles de la oferta, respuestas a las objeciones y la misma llamada a la acción al final. El trabajo del diseño es que ese orden se siga sin esfuerzo.
Una página, un objetivo
Escribe el objetivo en una sola frase antes de diseñar nada: «Conseguir que quienes llegan por primera vez desde nuestro anuncio de Instagram reserven una clase de introducción gratis». Así, cada sección tiene una prueba que superar. ¿Ayuda esto a esa persona a dar ese paso? Si no, quítalo o llévalo a la web principal.
Página de inicio
- Sirve a todo tipo de visitantes
- Navegación completa y muchos enlaces
- Varios productos o servicios
- Explica todo el negocio
Landing page
- Sirve a un público que llega de una sola fuente
- Sin navegación, o solo un logo
- Una sola oferta
- Plantea un argumento y pide una vez, y luego otra
Estructura de una landing page, sección a sección
- 1
Cabecera
Titular con la promesa, una frase de apoyo, un botón y una imagen. El diseño de la sección hero trata esta pantalla en detalle.
- 2
El problema
Dos o tres frases que describen la situación en la que está el visitante, con sus palabras. Demuestra que lo entiendes antes de vender.
- 3
Cómo funciona
Tres pasos, cada uno con un título corto y una frase. La gente se compromete con más facilidad cuando puede imaginarse el proceso.
- 4
Pruebas
Opiniones reales con nombres, fotos de trabajos reales, logos de clientes reales o una demo corta. Nunca inventadas.
- 5
La oferta en detalle
Qué reciben exactamente, cuándo y cuánto cuesta o si no cuesta nada. Unas condiciones claras eliminan dudas.
- 6
Objeciones
Unas preguntas frecuentes breves que respondan a los motivos por los que la gente no actúa: tiempo, precio, encaje, cancelación, qué pasa después.
- 7
Llamada a la acción final
Repite la promesa del titular y el mismo botón. Quien lee hasta el final está listo; no le obligues a volver arriba.
No todas las páginas necesitan todas las secciones. Una lista de espera para un lanzamiento puede ser solo una cabecera, tres líneas de cómo funciona y un campo de correo. Una oferta de mucho compromiso, como un curso o una consulta, suele necesitar las siete y más pruebas.
Un ejemplo resuelto: la oferta de bienvenida de un estudio de yoga
Qué dice la página
Qué dice la página
Qué dice la página
Qué dice la página
Qué dice la página
Qué dice la página
Qué dice la página
Haz que la página coincida con el anuncio que los trajo
La mayoría de los visitantes de una landing page llegan desde algo: un anuncio de Instagram, un anuncio de LinkedIn, un correo, un código QR en un folleto. En cuanto aterrizan, comprueban que están en el sitio correcto. Repite en el titular la oferta exacta del anuncio y conserva su estilo: el mismo fondo, los mismos colores y la misma tipografía. Una página que no se parece al anuncio da sensación de engaño, aunque no lo sea.
El anuncio de Instagram a 1080×1350.
La cabecera de la landing page a 1920×1080: mismas palabras, mismo estilo, para que nadie dude de si ha hecho clic en el enlace correcto.
Diseñar las dos piezas desde una misma fuente lo hace automático. En Gradiently, con Pro, un diseño se puede adaptar a todos los tamaños en un solo paso, así que la publicación, la historia, la cabecera del correo y la de la página comparten un Mark y un titular. Un estilo, todos los tamaños muestra el flujo de trabajo, y la coherencia de marca explica por qué importa más allá de una campaña.
Decisiones de diseño que mantienen a la gente haciendo scroll
- Un color de acento para todos los botones, sin usarlo en ningún otro sitio. El ojo aprende dónde hacer clic. La regla 60 30 10 es una buena forma de fijar el equilibrio.
- Espacio generoso entre secciones para que cada una se lea como una sola idea. Las páginas abarrotadas se sienten como un esfuerzo.
- Títulos que se entienden por sí solos. Mucha gente solo lee por encima los títulos; deberían contar toda la historia.
- Fotos reales mejor que de banco de imágenes. Tu sala, tu producto, tu equipo o tus resultados de verdad.
- Formularios cortos. Pide solo lo que necesitas ahora. Es más fácil dar un correo que un número de teléfono.
- Sin menú de navegación, o solo un logo, para que no haya adónde desviarse.
Primero el móvil, después las pruebas
El tráfico que llega desde publicaciones en redes lo hace sobre todo desde el móvil, así que diseña primero la versión de 390 píxeles de ancho. Mantén el titular y el botón en la primera pantalla, haz que los botones midan al menos 44 píxeles de alto y usa un botón fijo solo si no tapa contenido.
Evita
- Cambiar cinco cosas a la vez y adivinar qué funcionó
- Copiar como objetivo una tasa de conversión de un blog
- Ventanas emergentes que aparecen antes de que el visitante haya leído nada
- Un formulario de diez campos para descargar una guía
Haz
- Cambia una cosa, como el titular, y compara
- Mide frente a tu propia versión anterior
- Deja que la gente lea la oferta antes de pedirle nada
- Pide lo mínimo y averigua más después
No existe una buena tasa de conversión universal; depende de la oferta, del precio y del tráfico. Lo que siempre puedes hacer es que la siguiente versión sea más clara que la anterior. Para los colores que hay detrás de todo, consulta las combinaciones de colores para webs.
Preguntas frecuentes
¿Cuál es la mejor estructura para una landing page?
Cabecera, problema, cómo funciona, pruebas, detalles de la oferta, objeciones y una llamada a la acción final. Las ofertas sencillas pueden saltarse secciones; los compromisos mayores las necesitan todas.
¿Una landing page debe tener navegación?
Normalmente no. Quitar el menú mantiene la atención en la única acción para la que existe la página; basta con un logo.
¿Qué longitud debe tener una landing page?
La que haga falta para responder a las preguntas del visitante. Una lista de espera gratuita puede ocupar una pantalla, mientras que un curso de pago suele necesitar una página larga con pruebas detalladas y preguntas frecuentes.
¿Qué diferencia hay entre una landing page y una página de inicio?
La página de inicio sirve a todos los visitantes y enlaza a todas partes. Una landing page sirve a un público que llega de una sola fuente y pide una sola acción.
¿Mi landing page debe parecerse a mi anuncio?
Sí. Repite la oferta del anuncio en el titular y conserva sus colores y su fondo, para que los visitantes sepan al instante que están en el sitio correcto.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil