Inicio  /  Todas  / Ejemplos e inspiración de diseño de ventanas emergentes de sitios web creativos

Ejemplos de diseño e inspiración de ventanas emergentes de sitios web creativos

31 de agosto de 2022
Ejemplos de diseño e inspiración de ventanas emergentes de sitios web creativos

Todo especialista en marketing necesita un archivo deslizante para inspirarse en el diseño de la ventana emergente y los ejemplos. En este artículo, les mostraré mi propio archivo de intercambio que uso cuando necesito crear una ventana emergente nueva y atractiva.

Aparte de los propios ejemplos de Poptin en este galería, Recomiendo encarecidamente dejar fluir su creatividad con otros ejemplos también.

En este artículo, veremos algunos diseños y ejemplos de ventanas emergentes creativos e inspiradores para mejorar nuestras tasas de conversión de leads magnet para 2022.

Vamos a sumergirnos

Ventana emergente de diseño de copia de honestidad y autenticidad 

Siempre recomendaría una ventana emergente de diseño de copia honesta y auténtica que siempre tuviera su encanto para atraer al lector a dar su dirección de correo electrónico.

Wikipedia ha hecho un gran trabajo al ser honesta y pedir donaciones para seguir creciendo. Todos necesitamos que la información sea libre e imparcial, y Wikipedia hace un gran trabajo al respecto. De ahí que esta copia con un diseño simplista tenga su propio mérito.

image9

La otra ventana emergente honesta que encontré fue creada por ProfitWell. Mientras estaba en el sitio web de ProfitWell, promocionaron el desmontaje de su página de precios. Aunque tiene un buen contenido, como estaban alterando mi experiencia de usuario en el blog, comenzaron con "odiamos las ventanas emergentes...". Me identifico totalmente con ello. 

image10

¿Por qué? Es honesto, directo y da algo a cambio de una dirección de correo electrónico. Además, las imágenes son reales y estos dos tipos en la ventana emergente de arriba hacen un gran trabajo. 

Inmediatamente me inscribí.

Si puede hacer que el diseño de una ventana emergente sea relevante, empático y tenga una buena copia, probablemente tendrá una tasa de conversión decente.

Ventana emergente de diseño simplista

A veces todo lo que necesitas es simple y funciona bien. ¿Por qué funciona el diseño de ventanas emergentes simples? Generalmente funciona cuando tu oferta es excelente, tiene prueba social, y la copia es asombrosa.

Con esto, me gustaría compartir un gran ejemplo que se ofreció a los especialistas en marketing (por cierto, nosotros, los especialistas en marketing, normalmente somos críticos con los demás).

image12

Harry ejecuta en seco este pequeño proyecto y muestra la ventana emergente anterior en la intención de salida. Tiene pruebas sociales (9691 especialistas en marketing), consejos prácticos, lectura de 2 minutos (barrera baja) y también es honesto porque dice que menos del 0.4% de las personas se dan de baja y es gratis. 

Este tipo de texto con una gran oferta siempre funcionará. Si está buscando un ejemplo de diseño simplista para inspirarse, este sería el ganador.

Por último, no dice "registrarme", sino "actualizar mi marketing", que en realidad ofrece un llamado a la acción basado en valores.

¡Buen trabajo Harry!

Nota del editor: Consulte estos consejos de redacción publicitaria a partir de ejemplos de marketing. 

Otro ejemplo de diseño de ventana emergente muy simplista que recibo está inspirado en Ahrefs.

image2

Ahrefs asume que el visitante del blog no puede ser colocado en un embudo y, por lo tanto, es mejor alimentarlo continuamente con contenido nuevo. Ese contenido es como una página de ventas, por lo que el lector/visitante eventualmente realizará una conversión.

Por lo tanto, la ventana emergente simplista anterior con una mascota hace un gran trabajo a la hora de convertir. Según Ahrefs, tiene más del 0.5% de la conversión de sus 250 visitantes mensuales. Bueno, entonces funciona.

La última inspiración simplista para el diseño de ventanas emergentes proviene de los growth hackers que sigo. Estos son un grupo de chicos enseñando marketing de crecimiento y su ventana emergente es simple pero efectiva para estudiantes como yo. Es simplemente una copia increíble y mucha prueba social. 

image1

Ejemplos de diseño de ventanas emergentes de mascotas 

Para ser honesto, me encantan las ventanas emergentes de Mascot. Tiene personalidad y le da el lado creativo al blog o sitio web. Sin mencionar que es excelente para el conocimiento de la marca.

No soy empleado de Poptin, pero me encanta su ventana emergente con la mascota del loro.

image8

En el ejemplo anterior, Poptin lo muestra en la intención de salir y usa el enfoque del miedo para hacerme registrar. La barrera para registrarse es tan baja porque apenas lleva dos minutos. La mascota loro vuela todo el tiempo, por lo que llama la atención.

Si desea utilizar su mascota para el diseño de ventanas emergentes, asegúrese de que reciba la atención adecuada.

Por último, la copia ofrece iniciar una cuenta gratuita y conseguir más clientes a través de esos visitantes. ¡Hermoso!

Me registraría sólo porque está hecho con mucha elegancia.

Otra buena inspiración creativa que utiliza bien el contexto es Hipmunk.

image4

Esta ventana emergente aprovecha la mascota y el tiempo de espera y carga. Hipmunk ha hecho un buen trabajo con la mascota para llamar la atención, pero la ubicación y la activación se hicieron aún mejor. 

Es simple y efectivo. Recomendaría este tipo de ventana emergente si hay mucho tiempo de espera en su aplicación.

Inspiración para el diseño de ventanas emergentes de marketing de contenidos

Si tiene un buen contenido que puede promocionar fácilmente y captar algunos clientes potenciales, ¿por qué no querría ofrecerlo? Simplemente puedes promocionar libros electrónicos, webinars, infografías, ofertas comunitarias y mucho más.

Appcues hizo un buen trabajo al compartir su academia de incorporación hace unos años. Su academia ha formado a muchos empresarios y directores de productos de SaaS. Aquí hay un ejemplo de su diseño emergente anterior:

image7

 La ventana emergente anterior ha sido realizada por un buen diseñador y con una gran copia. También tienen una ventana emergente similar para las actualizaciones de su blog.

image6

Personalmente, me gusta mucho más la ventana emergente de la academia de incorporación que la del blog. Sin embargo, deberías utilizar ambos para convertir más visitantes.

Personalmente, si miramos la oferta del blog, siempre recomendaría agregar un poco de toque en el texto como Airfocus (hojas de ruta de productos herramienta) lo hace:

image13

Más información: Hoja de ruta del producto

También he estado promocionando una gran cantidad de contenido relacionado con mi producto y he estado usando los formularios de Poptin, lo que me dio tasas de conversión bastante buenas.

He estado promocionando el curso por correo electrónico y la escuela de adopción de productos de Userpilot. Sorprendentemente, obtuvimos una mejor conversión de los formularios insertados en el blog que de las ventanas emergentes. Estos son definitivamente buenos ejemplos.

image3

Esta es la plantilla de Poptin que he estado usando y que funciona bastante bien. 

image5

Ambas inspiraciones de diseño promueven contenido con textos de manera efectiva. 

Otra buena inspiración para el diseño de ventanas emergentes de contenido que obtuve y de la que me inspiré fue Demio. Demio es una herramienta de gestión de seminarios web y me ascendieron a su libro electrónico. Como estaba tratando de aprender más sobre “cómo administrar seminarios web”, estaba en la ubicación correcta.

Pero lo más efectivo fue el diseño y el texto que hizo clic en “descargar”. 

image11
¿Qué puedo decir? El diseño de la ventana emergente anterior estaba en el momento y lugar correctos (su blog) para hacerme descargarlo. También me encanta el uso efectivo del fondo.

Espero que estos diseños emergentes te den algo de inspiración. 

Conclusión

La inspiración y los ejemplos de diseño de ventanas emergentes anteriores son para que usted se inspire. Sin embargo, un consejo profesional que podría darte es que crees tu propio archivo deslizante. Estos diseños e inspiraciones pueden quedar obsoletos muy pronto.

Por lo tanto, es importante mantenerse al tanto y seguir inspirándose.

Aazar Ali Shad es un emprendedor, un especialista en marketing de crecimiento (no un hacker) y un experto en SaaS. Le encanta escribir contenido y compartir lo que aprendió con el mundo. Puedes seguirlo en Twitter @aazarshad o aazarshad.com