LANDING PAGES
Diseño, maquetación y programación de microsites o mini-webs con diferente estructura, funcionalidad y objetivo.
Algo fundamental para cualquier empresa que se dedica a vender un producto o servicio por Internet es la de poder contar con una base de datos de contactos a los que dirigir campañas de marketing directo, con el objetivo de convertirlos en clientes.
Es por este motivo por lo que es necesario contar con recursos que permitan recopilar leads, es decir, tener una medio por el que una persona interesada pueda hacernos llegar sus datos de contacto y guardarlos en nuestro CRM o base de datos.
Una página web de única página o microsite que se usa como landing page en campañas de marketing online es el claro ejemplo de herramienta diseñada para este objetivo, la recopilación de leads. A lo largo de estos últimos años, he diseñado, maquetado y probado muchos tipos de microsites, principalmente orientados a este propósito, programando además la lógica de validación e integración.
Además, también he desarrollado otro tipo de micrositios más informativos o con función de aplicación web, para facilitar a proveedores de leads o departamentos de marketing con pocos recursos técnicos, el guardado en bloque de los contactos en bases de datos y sistemas CRM
Dejo a continuación varios ejemplos de este tipo de trabajos, con un comportamiento simulado de su función real:
Ejemplo de landing page orientada a captación de leads interesados en un curso online de ciberseguridad.
Algunas de las características del micrositio son las siguientes:
Diseño 100% responsive con puntos de ruptura a 1150px y 950px.
Maquetación y contenido orientado al completado de formulario.
Enfocado a uso en campañas de pago, no posicionamiento orgánico.
Validación de los campos del formulario en la parte frontend y backend.
Uso de etiquetas de HTML 5 semántico.
Uso de flexbox para facilitar el movimiento de componentes
Sistema para evitar el envío duplicado de los datos.
Uso de Tag Manager para instalación sencilla de códigos de trackeo.
Gestor de cookies integrado para el control de ejecuón de tags.
Paso intermedio de validación y formateo de datos antes del envío.
Programación de varios métodos de integración con el sistema destino.
Sistema de recogida de identificador a través de parámetro de URL.
Ejemplo de microsite orientado y diseñado como herramienta web para facilitar la integración de leads en bloque.
Algunas de las características del micrositio son las siguientes:
Uso de archivos .csv para la integración en bloque de leads.
Diseño responsivo y acondicionado al estilo corporativo del cliente.
Fácilmente escalable y adaptable a otros formatos de datos.
Comprobación visual de los datos para evitar errores.
Validación de los datos en backend antes de ser integrados.
Formateo de datos antes del envío según el sistema destino o endpoint.
Programación del método de integración en función del sistema final.
Descargar archivo .csv de ejemplo para probar la aplicación.
Ejemplo de landing page con un enfoque informativo de un proyecto educativo europeo de transformación digital de pymes.
Algunas de las características del micrositio son las siguientes:
Landing informativa para campañas de pago, no para acciones SEO.
Diseño 100% responsive con puntos de ruptura a 1365px, 1150px y 675px.
Validación de los campos del formulario en la parte frontend y backend.
Implementación de cuenta atrás real hasta fecha fin de plazo.
Uso de etiquetas de HTML 5 semántico.
Uso de flexbox para facilitar el movimiento de componentes
Sistema para evitar el envío duplicado de los datos.
Uso de Tag Manager para instalación sencilla de códigos de trackeo.
Gestor de cookies integrado para el control de ejecuón de tags.
Paso intermedio de validación y formateo de datos antes del envío.
Programación de varios métodos de integración con el sistema destino.
Sistema de recogida de identificador a través de parámetro de URL.
Uso de API de Youtube para autoejecución de videos a través de ancla.
Ejemplo de microsite destinado a presentar al usuario una oferta específica por visualizar un webinar.
Algunas de las características del micrositio son las siguientes:
Diseño 100% responsive y estilado con Tailwind CSS.
Permite lanzar una oferta oculta para el usuario que visualiza un video.
A partir de un minuto de visualización (51:10) se hace visible el mensaje.
Ejemplo de landing page para testear diferentes opciones de formación y los posibles alumnos.
Algunas de las características del micrositio son las siguientes:
Landing para testeo de cursos vía campañas de email marketing.
Diseño responsivo 100% con CSS y Flexbox.
Recogida de datos a través de formulario conversacional.
Guardado de respuestas en archivo de texto protegido.
Acceso a listado de datos guardados mediante password cifrado.
Presentación de respuestas en formato tabla responsiva.
Posibilidad de descarga de datos en formato CSV para su tratamiento.
Ejemplo de microsite tipo buscador multiopción.
Algunas de las características del micrositio son las siguientes:
Landing page para presentar la oferta formativa de las diferentes líneas o centros relacionados con un formulario multiopción.
Permite al usuario elegir paso a paso entre las diferentes opciones hasta llegar al formulario para solicitar información.
Se puede volver atrás desde cualquier paso para seguir otra opción.
El paso final puede ser un formulario para dejar los datos de contacto en el propio microsite o se redirige al usuario a una landing externa.
Microsite de diseño 100% responsivo y de arquitectura Single-Page (SPA).
Optimizada y diseñada bajo un enfoque 'speed-first' para garantizar una conversión inmediata sin tiempos de espera.
Proyecto desarrollado en:
HTML CSS Tailwind CSS Javascript PHP SQL
Creación de microsites para diferentes usos, principalmente como landing pages en campañas de captación de leads.
Diseño y maquetación de los sitios, así como la programación de la lógica de integración con sistemas CRM y bases de datos.
Los logotipos, marcas comerciales y nombres de productos que aparecen en este sitio web son propiedad de sus respectivos dueños. Su uso es únicamente con fines de identificación y referencia de los trabajos realizados.
Si lo que has visto aquí te gusta, quieres colaborar conmigo o te apetece comentarme algo ¡Escríbeme!
DIME HOLA