Las landing pages (también llamadas páginas de destino) se emplean para dar información sobre aplicaciones nuevas, productos o servicios. En esta páginas se resume el propósito de la aplicación, así como sus beneficios. Usualmente van acompañadas de animaciones, fotografías de gran calidad, videos y textos breves. Es interesante ver cómo se organiza la información en una página de destino, pues usualmente sólo se toma en cuenta los datos más relevantes. De esta manera, puedes entender cómo se discrimina y elige la información, sin mencionar la estructura que suelen tener estas páginas. Ya que las landing pages son bastante comunes en la actualidad hemos seleccionado algunas de nuestras favoritas con el fin de que puedan servirte como material de referencia.
Days App
Este sitio de estilo minimalista usa color blanco como fondo y centra todo su contenido. Es un diseño de una sola página por lo que vemos un pequeño menú de navegación en la parte lateral derecha que nos indica cuántas secciones nos falta por ver.
Posee animaciones sencillas para que el usuario pueda verificar cómo funciona exactamente la aplicación móvil. Al final de la página vemos un botón de llamada a la acción en un color verde que destaca del fondo.
Gogoro
Este sitio, también de estética minimalista, nos saluda con una fotografía del producto y unas coloridas letras que forman parte del fondo, pero que logran destacar pues posee un filtro de gradiente. En la parte superior derecha se encuentra el menú hamburguesa y en la izquierda el logo de la empresa. Es un diseño de una sola página e incluye colores vibrantes como fondo, animaciones sencillas e incluso videos incrustados.
Grovemade
Este sitio hace uso de sliders e imágenes de gran tamaño para sus página de destino. Esta imágenes las coloca como fondo y son bastante efectivas pues podemos ir apreciando los diversos productos que fabrican. El logo de la marca se encuentra en la parte superior izquierda mientras que alineado a la derecha localizamos el menú, ambos en tipografía blanca. El mensaje principal varía según la fotografía, donde se indica el nombre del producto. Las flechas de los sliders y el botón fantasma se mantienen siempre en el mismo lugar.
Kredo
Este elegante sitio presenta todos los beneficios de una aplicación, uno a uno, mientras nos desplazamos hacia abajo por la página. Lo primero que vemos al ingresar es un fotomontaje de la aplicación en uso, estas imágenes se alinean en la parte derecha, mientras que en la izquierda vemos el título, subtítulo y botón de llamada a la acción.
Bajo cada beneficio que se lista se encuentra una imagen que ocupa todo el ancho de la pantalla. No presenta ningún tipo de texto adicional, sólo la imagen de personas usando la aplicación.
Trippeo
Este sitio presenta una animación de carga bastante sencilla: posee un fondo de color azul y los números que indican el porcentaje de carga se ubican en el centro. Cuando el número alcanza el 99% vemos que se pasa a otra pantalla. En ella podemos ver una fotografía de gran tamaño.
En la parte superior izquierda se ubica el logo y un menú hamburguesa. En el centro de la página se ubica un círculo que posee una línea delgada. Este círculo no sólo sirve para encerrar información, sino también para indicar en qué sección de la página estamos. Posee animaciones simples que se hacen efectivas cada vez que bajamos por la página.
PlayWith
Este sitio coloca su logo en el inicio, de fondo tenemos una fotografía que ocupa toda la pantalla y alineado en el lado derecho un fotomontaje de la aplicación en uso. El botón de llamada a la acción es ligeramente más grande que un botón común.
Esta página emplea tipografía sans-serif con un puntaje ligeramente mayor que de costumbre para las zonas donde hay párrafos de texto. Es un diseño de una sola página y cada sección tiene un color, un título y un texto distinto. Algunas secciones poseen animaciones sencillas de modo que vemos como los elementos se van alineando.
Assembly
Este sitio coloca su logo en el centro. Encima de éste vemos el símbolo para reproducir un video, pero sólo el símbolo. Si lo pinchamos el video nos aparece en una ventana modal.
Posee una tipografía sencilla de bastones delgados, pero como no hay muchos elementos en el sitio, logran captar la atención. Todos los elementos se han colocado en el centro, dejando muchos espacios en blanco a los alrededores. La particularidad de esta página es que presenta elementos decorativos que son parte del logo en cada sección en la que estamos, permitiendo así que se refuerce la identidad de marca.
Tile
Este sitio posee una página introductoria donde se haya el menú localizado en la parte superior y el texto que indica brevemente para que sirve el producto. Al bajar podemos ver una fotografía de gran tamaño que ocupa todo el ancho de la pantalla y en el centro se haya el mensaje. Bajo este mensaje tenemos acceso a un enlace que podemos pinchar para que nos expliquen cómo funciona. También podemos seguir desplazándonos hacia abajo para seguir explorando los beneficios del producto. Cada vez que bajamos podemos ver una imagen y en el centro se ubica un texto breve.
El sitio posee animaciones sencillas que hacen que el texto se haga visible cuando bajamos por la página. El menú siempre se encuentra visible en la parte superior de la pantalla. Es en este menú donde encontramos dos botones de llamada a la acción.
Montage
Este sitio tiene efecto parallax scrolling cuando nos desplazamos hacia abajo. La página inicial tiene diversos enlaces en la parte inferior, pero por el color no destacan demasiado. Lo que más resalta es la imagen que se ha colocado en la parte derecha y también el botón de llamada a la acción que se encuentra en el lado opuesto (izquierdo).
Este sitio posee dos botones de llamada a la acción, pero han destacado uno de ellos. Cuando bajamos tenemos acceso a un menú en la parte superior donde los botones se hacen visibles y pueden ser pinchados.
Hace uso de las fotografías, animaciones e ilustraciones sencillas, así como tipografía delgada y espacios en blanco para comunicar su mensaje. Como resultado tenemos un sitio bastante organizado.
Common
Este sitio presenta una fotografía como fondo en su página inicial. En la parte superior izquierda podemos ver el logo y en la parte derecha un pequeño menú de sólo dos elementos (uno de ellos es un botón de llamada a la acción). Alineado en el centro podemos ver el título que resume el propósito de esta comunidad y bajo éste podemos ver un formulario de un solo campo.
Posee parallax scrollin y al bajar podemos ver más imágenes que ocupan todo el ancho de la pantalla. Esta imágenes poseen un texto breve que se ubica en el lado inferior derecho o izquierdo. También, antes de cada fotografía, podemos ver un mensaje que nos indica los beneficios de formar parte de esta comunidad online.
Red Pen
Este sitio posee un como fondo un llamativo color naranja. En el centro se ubica una frase dividida en dos líneas. En la parte superior izquierda podemos ver un pequeño menú y un botón de llamada a la acción. Al bajar, el color que anteriormente se había usado como fondo, se emplea para los títulos y el fondo permanece en blanco. Cada sección posee animaciones sencillas, títulos en colores llamativos y un pequeño párrafo en una fuente de color gris. Al final de la página vemos nuevamente el botón de llamada a la acción y bajo éste se ubican algunos testimonios.
Made in Days
Este sitio emplea ampliamente imágenes de gran tamaño para demostrar las bondades del producto. En la página inicial vemos una foto donde claramente se han suavizado los tonos y en el centro vemos el logo. Al bajar podemos apreciar el efecto parallax scrolling y otras animaciones sencillas que le añaden más interactividad al sitio.
Pixelmator
Este sitio coloca imágenes de gran tamaño como fondo y usa un slider. Podemos cambiar de imagen al pinchar sobre los círculos que se encuentran en la parte inferior de la pantalla. Las fotografías que se han usado son impresionantes y sirven para demostrar la capacidad de la aplicación. En la parte superior izquierda vemos un pequeño menú de tres elementos.
Shadow
Este sitio presenta imágenes que se encuentran centradas. Todo el diseño posee un borde blanco de grosor mediano. En la parte superior se halla el nombre y logo de la comunidad y en la primera fotografía se coloca un título y un formulario sencillo. En la parte lateral derecha vemos unos pequeños círculos que indican el avance entre secciones.
Ya que se ha empleado un borde, todo el diseño se centra en una ventana de menor tamaño, de modo que cada vez que bajamos y apreciamos el efecto parallax scrolling tiene un ambiente distinto a verlo en pantalla completa. Es un truco de diseño sencillo pero efectivo.
