15 grandes diseños de páginas de destino

El diseño de página de destino correcto puede hacer o deshacer un sitio web, ya que esto es lo primero que verán sus visitantes. Si te equivocas, la mayoría de la gente no se quedará.

Los diseños de la página de destino deben transmitir claramente el punto de venta único (PVU) del producto o servicio y centrarse en una llamada a la acción (CTA), como lograr que el visitante registre sus datos o realice una compra. Cualquiera sea el objetivo, depende del diseño de la página canalizar al usuario hacia él, ya sea mediante el uso de espacios en blanco, colores contrastantes o señales direccionales más explícitas. (Y teniendo el mejores herramientas de diseño web a mano te ayudará a lograrlo).

Encabezados y subencabezados claros y concisos y viñetas impactantes y fáciles de escanear están a la orden del día. La página de destino debe tener una marca destacada, a menudo incorporar una imagen de héroe para comunicar el producto o servicio de un vistazo, y debe ir directamente al grano para evitar que la atención de los usuarios se desvíe.



Con todo eso en mente, hemos reunido algunos ejemplos particularmente efectivos de diseño de páginas de destino de toda la web.

¿Busca más inspiración en el diseño? Eche un vistazo a nuestra selección de mejores páginas de error 404 .

01. Ángulo2

(Crédito de la imagen: Angle2)

Ángulo2 es una agencia de diseño digital ucraniana, con un equipo que cree firmemente en el poder de la marca. Aparentemente, nada los entusiasma más que crear experiencias únicas y personalizadas que 'exudan el ADN de su marca' mientras empujan el sobre de la interfaz de usuario.

Este nuevo hogar en línea para sus servicios ciertamente respalda la afirmación, presentando no solo algunos trabajos estelares sino también dos efectos asombrosos. Al abrirnos a algunas fuentes enormes de Montserrat empapadas en # 2AF8EB, o turquesa para los humanos, obtenemos un ejercicio tipográfico que vale la pena saborear. El truco se convierte en una característica en todo momento y transmite el sentimiento 'angular' con una magnífica ilusión de texto inclinado.

Básicamente, esto usa elementos de izquierda y derecha para formar una división 50/50 en el medio de la ventana gráfica. A partir de aquí, una serie de líneas de texto inclinadas envueltas enLas etiquetas tienen funciones de translate3d CSS aplicadas y animadas con TweenMax al pasar el mouse. Al aplicar colores contrastantes a cada lado, logra una estética de plegado de 45 grados que define el diseño general.

Inyectar el color de acento azul vivo en una paleta en gran parte en blanco y negro también muestra una ejecución de buen gusto, con más diversión reservada para la sección 'El equipo' de retratos de personas sonrientes. Aquí, mientras hace la transición entre cada fotografía, verá un fabuloso filtro fragmentado que funciona de maravilla.

02. MADCLEM

Diseño de página de destino - MADCLEM

El sitio de Clément Chenebault es divertido y fluido

Desde el inicio de la web, los desarrolladores y diseñadores han empujado y empujado hasta los límites externos de lo que es posible, buscando hacer algo nuevo o interesante y haciendo retroceder las expectativas sobre lo que es un sitio web y cómo funciona. Esta experimentación de espíritu libre es un sello distintivo de la extraña y salvaje web.

Sitio de la cartera de Clément Chenebault, MADCLEM , sigue esa tradición histórica de traspasar los límites, convirtiendo una simple cuadrícula de cuadrados coloridos en una masa fluida y maleable de gotas líquidas. Todo el sitio se dobla y se hincha con cada movimiento que haces, expandiéndose y contrayéndose para mostrar pequeños destellos de piezas de portafolio a medida que te abres camino a través de la masa gelatinosa. El sitio es una isla divertida y ondulada entre un mar a menudo monótono de carteras de diseñadores y desarrolladores con el mismo aspecto.

03. IBM Plex

Diseño de página de destino - IBM Plex

El paginador único para Plex de IBM está diseñado para mostrar la nueva fuente con el mejor efecto

IBM lanzó recientemente su propia fuente personalizada, IBM Plex ; esta es la primera actualización de su tipografía corporativa desde 1956, por lo que es un gran problema. Para ayudar a presentar el tipo de letra al mundo, IBM le pidió al estudio XXIX que diseñara y construyera un sitio web para mostrarlo. La idea detrás del diseño era utilizar imágenes, animación y fotografía para contar la historia de Plex mientras mostraba la fuente de formas emocionantes.

Lo bueno es que gran parte del sitio sirve como una forma de probar la fuente y explorar los múltiples estilos disponibles para usar. De modo que realmente puede verlo en contexto antes de decidir comenzar a usarlo en proyectos. El sitio es definitivamente uno para diseñadores gráficos y recuerda algo a una página de portafolio. Especialmente porque, a pesar de la densa información que se muestra, puede desplazarse continuamente por las diferentes secciones, ya que es recibido por una ingeniosa animación activada por desplazamiento.

04. vaquero

Diseño de página de destino - Cowboy

¡Móntelos! El sitio de Cowboy mantiene su atención en lo que importa: las bicicletas

Vaquero es una nueva generación de bicicletas eléctricas, dirigida a los habitantes de las ciudades de EE. UU. Como resultado, su sitio web tenía que ser elegante para comunicar el valor de un producto que busca revolucionar un mercado conocido por producir bicicletas poco atractivas y torpes.

Creado por Ueno, el sitio utiliza tipografía atrevida, colores fuertes, excelente fotografía y está muy bien construido, ofreciendo una experiencia de primera clase a los usuarios. La bicicleta en sí ocupa un lugar central y llama la atención del usuario de inmediato.

Las transiciones y la ampliación de las características de la bicicleta, a medida que el usuario se desplaza hacia abajo, se mantienen sutiles para que la bicicleta permanezca en el centro. El enfoque en el contenido y no en la ingeniería excesiva de la experiencia también significa que el sitio se carga rápidamente en todos los dispositivos y es muy receptivo. La aplicación para la bicicleta tiene su propia página y los paralaje entre las funciones y los datos de rendimiento ofrecidos revelan la naturaleza conectada del producto y el paralaje dentro de los límites del dispositivo maravillosamente.

05. Amantes de la interfaz

Diseño de página de destino - Interface Lovers

La página de inicio de Interface Lovers mantiene las cosas sencillas y limpias

Diseñar una página de destino para un sitio dedicado a ' amantes de la interfaz 'no es poca cosa, pero Timothy Achumba, un diseñador de Facebook, lo ha clavado aquí. El sitio tiene como objetivo inspirar a la gente, proporcionar consejos prácticos sobre el oficio de Diseño de interfaz de usuario y celebrar las experiencias únicas de diferentes diseñadores.

El diseño se centra firmemente en el contenido y utiliza un diseño equilibrado inspirado en el primer amor de Achumba: el estampado. “El diseño para Interface Lovers, basado en una simple cuadrícula de tres columnas tomada del diseño de un periódico, es sencillo y limpio”, dice. La hermosa fotografía de retratos atrae a los visitantes y enfatiza el interés del sitio en historias individuales.

Para construir el sitio, el desarrollador Iheanyi Ekechukwu aprovechó Tachyons, un marco CSS funcional que permite un control granular sobre el diseño. El resultado es un diseño precioso y minimalista, sin campanas ni silbidos que se interpongan en el camino.

06. Fuentes de Google

Diseño de página de destino - Google Fonts

Google te dirige directamente a las fuentes sin ningún problema

Lanzadas originalmente en 2010, las fuentes de Google ahora se ven en la web más de 15 mil millones de veces al día, en más de 135 idiomas en todo el mundo. los Fuentes de Google el sitio es limpio y completamente receptivo, usando Diseño de materiales por su rejilla y estilo.

En su publicación de blog Sobre el proyecto, el diseñador Yuin Chien explica que 'al desarrollar la capacidad de jugar con combinaciones de escalas, colores y fuentes, invitamos a todos a descubrir y utilizar sin problemas los tipos de letra en sus proyectos'. Y ella tiene razón; la interfaz es atractiva y hermosa. También es intuitivo y divertido de explorar.

Fundamentalmente, no te obliga a saltar por el aro para llegar a las fuentes; están allí en la parte superior de la página de destino, listos para que juegues. Puede escribir directamente en los campos de texto de la página para probarlos. Y si está abrumado por la elección, Google hace que sea fácil reducir las cosas con casillas de verificación para categorías de fuentes y controles deslizantes útiles para varios estilos, grosor, inclinación y ancho.

07. Revisión de tecnología del MIT

Diseño de página de destino - MIT Technology Review

MIT Tech Review lo mantiene simple

Muchos sitios hacen todo lo posible para atraer esas páginas vistas con trucos sofisticados, es un alivio encontrar un sitio que mantenga las cosas agradables y simples. Revisión de tecnología del MIT , publicado por primera vez a fines del siglo XVIII, tiene una herencia larga y orgullosa, y su sitio ha sido diseñado para exhibir arte excelente y ser un placer leerlo.

La página de inicio es un placer para la vista, comenzando con una historia de portada audaz, tres historias secundarias y una lista resumida de las principales historias del día llamada 'La descarga'. Esto permite a los visitantes acceder rápidamente a lo que importa de una manera sensata.

Una gran CTA de suscripción roja en la parte superior derecha también llama la atención de inmediato, canalizando a los visitantes a las opciones del sitio web de pago sin impedir que disfruten del contenido gratuito disponible.

08. Resn

Diseño de página de destino - Resn

La misteriosa 'gota' rompe la mayoría de las reglas del diseño de página de destino convencional

Ahora veamos una página que ignora la mayoría de las reglas del diseño de la página de destino, pero que tiene éxito de todos modos. Nunca uno que se alinee y use un patrón de interfaz de usuario estándar, agencia de diseño Resn ha creado una página de destino centrada en 'The Drop', un polígono enigmático y reluciente en forma de lágrima que actúa como un portal hacia la psique de Resn.

Haga clic y mantenga presionado el mouse y llegará a ser, de diversas maneras, un caleidoscopio en escala de grises con temática de manzana; un murciélago con una tabla ouija que usa sus rayos láser de rayos X para despojar a las personas de las pinturas antiguas; un tubo divertido; un Yakult psicodélico que dispensa imágenes prediseñadas extrañas; y Dios sabe qué más.

Resn ha roto muchas de las reglas habituales para la creación de una página de destino, pero el resultado es lo suficientemente convincente como para que siga investigando si este tipo de cosas hacen flotar su barco y se abstendrán de perder el tiempo si no. 'The Drop' probablemente funcione como un filtro perfecto para atraer el tipo de clientes con los que la empresa quiere trabajar, y es una página de destino realmente magnífica que probablemente nunca olvidará.

09. Presente y correcto

Diseño de página de destino: presente y correcto

Cada panel es una tentación

Con su cuadrícula cuidadosamente distribuida de gloriosas imágenes, el Presente y correcto El sitio llega a lo que seguramente es su audiencia principal: personas que fetichizan la papelería.

Un fondo de papel cuadriculado, un color gris pálido y una fuente clásica transmiten un ambiente de libro de ejercicios escolar y cada panel muestra un producto hermoso. Las acciones se organizan meticulosamente en categorías que se muestran en la barra de menú superior, y es tentador hacer clic en todo el lote, comenzando con la sección 'Ephemera' con un título intrigante.

10. Monotipo

Diseño de página de destino - Monotype

Al igual que la propia empresa, la página de destino de Monotype trata sobre el poder de la tipografía.

'Somos la empresa detrás del tipo', afirma La página de inicio de Monotype , y su diseño sobrio pero inteligente va de la mano con esta declaración de confianza. Toda la mitad izquierda del diseño de la página de destino está dedicada a la declaración de la misión de la empresa, y hay un giro inteligente: a través de un menú desplegable puede ver el texto en una variedad de fuentes, y en varios pesos y estilos, para tener una idea de lo que Monotype lo hace.

En el lado derecho de la página se encuentra un enlace a la biblioteca Monotype, la licencia empresarial y las noticias de la empresa, con iconos grandes 'M' en diferentes fuentes, que actúan como mayúsculas. Una paleta de colores sepia apagada mantiene el enfoque firmemente en las fuentes.

11. LS Productions

Diseño de página de destino - LS Productions

LS Productions te atrae con una cabalgata de magníficas ubicaciones escocesas

Producciones LS , Una empresa de producción de servicios de imágenes fijas y movimiento con sede en Escocia, sabe cuál es su mayor activo, y eso es lo que se le presenta cuando visita su sitio. Un video en bucle que llena las ventanas muestra una selección del trabajo de la compañía, todo ambientado en lugares hermosos. Desplácese hacia abajo y conocerá sus tres servicios principales: movimiento, imágenes fijas y ubicaciones.

En este punto, la página de destino ya ha hecho su trabajo. Todo lo que se muestra a continuación, la magnífica ubicación de la semana, la sección 'conoce al equipo', es solo un escaparate. Si está buscando contratar a LS Productions, entonces ya habrá pasado a una de las páginas principales de servicios, donde encontrará una gran cantidad de información relevante y bien presentada que lo convencerá de la idoneidad de la empresa.

12. O'Neill

Diseño de página de destino - O

La página llena de fotos de O'Neill vende perfectamente el sueño de surf y nieve

Marca de estilo de vida estadounidense O'Neill se centra principalmente en dos cosas: surf y nieve. Y su sitio de EE. UU. Lo deja perfectamente claro con una página de destino basada en imágenes que le vende sus gamas de ropa y equipo deportivo a través de impresionantes fotografías de grandes olas y montañas cubiertas de nieve.

Un conjunto de enlaces desplegables en la parte superior de la página de destino puede llevarlo directamente a lo que desea si sabe lo que está buscando, pero debajo de eso, la página de destino se propone seducirlo, con varias imágenes grandes enlaces de sección y galerías de Instagram. Todo es suficiente para que corras a la playa, o la cima de la montaña más cercana, pero no sin antes abastecerte de equipo O'Neill.

13. Hipstamatic

Diseño de página de destino - Hipstamatic

La página de inicio de Hipstamatic muestra lo que la aplicación tiene para ofrecer

Para aplicación de fotografía analógica retro Hipstamatic , se trata de demostrar las funciones interesantes, así como la apariencia, la sensación y la navegación intuitiva de la aplicación, de la manera más atractiva posible para atraer a los usuarios.

En la parte superior de la página, una franja de galería desplazable muestra la 'estética Hipstamatic' en la práctica, mientras que un iPhone enorme muestra la última versión de la aplicación, con su ClassicMode de la vieja escuela y el nuevo ProMode, con funciones más actualizadas. . Debajo de eso, un nuevo eslogan resume de qué se trata ahora Hipstamatic: 'Hacer fotografías hermosas', con un gran CTA que lo dirige a la App Store.

14. Apple

manzana

La página de inicio de Apple se centra en fotografías de productos bellamente tomadas

No es de extrañar que los maestros indiscutibles del diseño industrial puedan crear un sitio web decente y la simplicidad sin esfuerzo de Apple.com incluso ha ganado un lápiz negro D&AD.

La página de inicio recorre la amplia gama de productos de la empresa y se concentra en un solo producto de moda del momento. Además de la barra de navegación simple en la parte superior, es simplemente una fotografía del producto bellamente tomada, el nombre del producto y su eslogan. Ni siquiera hay una llamada a la acción aquí: Apple asumió con sensatez que su audiencia conocedora de la tecnología sabrá que la imagen y el texto están vinculados a más información. Es una verdadera clase magistral de moderación.

15. Pinterest

Diseño de página de destino: Pinterest

Pinterest es tan conocido que su página de destino no necesita esforzarse mucho para venderse.

Pinterest sabe lo que quiere y no está de humor para andarse con rodeos: se inscribe o nada. El popular álbum de recortes en línea confía lo suficiente en su marca y su reputación floreciente como para no preocuparse demasiado por venderse a sí mismo o por brindar a los usuarios la oportunidad de navegar por algunos foros y arriesgarse a desviarse.

Detrás de la tarjeta de registro, uno de los álbumes de recortes de fotografías gloriosas de Pinterest se desplaza tentadoramente hacia arriba, dando una idea de lo que se ofrece a los usuarios. Esta es una versión simplificada y embellecida de lo que realmente obtiene: no hay descripciones prolijas, anuncios o información de repin que abarroten esta versión de la página de inicio.

generar CSS

Generar CSS (26 de septiembre) es una conferencia en Londres dedicada a todo lo relacionado con CSS: ¡reserve su entrada ahora! Usa el código DISEÑADOR WEB2 por un 10% de descuento en las entradas(Crédito de la imagen: Getty / Future)

Artículos relacionados: