Uno de los proyectos habituales en los que trabajamos en Reboot es la creación de landing pages. Una landing page es la carta de presentación de todo producto o servicio, es el lugar donde se expone quiénes somos y qué hacemos y, lo más importante, dirigimos a nuestro usuario hacia el objetivo que buscamos.

Todas las landing pages tienen un objetivo que va desde la captación de información de nuestro potencial usuario (captación de leads, waitlists, etc...), suscripción, apuntarse a un evento, iniciar una prueba gratuita o la compra de un producto.

Cuando diseñamos landing pages debemos tener muy presentes el objetivo que se persigue, pues alrededor de este debemos construir todo lo demás: copywriting, estructura, imágenes y diseño visual. Hoy vamos a repasar 5 elementos imprescindibles que debe tener una buena landing page a través de casos conocidos.

Una buena landing page cuenta una historia de forma simple, con CTA claros, genera continuidad y, todo ello, lo hace "above the fold".

Cuenta una historia

La historia es lo primero que debemos tener antes de diseñar nuestra landing page. Sin una historia cómo seremos capaces de escoger el copywriting adecuado o la estructura correcta. Las buenas landing pages se diseñan alrededor de una historia y nunca al revés.

Cuando no queda más remedio está bien utilizar una plantilla y adaptar nuestra historia a las secciones y estructuras que nos vienen dadas. Pero si tenemos la oportunidad de trabajar con diseñadores y desarrolladores debemos aprovecharlo para que todos los elementos de la web trabajen a favor de la narrativa.

Una buena historia debe ser simple. No tenemos mucho tiempo para capturar la atención de nuestros usuarios, por lo que nuestra historia debe poder ser resumida en un breve título que invite al usuario a continuar descubriendo lo que queremos contar.

La mayoría de landing pages tienen dos objetivos. El objetivo común es contar una historia y el principal es conseguir algo de nuestro usuario: un correo electrónico, una suscripción, una compra, etc... Es muy importante que escojamos únicamente un objetivo principal por landing page, pues de los contrario nuestra historia pierde peso, se hace confusa y el usuario acaba por no saber cuál es el siguiente paso.

Figma

Figma

La landing page de Figma es un gran ejemplo de cómo contar una historia en pocas palabras. Figma sabe que su gran poder reside en su modo multijugador, el ser un producto totalmente cloud que permite a equipos y clientes conectarse para diseñar en tiempo real. Esto se resume de forma brillante en el titular: "Donde los equipos diseñan juntos".

Por otro lado, el objetivo principal de la landing es conseguir que pruebes la herramienta y el CTA que utilizan refuerza esto destacando el elemento gratuito.

Simplicidad

Las buenas landing pages deben ser simples. No hay nada de malo en hacer las cosas simples.  La mayoría de productos y servicios son complejos, pero una landing page no puede permitirse serlo. Tenemos una ventana de atención muy limitada cuando alguien aterriza en nuestro sitio y la complejidad ahuyenta a cualquier curioso.

¿Cómo conseguimos crear landing pages simples? Gran parte del trabajo comienza por la narrativa. De nuevo, contar una historia. Cuando hemos conseguido destilar la esencia de nuestro producto en una historia fácil de entender a la vez que persuasiva, debemos rodearla del resto de elementos.

Uno de los principales elementos que suelen añadirle complejidad a una web son las imágenes o el estilo artístico. Una imagen con mucho detalle genera ruido al resto de la composición. Si no nos queda alternativa, pues tenemos un producto técnico y queremos mostrar cómo funciona, podemos utilizar abstracciones o simplificaciones de la interfaz de tal forma que tan sólo destacamos el elemento importante.

Otros aspectos que contribuyen a mejorar la comprensión de nuestro contenido es limitar el uso de fuentes a 2 y evitar utilizar sans-serif muy similares entre sí. Contar con una buena escala de tamaños y pesos tipográficos, de forma que se puede escanear claramente nuestro contenido y separar lo importante de lo menos importante.

Robinhood

Robinhood

Robinhood es un gran ejemplo de simplicidad. Utilizan un titular de 3 palabras "Inversión para todos" y resumen perfectamente su propuesta de valor justo debajo "Inversión sin comisiones, más las herramientas que necesitas para poner tu dinero a trabajar".

Todo ello lo acompañan de una ilustración donde se muestra la aplicación en funcionamiento (es un GIF que no se aprecia en la captura) y la tarjeta de Robinhood con la que puedes pagar. La composición es simple -al utilizar una ilustración simplifican elementos y reducen el ruido que puede existir en una imagen real- y refuerza su identidad visual.

CTA claros

Los CTA son uno de los elementos más importantes de nuestra landing pues, como su propio nombre indica, detrás de estos se encuentra generalmente el objetivo que perseguimos. "Compra ahora". "Prueba gratis 14 días". "Subscríbete". "Avísame cuando esté listo". El copy de nuestro CTA es clave, por eso lo mejor es evitar CTA genéricos e intentar introducir elementos persuasivos como "gratis", "no requiere tarjeta" o similares.

Tan importante es seleccionar bien el copy como destacar nuestro CTA. Normalmente a nuestro CTA se le asociará un accent color que contraste con el resto de elementos y genere esa llamada a la acción. Debemos ser muy cuidadosos con el uso del accent color y reservarlo únicamente para CTA y otros elementos relevantes como por ejemplo enlaces, pues de lo contrario no estableceremos una jerarquía clara y ningún elemento destacará por encima de otro.

Webflow

Webflow

Webflow es un resumen perfecto de todo lo que hemos comentado. El copy no se limita a invitarnos a empezar a utilizar la herramienta, sino que añaden el "es gratis" para hacerlo más persuasivo.

Por otro lado, limita el uso del accent color al CTA principal de la cabecera y utilizan una versión menos saturada para el que se encuentra en la barra de navegación y así establecer una jerarquía clara entre ellos.

Continuidad

Si nos centramos en la sección "above the fold" o cabecera de nuestra landing page, es decir, la primera sección visible que vemos antes de realizar scroll, es especialmente importante generar sensación de continuidad. Y, por favor, para conseguirlo dejemos de utilizar flechas o iconos que representan la acción de scroll.

Nuestro usuario debe entender que hay más contenido del que se muestra y, aunque esto puede parecer muy obvio, un mal diseño puede generar una desconexión entre la cabecera y el resto de secciones de nuestra landing.

La mejor forma de generar continuidad es a través de las imágenes y elementos que utilizamos en el resto de secciones. Por ejemplo, si nuestro producto es un SaaS, podemos mostrar tan sólo la parte superior de un dashboard y que el resto quede por debajo del área visible. Esto dará a entender al usuario que hay más contenido esperando y que debe hacer scroll para descubrirlo.

Slack

Slack

Slack genera esa sensación de continuidad a través de capturas reales de su producto. En este caso podemos ver cómo parte del chat queda oculto "below the fold" y nos invita a seguir haciendo scroll para descubrirlo.

Y todo esto... en la cabecera

Todo lo que hemos comentado anteriormente -una buena historia, simplicidad, CTA claros y continuidad- debe estar presente en la cabecera, la primera sección que ve un usuario cuando llega a nuestra página. Nuestra cabecera ya debe contar una historia o, al menos, la parte más importante de ella, no podemos permitirnos el lujo de que alguien tenga que leer toda nuestra página para hacerlo.

La cabecera es la sección más importante de nuestra landing page, muchas veces será la única que tendremos la oportunidad de mostrar al usuario. Por ello debe contener todos los ingredientes que hemos ido comentando. Veamos algunas páginas más que son ejemplo de ello.

Notion

Notion

Framer

Framer

Linear

Linear

Si necesitas ayuda para crear una landing page que cuente una historia, genere confianza y convierta, en Reboot nos encantaría conocer tu proyecto.