Principios de diseño de páginas de aterrizaje

1. Secciones
2. Jerarquía visual
3. Llamadas a la acción y formularios
4. Portada Portada
5. Navegación
6. Color
7. Fuente
8. Imágenes
9. Iconos
10. Animación
11. Estilo general
12. Recapitulación

Ya introdujimos el concepto de secciones en el segundo capítulo, cuando desglosamos la estructura de un sitio web -tu oferta, información sobre el proyecto, los comentarios, el calendario y los bloques de llamada a la acción-, todo lo cual se conoce como secciones en una página de aterrizaje.

Las secciones son útiles porque cada una responde a una pregunta concreta -cuánto cuesta algo, dónde estamos ubicados, por qué somos los mejores-, lo que significa que contienen una idea completamente formada. Esto facilita que la gente perciba la información, ya que has sacado un tema (por ejemplo, "¿Para quién es este curso?"), lo has explicado y has pasado al siguiente. La coherencia y la previsibilidad son dos cosas que le encantan al cerebro humano.

Las secciones de presentación se diferencian de las diapositivas tradicionales en que no están limitadas por la altura de la pantalla. Una sola sección puede ocupar desde varias pantallas hasta una pequeña parte de una sola pantalla.

Aunque los elementos de una sección pueden parecer diferentes, lo importante es mantenerlos unidos por un mismo tema.

Los espacios son necesarios, pero no siempre son suficientes para dividir claramente la página de aterrizaje en diferentes secciones.

Un separador en forma de línea o de borde es otra forma de marcar el principio o el final de una sección.

Para que la página de aterrizaje tenga un aspecto ordenado, le recomendamos que utilice una misma forma de borde en toda la página. El uso de diferentes estilos -zigzags emparejados con líneas divisorias inclinadas, por ejemplo- hará que la página sea difícil de digerir.

Las secciones pueden contener títulos por sí solas o incluir subtítulos. Los encabezamientos definen el ritmo y la estructura de la página y ayudan a los usuarios a identificar el comienzo de una nueva idea.

Por ejemplo, si el primer título "Sobre el curso" tiene 62px, el título de la siguiente sección - "A quién va dirigido el curso"- también debería tener 62px. De este modo, la página tendrá un aspecto ordenado y cada nueva sección (y cada nueva idea) será fácil de leer.

Para que la estructura de la página sea legible no sólo para los humanos, sino también para los robots, utilice la etiqueta H1 para el encabezado de la portada de su página de destino y añada la etiqueta H2 al encabezado de cada sección. Los motores de búsqueda lo interpretarán como una página bien estructurada.

Los encabezados de sección no siempre tienen que ser negros, también pueden ser de color. Se trata de una opción poco frecuente, ya que los encabezados de color son más difíciles de encajar en el estilo general de la página.

Si es necesario resaltar un elemento con color, aplique el mismo principio que aplicamos al tamaño del título: mantenga idéntico el color de todos los títulos de sección para facilitar la lectura de la página.

Hemos observado que las páginas que presentan secciones con columnas colocadas una detrás de otra son difíciles de leer.

Tiene más sentido visual que las secciones vecinas tengan el mismo número de columnas: tres, por ejemplo. Sin embargo, una página así parecerá desequilibrada.

Si no tienes experiencia en diseño web, es mejor que evites por completo el uso de columnas, ya que es bastante difícil hacerlo bien. También puedes alternar entre secciones con columnas y secciones con texto. Por ejemplo, a una columna de texto le pueden seguir tres columnas con iconos, luego una frase clave con una imagen de fondo, seguida de otras tres columnas o una columna de texto, y así sucesivamente.

Al principio hablábamos de una sección compuesta por un encabezamiento y un contenido. Esto es cierto en la mayoría de los casos. Sin embargo, a veces hay secciones que no se ajustan a esa definición.

Una galería de fotos, un texto central o un bloque de texto y una imagen sin encabezamiento son ejemplos de secciones "a medida". Sin embargo, si aún contienen una idea y responden a una pregunta, siguen estando sujetas a los mismos principios, y deben espaciarse igual que el resto de secciones, y resaltarse utilizando un color de fondo o una forma de borde.

Aquí tienes algunos ejemplos de secciones personalizadas:

La jerarquía visual es esencial para eliminar el caos en una página de aterrizaje. "¿Qué se ofrece? ¿Cómo se utiliza? ¿Por qué lo necesito?": estas son las preguntas a las que una persona debe obtener respuesta al instante. Las herramientas visuales le ayudarán a conseguirlo.

Por ejemplo, el encabezamiento principal de una sección es más grande que el encabezamiento dentro de una sección. En este caso, la jerarquía visual ayuda a entender que los títulos pequeños tienen un significado similar, y que el título principal los une bajo un mismo paraguas.

Pero hay que prestar atención al contraste. Los elementos grandes deben ser grandes. Si un encabezamiento de segundo nivel mide 22px en comparación con un encabezamiento de primer nivel de 24px, el resalte visual es demasiado débil, lo que significa que no hay jerarquía. Una diferencia de 1,5-2 veces en el tamaño de la fuente es más fácil de notar e interpretar.

En el contexto de la jerarquía visual, el "brillo" no se refiere a un tono de color, sino al contraste y la cantidad de color en la página en relación con el esquema de color principal.

Una cabecera verde junto con un texto azul y un botón naranja creará un conflicto visual, y los tres elementos acabarán perdiéndose. Este es un ejemplo exagerado, pero deberías pensártelo bien cada vez que quieras añadir otro color.

Si un color contrastado aparece sobre el fondo de un color más general, el elemento se hace más visible, llama la atención y dice: "Soy importante".

Si varios elementos están situados uno al lado del otro, probablemente significa que están unidos por un tema o significado común. Para combinar los elementos en un grupo, tienes que reducir la distancia entre los elementos del interior del grupo y aumentarla desde el exterior.

Veamos algunos ejemplos:

Varios grupos de elementos pueden formar una única composición dentro de una misma sección. Por ejemplo, un título y un subtítulo pueden formar un grupo, mientras que un bloque de texto con una imagen en dos columnas puede formar otro.

Cada grupo puede tener también subgrupos. Los elementos de un subgrupo se reúnen siguiendo el mismo principio: los elementos que están relacionados en significado se colocan más cerca entre sí que de todos los demás elementos y subgrupos.

Puede resaltar un elemento con la misma eficacia utilizando el espacio en blanco que manipulando su tamaño o color.

Los elementos densamente dispuestos son como el cobertizo de tu abuelo: sabes que la llave inglesa está por aquí, en alguna parte, pero es imposible encontrarla, así que te enfadas y pierdes el tiempo buscándola.

Puede utilizar un fondo brillante o un botón que contraste para destacar el bloque entre otras secciones de la página de aterrizaje.

Para animar a alguien a rellenar un formulario, puede especificar lo que ocurrirá después de que haga clic en el botón correspondiente.

"Le llamaremos en una hora para coordinar la entrega", "Le enviaremos un recordatorio 2 horas antes del seminario web", "Le enviaremos el libro electrónico a su correo electrónico", "Solo le enviaremos un boletín educativo una vez cada dos semanas", son ejemplos de mensajes redactados con sencillez y con un toque humano que fomentan la confianza.

La página de aterrizaje es a veces un eslabón intermedio en el embudo de ventas, en el que el formulario actúa como imán de clientes potenciales.

Un lead magnet es el intercambio de un contacto (un correo electrónico o un número de teléfono) por algo valioso, como un libro electrónico, un descuento, un seminario web, una lista de comprobación o datos de investigación. Esto crea el siguiente embudo:

• Conseguir gratis
• Comprar por un precio razonable (adquirir un curso)
• Posventa (consulta personal)

Por ejemplo, alguien se inscribe y obtiene gratis el primer capítulo de un curso en línea, lo que le inspira a comprar el curso completo y, finalmente, a pedir una consulta personal.

Aquí tienes algunos ejemplos de cómo aplicar texto a las fotos anteriores:

Las ilustraciones son una buena alternativa a las fotos de portada, ya que marcan el estilo de la página de aterrizaje y la hacen más interesante.

Puedes encargar ilustraciones personalizadas a un ilustrador o encontrarlas en un banco de fotos.

La disposición óptima en este tipo de portada de página de aterrizaje sería colocar el texto a la izquierda de la ilustración. También se puede añadir un formulario de comentarios o un botón de acción de destino en la cabecera.

Esta opción no es peor que una portada con foto; a veces puede ser incluso mejor. Deja el fondo blanco y enfatiza la tipografía: trabaja la composición, el tamaño y el color de las fuentes.

Puedes utilizar un color monocromo o un degradado como fondo. Con la ayuda de Tilda Colors, puedes copiar colores y degradados o descargarlos en formato PNG con una resolución de 1680px adecuada para imágenes a pantalla completa.

Otra opción es utilizar gráficos abstractos: formas geométricas, ondas, líneas o un patrón. Lo más importante es que el encabezado sea legible sobre el fondo gráfico.

Ya tratamos la redacción del texto de la portada en el segundo capítulo.

En cuanto a la extensión y la forma del texto, hay que recordar que el encabezamiento y el subtítulo de la portada no deben ser prepotentes. Lo ideal sería una frase sencilla en el encabezamiento que explique la esencia de la oferta y una o dos frases en el subtítulo que complementen y abran la oferta. Una o dos líneas para el encabezamiento y dos o tres para el subtítulo deberían ser suficientes.

El menú se utiliza en la portada si la página es larga y necesita navegar entre secciones. El menú tiene aquí una función de ayuda; en la mayoría de los casos, puedes prescindir de él.

Una regla general para cualquier menú es evitar a toda costa la sobrecarga. Esto es aún más relevante para el menú de la página de aterrizaje, ya que debe ayudar al usuario a encontrar información sin distraerle de la acción objetivo.

Un menú se sobrecarga cuando hay demasiados elementos. Por eso puede eliminar con seguridad los que sobran (por ejemplo, los botones de redes sociales), reducir los elementos del menú al mínimo y acortar los nombres a una palabra para cada elemento.

El fondo del menú puede ser transparente, transparente o de color.

Fondo de menú transparente. Este menú aporta ligereza y es también el estilo más versátil y común. Las portadas sin pequeños detalles funcionan mejor con el menú transparente. Los filtros de color también funcionan bien aquí.

Menú semitransparente. Esto le servirá si quiere aumentar la legibilidad del menú sin sobrecargar la primera pantalla.

Menú con fondo de color. Al 100% de opacidad, el color del menú se convierte en una base para el texto, haciéndolo perfectamente legible. Este método tiene dos desventajas: en primer lugar, el menú se hace demasiado notorio y llama la atención, y en segundo lugar, es una herramienta estilística bastante fuerte que no será adecuada para todas las páginas de aterrizaje.

Ordenados por tipo de comportamiento, los menús pueden ser estáticos, fijos o aparecer al desplazarse.

Los menúsestáticos se sitúan en la parte superior de la página (por encima de la portada o superponiéndose a ella), permaneciendo en su sitio y desapareciendo del campo de visión al desplazarse.

Los menús fijos se fijan en la parte superior de la página de destino y permanecen visibles durante el desplazamiento. También puede haber dos menús: uno permanece en la parte superior de la página y el otro aparece al desplazarse. En este caso, el segundo menú suele contener un número de teléfono o un botón de registro para simplificar la llamada a la acción.

Los menús combinados aparecen cuando se utilizan simultáneamente menús estáticos y fijos. El menú estático contiene el logotipo, los elementos del menú y los contactos, mientras que el menú fijo contiene un botón de llamada a la acción.

También puede crear un menú sencillo para la versión de escritorio de su página de destino y hacer un menú hamburguesa con información abreviada o de otro tipo para la versión móvil.

Menú hamburguesa. Normalmente se utiliza en las versiones móviles para que el menú sea más compacto. A veces también se utiliza en la versión de escritorio para que la página sea más concisa.

Un menú en forma de viñetas o puntos fijos en el lateral de la página distrae poco o nada la atención, pero ayuda a los usuarios a navegar. Los puntos indicadores indican al usuario qué parte de la página está viendo: cuando pase el ratón por encima del indicador, verá una sugerencia de texto y, cuando haga clic en él, pasará a la sección correspondiente.

Los indicadores de desplazamiento son una versión ligera de la barra lateral de navegación situada en la parte superior de la pantalla. A medida que la barra de progreso se desplaza de izquierda a derecha, representa cuánto se ha desplazado el usuario por la página.

Un indicador de progreso es un elemento básico de una buena UX. Si haces clic en un enlace y la página no se carga al instante, verás que el proceso ha comenzado, hay una reacción.

El botón de desplazamiento hacia arriba se utiliza en páginas de destino largas (normalmente de 5 pantallas o más). Se trata de un elemento auxiliar que no debería ser demasiado brillante o contrastado para que no entre en conflicto con el botón de acción de destino. Los mejores sangrados del botón desde los lados son de 20-30px.

Al hacer clic en el logotipo se accede al principio de una página o a la página de inicio. Esta acción se ha vuelto bastante habitual.

Cuando un usuario termina de desplazarse, no debería encontrarse con un callejón sin salida. He aquí algunas opciones de navegación para el final de la página:

• Llamada a la acción: Formulario o botón
• Enlaces a material adicional: Recapitulaciones de eventos anteriores, enlaces a otros seminarios web
• Un pie de página con navegación por el sitio web si la landing forma parte de un sitio web de varias páginas. La escala del pie de página no debe interferir ni distraer de la acción de destino.

Colocar un formulario o botón de llamada a la acción al final es una de las cosas con más sentido común que puede hacer al diseñar su página de aterrizaje. En teoría, la página de aterrizaje existe para convertir a los visitantes en compradores o clientes potenciales, y cualquier navegación adicional puede distraer de este propósito.

Por otra parte, si un usuario no tiene suficiente información y no tiene la oportunidad de aprender algo más acerca de su negocio, la página puede ser percibida como un callejón sin salida, lo que significa que hay una posibilidad de que el usuario cierre su página y se mueva al sitio de un competidor.

La regla principal aquí es que no debe haber demasiados colores en la página de aterrizaje, sólo uno o dos. El color de realce no debe ocupar más del 10% del espacio total, ya que simplemente llama la atención sobre los elementos que tienen que ser visibles.

En Tilda, llamamos a esta proporción 90:10 la "regla de la boutique". En las tiendas caras, las cosas nunca están apiñadas en una percha en pasillos estrechos. Al contrario: cada artículo tiene espacio suficiente a su alrededor para que se note.

Las tiendas caras no tienen que demostrar ni explicar por qué tienen precios altos. Confían en su oferta y sus clientes confían en ellos. Sin aspavientos.

Una página de aterrizaje es esencialmente la oferta de un producto o servicio. Cuando la gente suelta su dinero, quiere estar segura de que está pagando por su experiencia o por una calidad excelente. Un uso medido de los colores reforzará su confianza.

El cerebro humano utiliza activamente los estereotipos: Espera que la página de aterrizaje de un salón de belleza sea clara y que la de un salón de tatuajes sea negra. El verde se asocia a los productos frescos, mientras que la tecnología suele vincularse al color azul. Las reglas no están grabadas en piedra, pero simplifican la comunicación, como cualquier otro patrón.

Hay un montón de paletas ya hechas en Internet, pero su desventaja es que ofrecen complejas combinaciones de 3-5 colores que quedarán ridículas en una página de aterrizaje.

Si necesitas ayuda para elegir un tono específico, es más fiable utilizar lo siguiente:

TildaColors es una colección de paletas de colores donde puedes coger un color o un degradado de dos colores y utilizarlo en tus proyectos. Haz clic en tu color favorito para copiar su código en el portapapeles.

También puedes descargar cualquier color o degradado en formato PNG con una resolución de 1680px adecuada para imágenes a pantalla completa.

Material UI Colors es una paleta de colores para material design.

Color Claim es un proyecto del diseñador Tobias Van Schneider, que lleva desde 2012 recopilando combinaciones de colores de éxito. Su colección se compone principalmente de combinaciones de dos colores, que son ideales para el diseño de páginas de destino.

WebGradients es una colección gratuita de 180 degradados lineales y combinaciones de colores. La mayoría de los degradados se componen de dos colores.

Hay un pequeño número de páginas de aterrizaje cuyo objetivo es transmitir una atmósfera de felicidad y alegría, convenciendo a la gente de que se lo va a pasar bien. Algunos ejemplos son los festivales, conciertos y otros eventos. En este caso, la regla de la "boutique" puede dejarse de lado y la selección de colores puede aplicarse según el estado de ánimo que se intente crear utilizando el gusto y la intuición.

Prestar atención al peso de la fuente es esencial a la hora de crear una página de aterrizaje.

El peso de la fuente se refiere a lo gruesos o finos que deben mostrarse los caracteres del texto. Los valores más conocidos son normal y negrita. Algunas fuentes sólo admiten esas dos opciones, pero la mayoría tienen ajustes de grosor adicionales: ligero, normal, medio, semiondulado y negrita.

Las páginas de aterrizaje de un maratón y de un producto cosmético caro tienen tonalidades diferentes, que pueden expresarse con distintas combinaciones de fuentes.

Una combinación básica que se adapta a cualquier proyecto. Normalmente se utiliza si necesita crear una página de aterrizaje sin elementos destacados adicionales.

Una combinación popular que es a la vez sutil y neutra, pero capaz de mostrar empuje y energía. Esta combinación puede funcionar para aterrizajes relacionados con el movimiento y la actividad.

Una combinación tipográfica para páginas de aterrizaje relacionadas con la tecnología o la estética que mantiene un tono moderno y progresista. Requiere mucho espacio en blanco y pequeños resaltes brillantes.

En esta sección se han tratado varios aspectos pequeños y muy prácticos del uso de las fuentes. Si quieres saber más, dirígete a"Cómo elegir la fuente adecuada para un sitio web o un artículo".

Las imágenes son más fáciles de percibir y más rápidas de leer: es mejor poner una foto del producto que una descripción detallada de su aspecto.

He aquí algunos ejemplos de imágenes de aterrizaje:

• Libro: una tirada
• Aplicación: un vídeo o capturas de pantalla de la interfaz
• Recorrido: Lugares de interés a lo largo de la ruta
• Servicio de entrega de alimentos: una caja de comida
• Webinar: retrato del presentador
• Conferencia: una imagen del lugar del evento

Por lo general, la gente desconfía de los sitios web desconocidos, lo cual tiene todo el sentido del mundo, ya que cualquiera puede crear un sitio web, y en Internet hay más que suficientes estafadores. Las fotos son uno de los factores que ayudan a generar confianza. Esto sólo funciona si las imágenes son auténticas y muestran su producto o a personas reales.

Si no puedes hacer las fotos, un banco de fotos puede ayudarte. Encontrar fotos originales es clave para que la página de aterrizaje tenga buen aspecto. El marketing existe desde hace mucho tiempo y hay muchos clichés de imágenes que a la gente le resultan irritantes: Huchas, fotos de gente en lo alto de montañas y apretones de manos entre personas trajeadas.

No es necesario intentar transmitir una idea mediante asociaciones simplistas. Una foto de alguien subiendo una escalera no dice "soy un entrenador de éxito", probablemente sea una mala foto.

Si es la primera vez que organizas un taller y aún no tienes fotos, puedes encontrar imágenes en primer plano de eventos similares en un banco de fotos que te ayudarán a transmitir la atmósfera y la emoción.

Si va a mostrar fotos de su equipo, puede que sea mejor contratar a un fotógrafo para asegurarse de que las imágenes son uniformes y coherentes con el estilo de la página de destino.

También puedes aplicar un filtro de color para que tus fotos parezcan más uniformes. Si tienes un color corporativo, eso también mantendrá la identidad del proyecto.

La forma más fácil de equilibrar distintas fotos es hacerlas en blanco y negro.

Los iconos lineales y finos son más adecuados para páginas con un diseño minimalista y fuentes finas. Si la página tiene encabezados grandes o fuentes en negrita, funcionarán mejor los iconos rellenos o con contornos anchos.

Todos los iconos de una página de aterrizaje deben tener el mismo estilo. Mezclar iconos de líneas con iconos de colores e intercambiar iconos finos y rellenos conduce a la dejadez. Incluso el grosor de las líneas importa: todos deben ser iguales. No todas las personas se darán cuenta de que los iconos proceden de conjuntos diferentes, pero tendrán la sensación de que algo no va bien.

Si utiliza Tilda para crear su página de destino, puede utilizar iconos gratuitos de la colección Tilda Icons integrada en el editor. Abra el bloque de contenido con una imagen, haga clic en el icono de búsqueda y vaya a la pestaña Iconos de Tilda.

Los iconos se dividen en más de 45 categorías por tipo de negocio y se pueden buscar por palabras clave. Los diseñadores crean regularmente nuevos conjuntos de iconos y las categorías se amplían. Si necesitas editar un icono -por ejemplo, cambiando su color- puedes descargarte un conjunto gratis siguiendo este enlace:

Este proyecto ha sido creado por el diseñador Dario Ferrando. Están disponibles gratuitamente 730 iconos de línea divididos en categorías.

Una amplia colección de iconos con una cómoda función de búsqueda. Los archivos pueden descargarse en formato PNG o SVG. Los iconos pueden utilizarse gratuitamente si se menciona al autor.

Iconos exclusivos e ilustraciones en 3D. Disponibles gratuitamente en baja resolución con atribución obligatoria.

El precio medio de un icono personalizado dibujado por un ilustrador profesional es de 10 dólares. Los iconos ya hechos suelen venderse por suscripción -unos 10 dólares al mes- o como parte de un conjunto.

Los iconos están sujetos a las mismas leyes de derechos de autor que las fotos, así que presta mucha atención a las licencias cuando utilices iconos en tu página de aterrizaje: averigua si los iconos son gratuitos o de pago e investiga en qué condiciones pueden utilizarse.

El uso de animaciones debe ser moderado para evitar que la página se convierta en una presentación de PowerPoint de instituto.

He aquí cómo evitar una animación excesiva:

La animación hace la página más atractiva. No tiene otro sentido que el de entretener y hacer la página menos monótona. Si se anima todo, la página volverá a ser monótona, por no decir molesta.

El rendimiento del sitio web es una parte importante a tener en cuenta cuando se utiliza animación. Asegúrese de probar las páginas de destino animadas en ordenadores débiles, ya que no todos los dispositivos son capaces de cargar rápidamente la animación.