Si nos fijamos en cómo las páginas de productos toman forma en diferentes compañías, está claro que abarcan toda la gama. Algunos optan por un enfoque directo, muestran una imagen de un producto y explican por qué alguien debería comprarlo.

Otras compañías crean páginas elaboradas con partes móviles y elementos interactivos de lujo.

Otras compañías crean páginas de productos deliciosas que dan los usuarios una experiencia auténtica mientras navegan a través de lo que la empresa tiene para ofrecer.

 Descargue aquí nuestra colección completa de ejemplos de páginas de inicio, blogs y páginas de destino para inspirar el diseño de su propio sitio web.

Lo creas o no, no todas las páginas de productos más cautivantes tienen una programación de nivel empresarial detrás de ellas. Para darle una idea de lo que es posible, desde la pequeña empresa hasta el nombre del hogar, exploramos 18 ejemplos que consideramos realmente admirables.

Las páginas a continuación han dominado sus mensajes, sus propuestas de valor y descripciones generales de los productos de modo que estos sitios resuenen con su personalidad de comprador único.

(Y después de consultar estas páginas, es posible que también desee comprar sus productos).

 77 Ejemplos brillantes de páginas de inicio, blogs y Páginas de destino

18 de los mejores diseños de páginas de destino de productos

1. Bellroy

Bellroy vende carteras más delgadas que las típicas. Eso tiene valor, pero ¿qué es y cómo logra que el consumidor lo entienda?

Para responder a estas preguntas, Bellroy dividió su página de producto en tres etapas del viaje del comprador: entender el problema, cómo solucione el problema y cómo Bellroy puede resolver el problema.

Incluso hay una sección interactiva que muestra cómo la billetera delgada se llenará en comparación con una billetera diferente. A medida que los usuarios mueven un control deslizante hacia adelante y hacia atrás a lo largo de una línea, ambas billeteras se llenan con tarjetas y dinero en efectivo, mostrando visualmente el problema que soluciona la billetera delgada de Bellroy.

  19659015] [</span><a href= Haga clic aquí para ver la página completa del producto de Bellroy.]

2. Wistia

Wistia es una empresa de análisis y alojamiento de videos que proporciona a los usuarios métricas de rendimiento de video detalladas. Puede sonar como un snooze-fest, pero profundicemos en lo que realmente hace que esta página de producto se destaque.

Primero, se nos presentan cinco gráficos coloridos que ilustran las propuestas de valor de sus herramientas . Y si eso es todo lo que el usuario realmente necesita ver, esos gráficos van seguidos de dos llamadas a la acción.

Pero, si continúa el desplazamiento, verá un video con información sobre las capacidades de Wistia para ese video: llamadas a la acción, recolectores de correo electrónico, mapas de calor de video y tendencias de visualización.

Una de las mejores maneras de explicar las características de una plataforma visual es demostrarlas en una página de producto. Este le muestra a los usuarios todas las características de Wistia y cómo funcionan, día a día.

 Página de producto de Wistia [ Haga clic aquí para ver la página de producto completa de Wistia.]

3 . Square

Square es una compañía de transacciones móviles que los comerciantes pueden usar para cobrar el pago de los clientes, en cualquier lugar, en cualquier momento, siempre que tengan un teléfono o tableta compatible.

El desafío de la comercialización del producto aquí es muestre por qué Square es una alternativa más fácil que una caja registradora típica, y su página de productos muestra esos motivos de una manera visualmente cautivadora.

Descripción del producto

El título principal de cada sección de esta página de producto tiene una copia en negrita y sucinta :

"Pequeño lector de tarjetas de crédito, grandes posibilidades".

El resto de la página tiene titulares claramente organizados, que leen como respuestas a preguntas frecuentes: mucho espacio en blanco , copia sucinta, e imágenes apropiadas. Cualquiera que busque en cada sección puede entender exactamente cómo funciona Square en cada etapa de una transacción.

 Página de producto de Square
[ Haga clic aquí para ver la página de productos completa de Square.]

4. Rent the Runway

Algunas compañías, especialmente en comercio electrónico, pueden tener hasta miles de páginas de productos. Rent the Runway, una empresa de alquiler de vestidos en línea, es una de ellas.

Rent the Runway tiene una página de producto individual para cada vestido que lleva, con toda la información que un cliente puede desear: imágenes, medidas, tela, precio, y comentarios. Entonces, ¿qué los distingue? Los detalles excepcionales de las secciones "Notas del estilista" y "Tamaño y ajuste".

Descripción del producto

Estos detalles están claramente y cuidadosamente seleccionados por estilistas y revisores. No solo explican de qué está hecho el vestido y cómo se ve, sino que cubren cómo encaja en cada parte del cuerpo, qué ropa interior se debe usar con él y para qué tipo de cuerpo es el más adecuado. Ese tipo de información no solo deleita a los clientes y los alienta, sino que también contribuye a una decisión de compra más segura.

Además, observe cómo hay mucho espacio en blanco alrededor de las imágenes y la descripción del producto. Según una investigación realizada por ConversionXL, ese espacio en blanco crea un mayor valor percibido, en este caso, el precio del producto en la mente del usuario .

 Página de producto para el vestido azul marino de Badgley Mischka de Rent the Runway [ Haga clic aquí para ver la página completa del producto Rent the Runway.]

5. Daily Harvest

Daily Harvest desarrolla súper alimentos en forma de batidos, sopas y más, y los entrega a su puerta. ¿Qué hace que las páginas de productos de estos alimentos sean tan destacadas? Le muestran exactamente lo que hace que estos alimentos sean tan super en un formato que sea claro y digerible, sin juego de palabras.

Revise una de las páginas de productos de batidos de Daily Harvest, a continuación. No solo puede ver cómo se ve el batido, sino que al desplazarse sobre el icono de vista previa que se encuentra debajo de la imagen principal, le muestra los alimentos que se utilizan para crear esta bebida. Desplácese hacia abajo y verá cada ingrediente y una descripción simple de cada uno.

Descripción del producto

La descripción del producto de este batido es tan creativa como la propia página de destino.

"Patadas fatiga hasta el bordillo. Deja la inflamación en el polvo. Hace que la hinchazón sea una cosa del pasado. ¡Es un pájaro, es un avión, es Ginger + Verdes! "

 Página de inicio del producto para el batido de Jengibre + Verdes con lista de ingredientes de Daily Harvest [ Haga clic aquí para ver la página completa del producto de Daily Harvest.]

6. Oreo

Si has visto algo del marketing de Oreo, no debes sorprenderte de que estén en esta lista. Pero a veces, ser bien conocido puede hacer que sea más difícil crear una página de producto. Entonces, ¿cómo lo hicieron?

El enfoque de la página de productos de Oreo es cómo estas cookies clásicas y sencillas pueden ayudar a las personas a desatar su imaginación, atreverse a preguntarse y, en general, a ser más felices. Cuenta con una serie de videos, uno tras otro. Uno está acompañado por la letra, "Es tan fácil dejar volar tu imaginación cuando juegas con Oreo", rindiendo tributo a la vieja discusión sobre la "mejor" manera de comerlos. La página adopta un enfoque creativo y audaz para el marketing con lo que de otra manera se podría considerar como un bocadillo común.

Oreo también llevó un diseño único a esta página. A pesar de que las cookies son monocromáticas, la página es maravillosamente colorida, desde los videos, los fondos, los gráficos.

 Página de producto por Oreo "title =" Oreo.gif "width =" 690 "style =" width : 690px [ Haga clic aquí para ver la página completa del producto de Oreo.]

7. Fitbit Charge

Cuando participé en esta publicación del blog, le pedí a algunas personas sus sugerencias de páginas de productos favoritas. Me sorprendió la cantidad de gente que inmediatamente recomendó Fitbit, y después de visitar el sitio, puedo ver por qué.

La página a continuación ayudó a revelar el Fitbit Charge original, ahora seguido por Fitbit 3, y comienza con una propuesta de valor, en lugar de una lista de características. Es una imagen de héroe de personas que caminan por una montaña, y podemos imaginarnos que están usando Fitbits, con la copia "Energiza tu día".

A medida que te desplazas por la página, repasas cuatro pasos rápidos que explican cómo funciona el producto. Además, muchos de ellos son interactivos: la sección bajo "Todo lo que necesitas, todo en un solo lugar" permite a los usuarios desplazarse sobre diferentes funciones para ver cómo aparecen en la aplicación móvil de Fitbit.

Pero la página también explica por qué estas caracteristicas son valiosas Por ejemplo, uno rastrea todo lo que hace, desde caminar, correr, dormir. ¿Por que importa? Bueno, puedes tener tus registros actuales a la mano e intentar batirlos.

Sabiendo que los usuarios pueden no recordar todos los detalles cuando salen de la página, Fitbit estaba seguro de centrarse en cómo estas características realmente harán una diferencia En la vida de los visitantes. Bien jugado.

 Página del producto Teal para Fitbit Charge "title =" fitbit.gif "width =" 690 "style =" width: 690px [ Haga clic aquí para acceder a la nueva página de producto de Fitbit Charge 3 .]

8. Volkswagen

Volkswagen adopta un enfoque interactivo para la comercialización de sus productos. En lugar de enumerar todas las características que puede tener en un automóvil, la compañía lo guiará a través del proceso de construcción de su automóvil. A medida que avanza en ese proceso, Volkswagen resalta las diferentes funciones que puede elegir, luego le da una vista previa de cómo se verá el automóvil y cómo afectará el precio.

Aunque no estoy actualmente en el mercado para un coche nuevo, personalmente me divertí jugando con las diferentes características de personalización en la página. ¿Qué color quiero? ¿Quiero audio premium? (Sí). Es una forma interesante para que la marca elimine las connotaciones notorias de "vendedores de autos", al permitir que los usuarios aprendan y seleccionen funciones de manera independiente.

Además, hay una característica ingeniosa de emparejamiento que le permite ver cuál está cerca. los concesionarios tienen el automóvil con todas sus preferencias en su inventario.

(Si desea ver una página de producto regular también la tienen.)

 Página de producto Build Your Jetta por Volkswagen "title =" Volkswagen.gif "width =" 690 "style =" width: 690px [ Haga clic aquí para ver la página de productos completa de Volkwagen.]

9. Seattle Cider

La gente de Seattle Cider afirma que su sidra "no es su sidra estándar". Bueno, tampoco lo es la página del producto. Se lee como una historia, comenzando con imágenes atractivas y de alta definición de la selección de sidra, que tienen diseños de etiquetas realmente geniales . A medida que se desplaza, aparece una explicación de lo que diferencia a los productos de Seattle Cider de otros, y lo que hace que cada variación sea especial.

Pero mi parte favorita es la siguiente: una presentación realmente genial e interactiva de cómo se hace la sidra de principio a fin. , que juega para los usuarios a medida que se desplazan. Es una experiencia sorprendente y agradable para el usuario que va más allá de la página de productos típica, ya que no solo muestra los productos. Muestra de dónde vienen y cómo.

 Seattle_Cider.gif "title =" Seattle_Cider.gif "width =" 690 "style =" width: 690px [ Haz clic aquí para ver Seattle La página completa de productos de sidra.]

10. Software de OfficeSpace

OfficeSpace vende software de administración de instalaciones para ayudar a las personas a administrar, así, los espacios de oficinas. Al igual que el nombre, la página del producto es muy clara y directa.

Cada sección de esta página del producto está dedicada a una característica diferente del software. El título explica la función y el subtítulo explica por qué esta función es importante al evaluar diferentes programas.

Eso facilita que los prospectos digieran rápidamente lo que ofrece el producto, pero también lean más detalles sobre su propuesta de valor, si elegir. Y, si alguien desea aprender aún más sobre una característica en particular, hay una clara llamada a la acción para hacerlo.

 Página de producto del software OfficeSpace azul oscuro "title =" officespace.gif "width =" 690 "style = "width: 690px [ Haga clic aquí para ver la página completa del producto de OfficeSpace.]

11. Orangina

Esta bebida carbonatada de cítricos ha existido desde 1935, y tiene exactamente cuatro productos: original, rojo anaranjado, claro y tropical. Entonces, ¿cómo mantiene Orangina su página de productos actual y especial?

Por un lado, es divertido explorar. Cuando pasas el mouse por encima de cualquiera de los bloques, la imagen o el ícono se animan: las botellas bailan, las rodajas de naranja por la mitad y el termómetro cae. Las imágenes animadas y los colores llamativos encajan perfectamente con la personalidad atrevida y divertida de la marca Orangina.

Además, puede notar que algunos de los bloques son productos reales, mientras que los otros son simplemente consejos y detalles sobre sus productos. Si no tiene muchos productos para vender, considere intercalarlos con consejos e información sobre los productos que tiene disponibles.

 Azulejos vivos en la página del producto Orangina "title =" Orangina.gif "width =" 690 " style = "margin-left: auto; margin-right: auto; width: 690px [ Haga clic aquí para ver la página completa del producto de Orangina.]

12. Mango Languages ​​

Mango Languages ​​crea experiencias "amables" de aprendizaje de idiomas para bibliotecas, escuelas, corporaciones, agencias gubernamentales e individuos. Su página de inicio ha ilustrado las llamadas a la acción para cada una de estas personas compradoras, desde bibliotecas públicas hasta oficinas gubernamentales, y aquellos que están educando a sus hijos en el hogar. Cada una de esas llamadas a la acción conduce a una página de producto diferente que es colorida, claramente escrita y muy completa.

Mire el ejemplo para maestros de educación en el hogar a continuación. Como cualquier otra parte del sitio web, exuda la personalidad de marca amigable, accesible y útil de Mango. El video no podría ser más delicioso. Quiero decir, ¿un mango de guitarra con un sombrero de copa? Sí, por favor.

A medida que te desplazas, te saludan con claras propuestas de valor que utilizan un lenguaje lúdico que es fiel a la marca. Todo sobre la página dice "fácil de usar", "diversión" y "efectivo".

 mango-homeschool-landing-page "width =" 690 "style =" width: 690px [ Click aquí para ver la página completa de productos de Mango.]

13. Colchones Helix

Una cosa es vender un colchón: otra cosa es vender una buena noche de sueño. Helix Mattresses se centra en láser en este último, ya que diseñó una página de producto que organiza cada colchón por su nivel de suavidad y apoyo.

Al mirar la línea de productos de Helix en forma de cuadro, los visitantes del sitio web no tienen que examinar cada colchón De forma individual para encontrar los atributos que están buscando. Simplemente encuentre la fila y la columna que coinciden con sus necesidades de ropa de cama y haga clic en la página de productos de su colchón elegido para obtener más información.

Descripción del producto

Puede ser difícil saber qué "lujoso", "firme" o " apoyo "realmente significa en un colchón – todos parecen tan subjetivos. Por esa razón, Helix tiene que ver con la brevedad en las descripciones de sus productos, utilizando explicaciones evocadoras de cada categoría a la que podría pertenecer un colchón.

"Plush Feel: parte superior suave de su colchón que le permite sumergirse como una nube. "

" Apoyo equilibrado: no demasiado, no demasiado poco. Lo mejor para personas que duermen de lado con tipos de cuerpo delgados al promedio ".

" Sensación firme: firmeza de la parte superior su colchón sin fregadero ni ceda ".

 helix-mattresses-product-landing-page" width = "960" style = "width: 960px [ Haga clic aquí para ver el producto completo de Helix página.]

14. Minwax

Minwax fabrica productos para ayudar a las personas a cuidar sus muebles y superficies de madera. Remachando, ¿verdad? Pero la marca ha logrado crear una página de producto que no solo es relevante, sino que también ayuda a los usuarios a encontrar rápida y fácilmente lo que están buscando.

Esto se debe en parte al módulo Minwax Product Finder. Funciona como un cuestionario, hace una serie de preguntas de opción múltiple, como "¿Qué tipo de proyecto es?" y "¿Qué estás buscando hacer?" Una vez que responde las preguntas, el cuestionario genera los productos recomendados, que incluyen una lista práctica de "No olvide" con las herramientas que necesitará para hacer el trabajo, como gafas de seguridad, guantes y papel de lija. Consejos útiles como este van más allá de una página de productos de comercio electrónico normal.

 Página de productos Minwax con el Buscador de productos en el fondo de madera "title =" MiNWAX.gif "width =" 690 "style =" width: 690px [[19659131] Haga clic aquí para ver la página completa del producto de Minwax.]

15. Ministerio de Suministros

El Ministerio de Suministros se especializa en ropa formal cómoda, y le muestra cuán cómodo está en cualquiera de las páginas de aterrizaje de productos de sus prendas.

Tome la página del producto de la Blusa Juno, a continuación. Debajo de la galería de fotos de una mujer que modela el producto, el Ministerio de Suministros ofrece a los visitantes "pruebas", que revelan el número de hilos de la blusa, los materiales y otras cualidades clave que hacen que el producto sea único.

El mejor rasgo de la página del producto podría ser realmente su gráficos en movimiento, utilizando videos en bucle básicos que demuestran la resistencia y flexibilidad de la ropa.

Descripción del producto

El Ministerio de Suministros describe los beneficios técnicos de sus productos pero sin sacrificar un tono amigable:

"A diferencia de la seda, Juno está diseñado para un desempeño diario sin problemas. Es transpirable y no tiene arrugas, por lo que puede vestirse de la mejor manera sin un cuidado especializado ".

 Ministry-of-Supply-Product-landing-page" width = "888 "style =" width: 888px [ Haga clic aquí para ver la página completa del producto del Ministerio de Suministros.]

16. Liulishuo

Liulishuo es una empresa emergente con sede en China que desarrolla herramientas de aprendizaje del idioma inglés para fines de desarrollo personal y preparación de exámenes. La página de producto de la aplicación móvil de la compañía ofrece una visión general limpia pero rica en medios de su plan de estudios.

Como se puede ver a continuación, la parte inferior de la página reproduce un clip de movimiento nítido de los cursos basados ​​en video en acción en un teléfono inteligente. Esencialmente, es una demostración de la aplicación antes de que los usuarios la descarguen.

En la parte superior de la página, Liulishuo hace un buen uso de los códigos QR al permitir que los usuarios descarguen la aplicación con solo escanear el código QR de la aplicación en su dispositivo móvil. Presentar un producto de software de esta manera es un esfuerzo inteligente para aumentar la adquisición de clientes simplemente haciendo que el producto sea más fácil de obtener.

 liulishuo-app-product-page "width =" 690 "style =" width: 690px [ Haga clic aquí para ver la página completa del producto de Liulishiuo.]

17. Metavrse VR Photobooth ™

Metavrse, una consultora de realidad virtual (VR) y desarrollador de productos, tiene prácticamente la página de productos más inmersiva que jamás hayamos visto. La compañía vende no solo información de VR, sino también herramientas de VR para ayudar a las empresas modernas a involucrar mejor a sus clientes en sus productos y servicios.

Una de esas herramientas, que tiene una página de inicio excelente, es el VR Photobooth ™.

El VR Photobooth ™ de Metavrse cuenta con un auricular VR y una sala real en forma de cubo en la que la gente ingresa mientras usa el auricular para una experiencia de marca de 360 ​​grados. ¿Y qué mejor manera de demostrar esta experiencia que en el centro de la página del producto? Míralo, a continuación.

Metavrse muestra sus auriculares VR en una posición opuesta al visitante del sitio web, con un fondo panorámico móvil que brinda a las empresas una demostración de primera mano de lo que les espera (o, más específicamente, a sus clientes). [19659030] Descripción del producto

Metavrse elabora su VR Photobooth ™ a través de un PDF completo, que los visitantes del sitio web pueden descargar de forma gratuita en la parte inferior de la página del producto. Con respecto a la habitación en forma de cubo, la compañía tiene una copia del producto atractiva e informativa:

"Hasta 4 huéspedes pueden entrar al stand de inmediato para tomar una foto entre una deslumbrante exhibición de imágenes de video y espejo mágico. . "

 metavrse-vr-photobooth-product-page" width = "690" style = "width: 690px [ Haga clic aquí para ver la página completa del producto de Metavrse.]

18 . Nfant® Nipple

Nfant®, un producto de lactancia para bebés, toma en serio la transición de la lactancia materna a la alimentación oral, como se ve en la página de productos de la compañía para el pezón Nfant®.

Lo que diferencia a esta pequeña empresa de otras Los servicios de enfermería y crianza de los hijos son su uso de datos para atraer clientes.

La página de productos a continuación ofrece varios tipos de tetinas con forma de tapón, y cada una ofrece un nivel diferente de flujo cuando el bebé está bebiendo. . Sin embargo, las condiciones de cada producto están involucradas, sin embargo, la página del producto entrega la información con gracia mediante la coordinación de colores, una demostración en video e incluso un gráfico que compara el rango de flujo de cada producto al que las madres lactantes pueden referirse.

Las madres que amamantan siempre se están educando a sí mismas sobre los recursos que tienen para mantener a sus hijos saludables a medida que se desarrollan. Teniendo eso en cuenta, la página del producto detallada pero fácil de entender de Nfant conoce bien a su persona compradora.

 nfant-nipple-product-page "width =" 860 "style =" width: 860px [ Haga clic aquí para ver la página de productos completa de Nfant.]

Mejores prácticas de la página de productos

Entonces, ¿qué nos han enseñado estas marcas sobre las páginas de productos? Se reduce a algunos elementos indispensables:

  • Conviértalo en un lugar interesante y divertido, especialmente si tiene un producto poco fascinante.
  • Facilite que los visitantes encuentren lo que están buscando. [19659176]Hazlo personal. Permita que los usuarios "creen su propio" producto, para mostrarles que puede cumplir con sus preferencias.
  • Hágalo informativo. Sin atorarlo en detalle, asegúrese de incluir la información correcta que mostrará a los usuarios lo que distingue a sus productos.

¿Desea más ejemplos de diseño de sitios web? Consulte los mensajes de error de la creatividad 404 .

 ejemplos de un diseño brillante de página de inicio, blog y página de destino "src =" https: //no-cache.hubspot. com / cta / default / 53 / a1077f76-df2c-4b45-8ebc-dc2732f30850.png



Source link