Diseño de Landing Page: Construyendo La Landing Page Definitiva

Una página de destino efectiva es crucial para el éxito de un producto

El marketing es un concepto extraño para la mayoría de los diseñadores y desarrolladores. Nos destacamos en el desarrollo de productos y desafíos técnicos, pero cuando llega el momento de promover un producto, no somos muy conocedores.

Pero el marketing es crucial para el éxito de un producto, y no debe pasarse por alto. Este fue el reto cuando diseñé y me preparé para lanzar el teclado por excelencia del mundo para desarrolladores, el Ultimate Hacking Keyboard.

Afortunadamente, formé parte de un equipo que se dio cuenta de la importancia de una página de inicio atractiva, especialmente en los meses previos a nuestra campaña de crowdfunding de hacer o deshacer. Juntos, nos propusimos diseñar una página de aterrizaje que capture la imaginación, genere suscriptores y prepare nuestro producto para un lanzamiento exitoso.

Esta es la historia de la página de aterrizaje definitiva de The Ultimate Hacking Keyboard.

Consejo technico. Pasos prácticos hacia adelante.

Una búsqueda en Google para el “diseño de la página de destino” genera docenas de artículos excelentes, cada uno con importantes consejos como:

• “El contenido debería cargarse en un instante”.
• “La fotografía debe ser relevante para la audiencia del sitio”.
• e, “Incluir un formulario para reunir clientes potenciales”.

Estos son puntos útiles, pero hay más factores para el éxito de la página de destino. Esta guía de diseño de la página de destino brindará asesoramiento técnico, pero también ofrecerá información práctica que ayudará a los diseñadores y desarrolladores a elegir los servicios correctos de terceros e integrar tecnologías que funcionan detrás de escena.

En última instancia, el objetivo de esta guía es ahorrar tiempo y dinero a los diseñadores y desarrolladores, que de lo contrario podrían desperdiciarse en pruebas y errores infructuosos.

Objetivo para producción de video de alta gama y alojamiento

Presentar videos en la web es más fácil que nunca, pero relativamente pocos sitios lo usan. Desde una perspectiva web, no es un desafío técnico, sino una inversión de recursos: tiempo y dinero.

El video del trailer de la página de inicio del Ultimate Hacking Keyboard (UHK) se sometió a doce repeticiones, con cada nueva versión refinando gradualmente cada pequeño detalle. El proceso de diseño fue agotador pero gratificante, y el video del trailer es la joya de la corona de nuestra página de destino. Diferencia completamente nuestro producto del resto del paquete.

Ten en cuenta que la creación de contenido de alta calidad es costosa. Los profesionales especializados pueden hacer brillar un producto, pero es importante comprender lo que puedes pagar. De lo contrario, tu producto puede hundirse antes de que se levante del suelo.

Si tú u otro diseñador en tu equipo tiene las habilidades y el equipo, puedes intentar creando tu propio contenido de video, pero mantenga los videos cortos y sencillo. Las producciones excesivamente ambiciosas en manos de aficionados rara vez van bien.

El equipo de UHK se decidió por una animación 3D dinámica para demostrar la funcionalidad básica del teclado en nuestra página de inicio. Si se necesita una animación en 2D (para una aplicación o servicio web), o si se requiere material de cámara de acción en vivo, el proceso presentará diferentes desafíos.

Una vez que se realiza un video, debe estar alojado en un sitio web. Afortunadamente, hay muchas opciones:

YouTube es el líder indiscutido del mercado y un sinónimo de video en la web. Es un servicio capaz y una elección razonable, pero su reproductor incorporado no es la opción más estéticamente agradable.

Vimeo presenta un reproductor integrado con un diseño minimalista que es bastante elegante. Es conocido por ofrecer contenido de calidad y brindar una alta definición superior.

Wistia es otra opción popular entre los especialistas en marketing. Proporciona funciones avanzadas como mapas de calor de video que muestran qué partes de un video se han visto, omitido y vuelto a mirar.

En última instancia, el equipo de UHK decidió que Vimeo satisfizo mejor nuestras necesidades. Aquí está nuestro trailer de la página de destino: Ultimate Hacking Keyboard

También vale la pena señalar que nos metimos en la Interfaz de programación de aplicaciones de Vimeo (API) para ayudar a que nuestro video sea mejor capturado. la atención de los visitantes de la página de aterrizaje. Usando API de JavaScript de Vimeo, hicimos que los botones “Quiero uno” en nuestro sitio pulsen tres veces seguidas después de que termine nuestro tráiler. Si se usa correctamente, pequeños ajustes como este pueden aumentar las tasas de conversión de la página de destino.

Crear una experiencia inmersiva con contenido 3D

En ocasiones, es importante proporcionar a los visitantes de la página de destino una experiencia inmersiva. Queríamos que nuestros visitantes pudieran explorar el último teclado de piratería en 3D, por lo que tuvimos que investigar los servicios basados ​​en WebGL creados específicamente para este propósito.

Sketchfab es el servicio más popular basado en WebGL. Es fácil de dominar, proporciona una variedad de configuraciones visuales y se integra en una amplia gama de servicios de alojamiento populares.

[P3d.in] (http://p3d.in/) es un servicio simple de WebGL enfocado en la facilidad de uso, pero tiene soporte limitado para ciertas texturas de alta resolución.

Después de una cuidadosa consideración, elegimos Sketchfab. Así es como luce el Ultimate Hacking Keyboard en 3D.

Visualizar problemas y soluciones con animaciones 2D

Una de las principales ventajas del Ultimate Hacking Keyboard es que reduce drásticamente el movimiento de la mano. El equipo quería visualizar esto en nuestra página de inicio mostrando una animación del UHK trabajando lado a lado con un teclado normal. Implementar esto no fue tan simple como parece.

Usar un video incrustado era como exagerar, y también requeriría el trabajo adicional de renderizado. Los GIF animados no eran una opción debido a su gran tamaño de archivo y la paleta de colores limitada. En última instancia, elegimos trabajar con animaciones SVG en línea porque permitieron que nuestros gráficos de mano se movieran independientemente de otros gráficos en la página.

Crear nuestra animación de la página de aterrizaje de esta manera consumió más tiempo de lo que esperábamos. Tuvimos que navegar por problemas entre navegadores, errores de biblioteca de JavaScript y otros desafíos técnicos imprevistos solo para hacer una animación simple. Sin embargo, el resultado final parece bastante bueno y demostró que bien vale la pena el trabajo extra.

Una palabra para los sabios: ¡Nunca subestimes la cantidad de cosas que pueden salir mal!

Midiendo los Analytics en tiempo real

Google Analytics es genial. Es ampliamente utilizado y fácil de trabajar. Sin embargo, hay mejores candidatos para operaciones en tiempo real.

Chartbeat hace un excelente trabajo enviando notificaciones cuando un sitio web excede ciertos umbrales, especialmente el número de usuarios simultáneos en un sitio. Por ejemplo, el sitio UHK ocasionalmente está vinculado a foros en línea, generando picos de tráfico repentinos. Gracias a Chartbeat, lo sabemos de inmediato y podemos unirnos a la conversación en curso desde el principio.

Mixpanel ayuda a los administradores web a analizar eventos como visitas al sitio, abrir un diálogo de suscripción y confirmar una suscripción. También puede crear embudos a partir de estos eventos y visualizar las tasas de conversión, haciendo que los números sean procesables.

Clicky brinda una asombrosa función de mapa de calor que revela dónde los visitantes hacen clic en un sitio. En función de los resultados, se pueden realizar mejoras en el diseño o el contenido de un sitio para lograr mejores resultados.

HotJar permite a los propietarios de sitios web registrar las interacciones de sus visitantes guardando cada acción del mouse y del teclado y convirtiéndolos en videos.

Cada uno de estos servicios tiene características y beneficios únicos, pero todos brindan comentarios valiosos en el momento sobre la actividad de los visitantes de un sitio web. Depende de las empresas individuales determinar qué tipo de información es más valiosa para fines de comercialización.

Registrar errores y prevenir dolores de cabeza innecesarios

Los sitios web son cada vez más dependientes de JavaScript, tanto que las características críticas del sitio a menudo dependen de él. Por ejemplo, el cuadro de diálogo de suscripción en la página de inicio de Ultimate Hacking Keyboard se desencadena por código JavaScript.

Al implementar la función de suscripción, la probamos en los principales navegadores y confiamos en que habíamos hecho todo lo que necesitábamos. Más tarde, sin embargo, recibimos un correo electrónico de un visitante quejándose de que la función de suscripción a la página de inicio no funcionaba.

Resultó que el visitante en cuestión usaba Adblock Plus en su modo más estricto, que bloqueaba el script de análisis Clicky. A diferencia de otros servicios de análisis, el código de inserción de Clicky no era flexible a este respecto, por lo que al registrar la acción de suscripción y hacer referencia al objeto Clicky, el código generó un error.

Después de este incidente, pensamos cuidadosamente sobre cómo evitar situaciones similares en el futuro. Se le ocurrió al equipo que deberíamos usar el controlador de eventos window.onerror global para capturar y registrar dichos errores. Luego buscamos servicios de registro adecuados y terminamos eligiendo Errorception.

Errorception es increíble porque hace un trabajo y lo hace muy bien: encuentra errores de JavaScript. Su interfaz de usuario es minimalista y funcional, el soporte es excelente y permite al administrador del sitio ver los errores individuales e investigar los rastros de pila. Lo mejor de todo es que proporciona un verdadero beneficio para tu dinero.

Desde la integración de Errorception, hemos resuelto aproximadamente una docena de errores, algunos de los cuales eran improbables e inesperados. Por ejemplo, una vez recibimos un error relacionado con localStorage y descubrimos que cuando Safari está en modo de navegación privada, localStorage.setItem () da como resultado un error.

Es imposible dar cuenta de cada caso de error atípico, por lo que el registro es una excelente forma de capturar fallas antes de que se conviertan en grandes dolores de cabeza.

Diseña un proceso de compilación de bajo mantenimiento

Inicialmente, la página de índice UHK comenzó como una única página HTML alojada en WordPress, y contenía todo el código CSS, HTML y JavaScript. Al principio, esta era una solución factible, pero a medida que la página crecía, se convirtió en una carga de mantenimiento, y se necesitaba un enfoque más modular.

¿Nuestra solución? Primero, dividimos el código CSS, HTML y JavaScript en varios archivos separados. Luego, convertimos los archivos CSS en menos archivos para facilitar aún más el mantenimiento. Finalmente, ideamos un proceso de compilación para ensamblar todos nuestros pequeños archivos.

Optimizar siempre para el rendimiento

El equipo de UHK sabe por experiencia que el rendimiento del sitio web es crucial, como el momento en que nuestra página de destino fue Slashdotted y recibimos 260 visitantes simultáneamente. Afortunadamente, nuestros $20 por mes del Linode VPS funcionó como un campeón, pero esto requirió más que suerte ciega, así que aquí hay un par de consejos para mejorar el rendimiento:

• La carga lenta de la imagen es tu amiga, especialmente si tu página, como la nuestra, contiene muchas imágenes. Estamos utilizando el plugin WordPress Unveil Lazy Load.

• También puedes cargar activos perezosos. Si una sección de una página depende de una secuencia de comandos adicional, es posible cargarla lentamente cuando se encuentre dentro de la ventana gráfica. Comprueba la visibilidad de la ventana gráfica con el jQuery inview plugin, y cargue la secuencia de comandos con jQuery.getScript () o cualquier otro gestor de scripts.

El diseño de la página de destino es una disciplina de diseño vital

Hemos abordado algunos problemas de landing page design en esta publicación, así que resumiremos los puntos más importantes:

• Ve más allá del contenido basado en texto e incluya medios enriquecidos como videos, modelos 3D y animaciones 2D. Este tipo de contenido hace que una página de destino sea más atractiva y anima a los visitantes a compartirla con otros.
• Utiliza el análisis en tiempo real para que pueda reaccionar rápidamente a los picos de tráfico repentinos y unirse a la conversación en curso.
• Siempre registra errores. Hay muchas cosas que pueden (y van a) salir mal, por lo que es importante hacer un seguimiento.
• Optimiza el rendimiento para que su sitio se mantenga actualizado incluso bajo las mayores cargas de tráfico.

Al igual que con cada disciplina de diseño, el diseño de la página de aterrizaje requiere un compromiso continuo para aprender sobre nuevas herramientas, técnicas y procesos. La tecnología y los gustos inevitablemente evolucionan: la vanguardia de hoy es la reliquia del mañana.

Afortunadamente, el diseño de la página de aterrizaje que se comunica claramente y cautiva a una audiencia no depende por completo de la tecnología. Los diseñadores experimentados saben cómo incorporar las últimas herramientas, pero su proceso de diseño se basa principalmente en hacer las preguntas correctas y navegar hábilmente los problemas que amenazan con descarrilar un proyecto.

En última instancia, una página de destino atractiva debe ser una parte esencial del plan de marketing de cualquier nueva marca o producto. En nuestro mundo impulsado por la web, una página de destino bien diseñada tiene la capacidad de generar seguidores, generar rumores e incrementar las ventas, todas las cuales son vitales para la prosperidad en curso de una empresa en alza.