conceptos-diseño-landing-page-1

¿Que hace que un viaje por avión sea en una experiencia agradable? Un fácil despegue, vuelo tranquilo, una impresionante vista desde el aire. Y un aterrizaje suave que te deja con esa sensación de seguridad y comodidad.

Esos minutos finales de llegar a tu destino pueden ser la cereza del pastel, mejorando la comodidad y la emoción del vuelo. O todo lo contrario,si el aterrizaje es forzoso y poco agradable, esos minutos pueden convertirse en un mancha que oscurece todo lo  asombroso y positivo que fue el viaje. En otras palabras, el aterrizaje realmente cumple una función.

Lo mismo ocurre en el diseño web. Para muchos usuarios una bien pensada página de aterrizaje, popularmente conocida también como landing page, consistirá en la experiencia de llegar al destino correcto y comenzar el viaje por toda la página web desde un punto apropiado.

Por ello, presentamos 10 diferentes conceptos de diseño UI, que representan distintos tipos de landing page que reflejan diversos objetivos de negocio, naturalezas de ofertas y estilos visuales que justifican el objeto.

1. Páginas de aterrizaje para la venta de productos orgánicos

conceptos-diseño-landing-page-2

El objetivo de la presente landing page es promover la compra de comida orgánica. Está compuesto por muchos bloques que presentan el nombre de la tienda, los productos y resalta algunos aspectos importantes del servicio, llamadas a la acción y testimonios. El diseñador establece que el propósito es que sea una página informativa pero que no esté recargada de datos, que sea atractiva pero no agresiva. Por tanto, todos esos acentos visuales, todas las imágenes clave de alimentos, seleccionados cuidadosamente para trasmitir el mensaje apropiado al usuario, respaldan el tema básico. Para hacer la experiencia más atractiva y cautivadora, el proceso de desplazamiento de página fue amenizado con animación y se eligieron elementos visuales para apoyar el tema general y proporcionar una percepción visual inmediata a la idea básica.

Asimismo, podemos observar que el diseñador elige párrafos muy breves que brindan al usuario información básica y enlaces que brindan más información, luego de una llamada a la acción. Al mismo tiempo, las palabras clave describen los importantes beneficios como «orgánico», «hecho en casa», «calidad» que están marcados de forma visual de manera que puedan notarse a primera vista. Esta estrategia es acertada pues los usuarios no necesitan pasar mucho tiempo leyendo para conocer el servicio, pero ven la oportunidad de aprender en cualquier momento.

conceptos-diseño-landing-page-3

2. Landing page para una web que brinda servicios para actividades cotidianas

conceptos-diseño-landing-page-3

Este es el concepto de landing page para el sitio web de una agencia que presenta sus servicios. La variedad de servicios que se ofrecen se puede ver reflejado en la variedad de colores que se emplean en la interface. El objetivo del diseñador era hacer una página ligera, fresca y atractiva, creando una atractiva primera impresión  y respaldando una experiencia de usuario positiva con soluciones de diseño web atractivas.

Los toques dinámicos de movimiento añaden mucho a la solución estilística en general, mientras que la buena combinación de tipografías con un balance de contraste de elementos de diseño crean un campo de buena percepción visual y resalta la legibilidad.

conceptos-diseño-landing-page-4

3. Landing page para un museo

conceptos-diseño-landing-page-5

En este ejemplo se presenta una landing page que promueve exhibiciones de arte. La idea detrás de esto es hacer una especie de promoción estética y discreta para el usuario, además de proporcionar mucha información. El balance minimalista y utilidad se mantiene por medio de estilo, color y movilidad.

La presentación minimalista es muy informativa y utiliza con éxito los estudios de seguimiento ocular para aplicar los elementos de diseño más importantes en las zonas de alto uso.

Por otro lado, los colores oscuros están asociados por lo general con la elegancia y el misterio. Por ejemplo, el color negro está asociado a la elegancia, formalidad, prestigio y poder. Eso es, quizás, una de las razones que motivan a las marcas poderosas a construir su presentación visual entorno al esquema de blanco y negro. Jugar con este aspecto de diseño de interface puede brinda un apoyo adicional a otras soluciones de diseño y a la presentación general del producto, algo que podemos observar en el presente concepto de diseño.

4. Lading page para organizaciones de caridad sin fines de lucro

conceptos-diseño-landing-page-6

El ejemplo propuesto muestra el concepto de diseño de una landing page para una organización sin fines de lucro. Este emplea párrafos y elementos visuales de apoyo que permiten comprender la función de la organización. La decisión sobre la cantidad de contenido empleado en la página se basa en investigación y pruebas exhaustivas porque influye en gran medida y de forma directa en las conversiones. Sin embargo, esto no quiere decir que cada landing paga deba contener un mínimo de palabras. Si este presenta un producto o servicio famoso de una compañía  o informa sobre una oferta en especial, algunas veces un texto breve es suficiente para motivar a los usuarios. Sin embargo, si se presenta un producto o servicio desconocido, es importante brindar al usuario más información que los persuada a seguir a una llamada a la acción.

De modo que, en este caso, el contenido se convierte en una herramienta de interacción e información pues el servicio no se concentra en el producto que puede convertirse en el acento visual principal, sino en las actividades que pueden describirse de forma verbal.

conceptos-diseño-landing-page-7

5. Página de aterrizaje para un aplicación original de Mac

conceptos-diseño-landing-page-8

Esta es una landing page para la aplicación original de MAC SwiftBeaver, cuyo público objetivo son los desarrolladores. Como podemos observar, está diseñado de forma minimalista y concentra la atención del usuario en un breve texto sobre la funcionalidad de los productos y una llamada a la acción que permite el acceso a solicitar una beta gratuita.  Aunque la página ofrece otros enlaces importantes, están diseñados de forma que no distraen la atención de los elementos principales que generan conversión.

Elaborar la landing page para el producto fue también una trabajo desafiante de diseño, porque el producto no ofrece mucho material visual para interactuar y atraer al usuario. Por lo tanto, la principal solución de diseño visual se hizo entorno a acentuar los colores, reflejando las soluciones del diseño de interfaz de la aplicación.

Como ves, estos son algunos ejemplos que muestran la diversidad de técnicas y métodos para diseñar una landing page informativa y atractiva. Sin embargo, para retener a los usuarios, un diseño moderno y de aspecto agradable  solo debe abarcar una funcionalidad efectiva y soluciones amigables con el usuario, los cuales se logran según los objetivos del negocio e investigación de usuario. De lo contrario, un diseño bonito funcionará como una página forzada, borrando de forma inmediata todas la vibras positivas y esa es una forma rápida de reducir las tasas de conversión, que son el propósito principal de toda landing page. Prioriza la funcionalidad, el uso, y el valor informativo, piensa más allá de la navegación lógica e intuitiva –y el diseño visual se convertirá en un gran apoyo para un aterrizaje tranquilo y efectivo hacia tu página.

Traducido y adaptado de Tubikstudio.com 

The following two tabs change content below.
CEO de Staff Creativa, Agencia de Diseño Publicitario y Web

Deja una respuesta