# Diseño de landing pages: estructura para páginas que convierten [Canonical HTML page](https://gradiently.design/es/guide/landing-page-design) Una landing page es un único argumento con un único final. Aquí tienes el orden en que plantear ese argumento, un ejemplo resuelto que puedes copiar y las decisiones de diseño que mantienen a la gente bajando por la página. ## The short version - 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. 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](https://gradiently.design/es/guide/hero-section-design) 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 | Sección | Qué dice la página | | --- | --- | | Cabecera | «Tu primera clase corre de nuestra cuenta». Frase de apoyo: «Clases reducidas para principiantes en Bristol, seis días a la semana». Botón: «Reserva tu clase gratis» | | Problema | «En las clases multitudinarias del gimnasio todo va rápido y nadie revisa tu postura. Cuesta empezar cuando no sabes lo que estás haciendo». | | Cómo funciona | Elige una clase para principiantes. Llega diez minutos antes, las esterillas las ponemos nosotros. Quédate a una charla de cinco minutos sobre lo que te conviene. | | Pruebas | Tres opiniones breves de socios reales con su nombre y su foto, más imágenes del estudio de verdad. | | Oferta | Una clase gratis para alumnos nuevos, en cualquier sesión para principiantes, sin tarjeta. | | Objeciones | «No soy flexible». «¿Qué me pongo?». «¿Hay aparcamiento?». «¿Qué pasa después de la clase gratis?» | | Llamada a la acción final | «Ven a probar una clase». El mismo botón: «Reserva tu clase gratis» | Cada línea responde a una pregunta que de verdad se hace un principiante nervioso. La misma estructura sirve para la revisión gratuita de un dentista o la prueba de un software. ## 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](https://gradiently.design/es/guide/instagram-ad-design), 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. Un anuncio vertical de Instagram de un estudio de yoga que ofrece una primera clase gratis El anuncio de Instagram a 1080×1350. Una cabecera ancha de landing page que repite la misma oferta de primera clase gratis y el mismo fondo que el anuncio 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](https://gradiently.design/es/guide/one-look-every-size) muestra el flujo de trabajo, y [la coherencia de marca](https://gradiently.design/es/guide/brand-consistency) 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](https://gradiently.design/es/guide/60-30-10-rule) 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. - Fondo de la página: #fbf7f2 - Banda de sección: #efe6da - Texto: #2b2a33 - Texto secundario: #6b6670 - Solo botones: #c2410c Una paleta serena para landing pages: dos fondos cálidos que se alternan entre secciones, dos colores de texto y un acento reservado para la llamada a la acción. ## 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](https://gradiently.design/es/guide/website-color-scheme). ## FAQ ### ¿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.