Cómo diseñar una página de aterrizaje: la guía definitiva

Un diseño de página de aterrizaje exitoso es acerca de la transformación, convirtiendo a los observadores curiosos en compradores confirmados. Pero cómo funciona una página de aterrizaje no es un truco de magia: la estrategia digital y el diseño visual se unen para crear una presentación convincente del producto. Cuando se hace bien, un comprador de una sola vez puede incluso cambiar de nuevo en un cliente repetido.

El diseño de la página de aterrizaje no es un truco de magia: se necesita tanto una estrategia digital como un diseño visual. Por OrangeCrush.

Aunque las páginas de aterrizaje bien diseñadas tienen muchas más probabilidades de generar compras, están muy infravaloradas, ya que el 44% de las empresas dirigen el tráfico a su página de inicio en lugar de a una página de aterrizaje específica. Se necesita tanta publicidad, SEO y recursos generales de marketing para generar interés por un producto que las empresas no pueden permitirse fallar en el último paso. Pero por mucho potencial de ingresos que tengan las páginas de aterrizaje, son tan efectivas como su diseño.

Para asegurarnos de que tu diseño se adhiere al aterrizaje, vamos a cubrir cómo funcionan las páginas de aterrizaje, los componentes de una página de aterrizaje y consejos para diseñar una gran página de aterrizaje. Aunque te sientas inseguro al entrar en el diseño de una página de destino, te ayudaremos a encontrar tu sitio.

Cómo funciona el diseño de la página de aterrizaje y por qué es importante.

Una página de destino, a veces llamada página de producto, está diseñada para comercializar un producto/servicio específico o conseguir que el espectador realice una acción concreta. A menudo es el lugar al que se dirigen los usuarios cuando hacen clic en un enlace promocional o cuando buscan productos en Google.

Cómo diseñar una página de aterrizaje: la guía definitivaLas páginas de aterrizaje están diseñadas para comercializar productos específicos. Diseño de 2ché.

El sitio web de una empresa actúa como un centro de todos sus productos y servicios, además de la información general de la empresa. Aunque las páginas de destino son parte del sitio web de la empresa, su objetivo es la persuasión y las ventas inmediatas, y lo logran a través de la especificidad. Una página de aterrizaje se centra en un producto, la copia se centra en la descripción y venta de ese producto y el diseño se centra en hacer que esa copia sea legible, el producto presentable y atrae al espectador. Como tal, las páginas de destino (especialmente las páginas de destino múltiples) son mucho más eficaces para generar clientes potenciales que la página de inicio del sitio web de la empresa.

Debido a que las páginas de destino son herramientas de marketing, el éxito de su diseño se mide a menudo en números: los de la conversión y el tráfico. La conversión es la cantidad de visitantes de la página que compran el producto (ellos se convierten de no compradores a compradores). Por muy impresionante que sea visualmente una página de aterrizaje, si la tasa de conversión es baja (alrededor de un 2% se considera media), su diseño no está cumpliendo su objetivo final.

Cómo diseñar una página de aterrizaje: la guía definitivaLas páginas de aterrizaje se centran en conseguir que los usuarios realicen una acción específica. Diseñado por FaTiH™.

El tráfico incluye información sobre quiénes visitan su página, incluyendo el número total de visitantes y cuánto tiempo permanecen. Cuando los visitantes dejan una página sin comprar, se dice que han «rebotado» en ella. Aunque las métricas de tráfico pueden no ser tan importantes como la conversión (una página de destino de alto tráfico con una baja tasa de rebote no sirve de mucho si nadie está comprando), la cantidad de personas que pasan por toda su página de destino puede darle una idea de lo atractivo que es su diseño. La buena noticia es que los espectadores que permanecen en una página más de diez segundos son significativamente más propensos a leer a través de toda la página. Un gran diseño combinado con información clara y convincente es su mejor activo para mantener su atención a través de esta ventana crítica.

¿Buscando inspiración para las páginas de aterrizaje? Echa un vistazo a este artículo lleno de ideas para el diseño de páginas de aterrizaje.

La anatomía de un diseño de página de aterrizaje

No hay una sola manera de diseñar una página de aterrizaje. Después de todo, lo más importante es que la página de destino informe y persuada a los espectadores. Dicho esto, años de diseño de páginas de aterrizaje han creado convenciones a las que los usuarios están acostumbrados, y éstas pueden actuar como cimientos sobre los que construir. Lo siguiente es un desglose de los elementos más comunes del diseño de una página de aterrizaje.

Cabecera

El encabezado es la primera sección de una página de aterrizaje, un espacio rectangular que suele ocupar la mayor parte de la pantalla de la página inicial. Aunque su tamaño puede variar, normalmente contiene estos componentes:

Cómo diseñar una página de aterrizaje: la guía definitivaEl encabezado se centra en captar la atención del usuario, introduciendo y lanzando sucintamente el producto. Diseñado por thecreatv.

  • Branding : El logo de la compañía y el logo del producto (si es aplicable).
  • Imagen del héroe : La principal y más convincente imagen asociada al producto, generalmente en forma de bandera. Puede ser del propio producto o de una escena ilustrada o fotografiada que capte la experiencia de utilizar el producto.
  • Titular : La copia que acompaña a la imagen del héroe, haciendo un breve lanzamiento.
  • Subtítulo : Identifica el producto y ofrece un resumen más detallado de sus beneficios (denominado proposición de valor)
  • Llamada a la acción : También conocido como CTA, este es el botón (y copia insertada, «¡Comprar ahora!») que los usuarios hacen clic para ser llevados al flujo de compra. Los CTA son importantes, pero ten cuidado de no usarlos en exceso, ya que pueden desordenar la página y parecer difíciles de vender. Considere en cambio una barra fija que mantenga el CTA en la parte superior de la pantalla mientras los usuarios se desplazan. (Nota: Los CTA pueden tener otros propósitos, como conseguir suscriptores o descargas, pero por simplicidad, nos referiremos en gran medida a la compra a lo largo de este artículo).

Cómo diseñar una página de aterrizaje: la guía definitivaEl encabezado debe incluir imágenes y titulares convincentes para cautivar a los espectadores. Diseño de Janki14.

Un elemento común del diseño del encabezado que quieres minimizar siempre que sea posible es la navegación. Aunque la mayoría de las páginas web incluyen un menú de navegación, una página de aterrizaje no es una página web «normal». Está diseñada para mantener a los espectadores en la página hasta que estén listos para comprar, mientras que una barra de navegación con muchas opciones les anima a viajar a otros lugares.

Contenido

La sección de contenido es el cuerpo principal de su página de aterrizaje. Mientras que el encabezado tiene como objetivo introducir el producto y captar la atención del usuario, el cuerpo debe centrarse en detallar la proposición de valor y construir un argumento convincente para la conversión. El contenido de una página de aterrizaje suele incluir:

Cómo diseñar una página de aterrizaje: la guía definitivaLos gráficos de apoyo y las especificaciones del producto ayudan a construir la sección de contenido de la página de aterrizaje. Diseño completo por Prismonline ????

  • Gráficos de apoyo : Imágenes secundarias del producto (de otros ángulos o de clientes que utilizan el producto), iconos que simplifican las viñetas y los colores o formas abstractas que guían los ojos del espectador a lo largo de la página.
  • Especificaciones del producto : Copia que desglosa cómo funciona el producto en pasos claros. Los enlaces que amplían cada uno de estos pasos (es decir, «Más información») pueden ser útiles para resolver dudas, pero una vez más, ten cuidado de no alejar a los usuarios de la página de destino.
  • Comparación de beneficios : Se trata de saber cómo el producto mejora la vida de los clientes, a veces comparándolo con los de los competidores o identificando y resolviendo los puntos dolorosos del consumidor.
  • Validación de los pares : Valoraciones de clientes anteriores, reseñas y/o testimonios, todos los cuales construyen la confianza del espectador en el producto a través de referencias sociales positivas.

Pie de página

El pie de página es el final del asfalto para su página de aterrizaje, donde los espectadores tendrán que tomar su decisión final. Normalmente incluye lo siguiente:

Cómo diseñar una página de aterrizaje: la guía definitivaEl pie de página contiene información de cierre, como detalles de contacto y legales. Diseño de Adam Muflihun.

  • Enlaces a otras páginas : Es posible que desees enlazar con otras páginas relevantes de tu sitio, como tu página de preguntas frecuentes.
  • Enlaces de medios sociales : Esta puede ser una inclusión controvertida (como se mencionó anteriormente, no se debe alentar a los usuarios a realizar acciones que no involucren a la CTA) pero puede mejorar el tráfico para proporcionar enlaces para que los usuarios compartan la página de destino con sus seguidores en los medios sociales.
  • Información de contacto : Un número de teléfono o una dirección de correo electrónico da a los clientes un lugar donde acudir si tienen más preguntas.
  • Información legal : Derechos de autor de la página web y del producto junto con otras disposiciones legales. En general, está contenido dentro de una barra oscura en la parte inferior de la página para separarlo del resto del contenido.

6 consejos para el diseño de una página de aterrizaje

Una cosa es saber los componentes y objetivos comunes de una página de aterrizaje, pero ¿cómo se traducen en principios de diseño visual? Aunque el aspecto de una página de aterrizaje varía según el diseñador y la marca, a continuación se ofrecen pautas y consejos generales para un diseño eficaz de la página de aterrizaje.

1. Adherirse al minimalismo

El minimalismo se refiere a la restricción de los elementos de diseño de su página (color, tipografía, imágenes, etc.) a las necesidades básicas. A medida que diseñas, cuestiona cada una de tus decisiones. Si un elemento de diseño no contribuye a la comprensión del producto por parte del usuario o al argumento de compra, deshazte de él.

Cómo diseñar una página de aterrizaje: la guía definitivaEste diseño utiliza unos pocos elementos por sección (algunas copias, una imagen y botones CTA) con mucho espacio entre ellos para simplificar el enfoque de la página de aterrizaje. También utiliza bloques de color sólido para que los bordes de las secciones sean fáciles de identificar. Diseño completo de Skalak.

Hay dos razones principales por las que esto es importante. En primer lugar, es una buena práctica asumir que, aunque hayan elegido visitar la página, los usuarios sólo sienten una curiosidad marginal sobre el producto, y cada distracción corre el riesgo de perder su ya vacilante atención. Alternativamente, dar espacio a la copia para respirar con mucho espacio en blanco enfatiza la información y hace que el texto sea menos intimidante.

Cómo diseñar una página de aterrizaje: la guía definitivaEste diseño utiliza una alineación central y muchos espacios en blanco para crear una sensación minimalista. Diseño de RAZS.

En segundo lugar, más elementos gráficos a menudo significan tiempos de carga más largos. Dado que la tasa de rebote aumenta exponencialmente con cada segundo que una página tarda en cargarse y los motores de búsqueda incluso penalizan las páginas lentas, su página de destino debería priorizar la carga rápida sobre los gráficos llamativos.

2. Aprovecha «el pliegue»

Aunque un enfoque de «menos es más» podría tentarle a pensar que las páginas cortas sin desplazamiento son mejores, las páginas de destino más largas tienden a ser más eficaces para retener a los espectadores. Una página más larga crea una oportunidad para aumentar el espacio entre los elementos, mientras que una página corta podría hacer que el mismo diseño se sienta apretado y desordenado. Y el desplazamiento es un pequeño toque que hace que las páginas se sientan más interactivas que, por ejemplo, una valla publicitaria en tu cara podría.

Cómo diseñar una página de aterrizaje: la guía definitivaComo las criaturas marinas submarinas que garantiza a los buceadores, los gráficos de esta página de aterrizaje están recortados en el pliegue para atraer a los usuarios a sumergirse más profundamente. Diseño de set4net.

La mejor manera de aprovechar el desplazamiento es diseñar alrededor de lo que se conoce como «el pliegue». Esta es la línea en la que una página web se corta debido a la resolución de la pantalla, obligando al usuario a desplazarse hacia abajo para revelar lo que hay debajo. Aunque los tamaños físicos de la pantalla varían, la mayoría de las resoluciones por encima del pliegue son de 1000 x 600px. Al tener intrigantes gráficos semiocultos o un vistazo de copia justo sobre el pliegue, puede tentar al usuario a desplazarse hacia abajo e interactuar aún más con su página.

3. Optimizar para la lectura de patrones

Los patrones de lectura describen las formas comunes en que los usuarios escanean las páginas web (basadas en investigaciones de seguimiento ocular), y los diseñadores pueden utilizar la alineación y el espaciado para organizar el texto para facilitarlo. Debido a que la mayoría de los usuarios escanean las páginas web antes de comprometerse a leerlas (con un 79% que nunca pasa de la fase de escaneo), es de su interés optimizar su diseño para el escaneo. Divida la copia y los gráficos de manera que las líneas de texto sean fáciles de leer a distancia, pero que también guíe sutilmente a los lectores a lo largo de la página y hacia el CTA.

Cómo diseñar una página de aterrizaje: la guía definitivaLa disposición de las alineaciones en un patrón Z ayuda a los usuarios a escanear rápidamente. Diseño de iva.

Estos son los dos patrones de lectura más comunes que el diseño de la página de aterrizaje debe tener en cuenta:

  • Patrón Z : Los usuarios trazan una «Z» invisible con sus ojos mientras escanean de izquierda a derecha. Esto es útil para diseños de imágenes pesadas y puede hacer que los diseños de página se sientan más dinámicos al dispersar elementos en un zigzag y hacer que los usuarios dirijan sus ojos rápidamente de un lado a otro.
  • Patrón F : Los usuarios trazan una «F» invisible con sus ojos mientras escanean de izquierda a derecha. Esto tiende a ser más útil para las páginas con mucho texto ya que la forma es más propicia para la lectura línea por línea.

4. Diseño para la interacción

Los elementos interactivos son uno de los mayores activos que la web ofrece a los diseñadores sobre los productos impresos. Los diseñadores de páginas de aterrizaje pueden utilizar la interacción para invitar a los usuarios a participar en lugar de leer pasivamente los materiales de marketing, lo que puede hacer que la experiencia se sienta más como un juego que como un anuncio.

Cómo diseñar una página de aterrizaje: la guía definitivaLas animaciones que se activan al desplazarse pueden hacer que las páginas de destino se sientan vivas e interactivas. Diseño de Adam Muflihun.

El desplazamiento estándar es una forma obvia de interacción, y aunque no se puede descartar por sí solo, los diseñadores pueden aumentarlo con animaciones como las transiciones de desplazamiento vertical u horizontal. Las animaciones con el cursor del ratón pueden hacer que la página cobre vida bajo el cursor del usuario, con gráficos que se mueven, se desvanecen o cambian de color. Si está vendiendo un producto físico, permitir a los usuarios rotar un renderizado 3D del mismo puede invitarles a probarlo virtualmente.

El botón CTA es su forma de interacción más importante, así que hacer clic en él debería ser positivo y satisfactorio. Esto se puede lograr creando una fisicalidad animada a medida que el usuario hace clic en él. Aunque estas animaciones deben ser sutiles para evitar la distracción y la carga prolongada, contribuirán en gran medida a mantener a los usuarios entretenidos y comprometidos.

5. Diseñar esquemas de páginas de aterrizaje compartidas

Si su empresa produce varios productos o servicios diferentes, haga páginas de destino separadas para maximizar la conversión de cada uno de ellos. Pero cuantas más páginas de destino cree, más difícil puede ser escalar el proceso de diseño. ¿La forma de mitigar esto? Aprovechar los mismos diseños.

Cómo diseñar una página de aterrizaje: la guía definitivaUna segunda versión de una página de aterrizaje con un esquema de diseño similar. Diseño de eeeh_aarrh. Cómo diseñar una página de aterrizaje: la guía definitivaUna versión de una página de aterrizaje puede establecer el estilo visual de otras. Diseño de eeeh_aarrh.

Aunque las páginas de destino deben ser adaptadas para cada producto, también son parte de su marca. Mantener la coherencia entre ellas es importante para crear una firma visual reconocible (que ayude a los usuarios a confiar en su marca), pero también hace que sea más factible diseñar y presupuestar varias páginas de destino.

Comienza con una página de aterrizaje y comprueba rigurosamente su rendimiento (más sobre eso en la siguiente sección). Una vez que tenga un diseño que funcione, use su esquema de diseño como un plano para el resto de sus páginas de destino. Diferentes productos pueden tener diferentes audiencias, así que asegúrese de seguir probando cada una de estas páginas y de diferenciar su diseño si es necesario.

6. Pruebe cada elemento de diseño

La desafortunada verdad es que a pesar de seguir estos consejos, su página de aterrizaje puede no convertirse de la manera que usted espera. El diseño de la página de aterrizaje se reduce a una ciencia, donde los hechos y las cifras tienen prioridad sobre las preferencias estéticas. La variable clave en su ecuación de diseño es el público objetivo. Cada público es único, y la única forma segura de saber si el diseño de su página de aterrizaje está resonando con ellos es probar y ajustar sus diseños en consecuencia.

Cómo diseñar una página de aterrizaje: la guía definitivaPrueba múltiples versiones de cada elemento de una página de aterrizaje hasta que encuentres un diseño que funcione. Diseño de Ian Douglas.

Las pruebas divididas, a veces llamadas pruebas A/B, en las que se prueban dos versiones diferentes de un diseño en dos grupos de clientes distintos, son una forma común en que los diseñadores y comercializadores deciden el mejor resultado. Utilice este método para probar cada elemento de su página web, desde el encabezado hasta la copia del anuncio, pasando por las imágenes y la forma de los botones. De esta manera, puede estar seguro de que el diseño de su página de aterrizaje no sólo se ve bien, sino que sus usuarios están de acuerdo.

Es hora de un diseño de la página de aterrizaje que despega

Al comenzar el diseño de la página de aterrizaje, hay que asumir que los espectadores buscan cualquier razón para rebotar, y que depende de su diseño mantenerlos en tierra.

Aunque hay muchos factores que pueden contribuir a una alta tasa de rebote -descripciones poco claras, precios excesivos o incluso un producto poco convincente- el buen diseño es uno de los mejores factores para reducirla. Si bien esta guía tiene como objetivo darle un lugar para comenzar con el diseño de su página de aterrizaje, la forma más confiable de obtener un gran diseño de página de aterrizaje es trabajar con un diseñador profesional.

¿Quieres saber más sobre el diseño web? Aquí hay un artículo paso a paso sobre cómo crear un sitio web de principio a fin.

Consigue un diseño de página de aterrizaje que alce el vuelo!
Nuestros talentosos diseñadores pueden ayudarle a crear la página de destino ideal para su producto.

Consigue una página de aterrizaje

Comments are closed.