Diseño de página de destino: creación de la página de destino definitiva

Una página de aterrizaje 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 los desafíos técnicos, pero cuando llega el momento de promocionar un producto, no somos muy inteligentes.

Pero el marketing es crucial para el éxito de un producto y no debe pasarse por alto. Este fue el desafío cuando diseñé y me preparé para lanzar el teclado más importante 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 destino atractiva, especialmente en los meses previos a nuestra campaña de crowdfunding decisiva. Juntos, nos dispusimos a diseñar una página de destino que capturaría la imaginación, generaría suscriptores y prepararía nuestro producto para un lanzamiento exitoso.

Esta es la historia de la última página de destino para The Ultimate Hacking Keyboard.

Consejo technico. Pasos prácticos hacia adelante.

Una búsqueda en Google de "diseño de página de destino" conduce a docenas de excelentes artículos, cada uno repleto de consejos importantes como:

• "El contenido debería cargarse en un instante".
• “La fotografía debe ser relevante para la audiencia del sitio”.
• e “Incluya un formulario para recopilar 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 página de destino brindará asesoramiento técnico, pero también ofrecerá conocimientos prácticos que ayudarán a los diseñadores y desarrolladores a elegir los servicios de terceros correctos e integrar tecnologías que funcionan entre bastidores.

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

Apunta a la producción y alojamiento de video de alta gama

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 tráiler de la página de destino del Ultimate Hacking Keyboard (UHK) se sometió a doce iteraciones, y cada nueva versión refinó gradualmente cada pequeño detalle. El proceso de diseño fue agotador pero gratificante, y el video del tráiler es la joya de la corona de nuestra página de destino. Diferencia completamente nuestro producto del resto del pack.

Tenga 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 puede pagar; de lo contrario, es posible que su producto se estanque antes de despegar.

Si usted u otro diseñador de su equipo tiene las habilidades y el equipo, puede intentar crear su propio contenido de video, pero mantenga los videos breves y simples. Las producciones demasiado ambiciosas en manos de aficionados rara vez salen 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 2D (para una aplicación o un servicio web), o si se requiere filmación de una cámara de acción en vivo, el proceso presentará diferentes desafíos.

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

YouTube es el líder indiscutible del mercado y sinónimo de video en la web. Es un servicio capaz y una opción razonable, pero su reproductor integrado no es la opción más agradable desde el punto de vista estético.

Vimeo cuenta con un reproductor integrado con un diseño minimalista que es bastante elegante. Es conocido por albergar 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 ver.

Finalmente, el equipo de UHK decidió que Vimeo se adaptaba mejor a nuestras necesidades. Aquí está el tráiler de nuestra página de destino: Ultimate Hacking Keyboard

También vale la pena señalar que nos sumergimos en la interfaz de programación de aplicaciones (API) de Vimeo para ayudar a que nuestro video capte mejor la atención de los visitantes de la página de destino. Usando la API de JavaScript de Vimeo, hicimos que los botones "Quiero uno" en nuestro sitio pulsaran tres veces seguidas después de que finaliza nuestro tráiler. Usados ​​correctamente, pequeños ajustes como este pueden aumentar las tasas de conversión de la página de destino.

Cree una experiencia inmersiva con contenido 3D

A veces es importante proporcionar a los visitantes de la página de destino una experiencia inmersiva. Queríamos que nuestros visitantes pudieran explorar Ultimate Hacking Keyboard en 3D, por lo que tuvimos que investigar los servicios basados ​​en WebGL creados específicamente para este propósito.

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

P3d.in es un servicio WebGL simple 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 se ve Ultimate Hacking Keyboard en 3D.

Visualice 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 destino mostrando una animación del UHK trabajando junto con un teclado normal. Implementar esto no fue tan simple como parece.

Usar un video incrustado se sintió como una exageración, 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 paleta de colores limitada. En última instancia, elegimos trabajar con animaciones SVG en línea porque permitían que los gráficos de nuestras manos se movieran independientemente de otros gráficos en la página.

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

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

Medir análisis 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 gran trabajo al enviar notificaciones cuando un sitio web supera ciertos umbrales, sobre todo la cantidad de usuarios simultáneos en un sitio. Por ejemplo, el sitio de UHK se vincula ocasionalmente en foros en línea, lo que genera picos de tráfico repentinos. Gracias a Chartbeat, lo sabemos de inmediato y podemos unirnos temprano a la conversación en curso.

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, lo que hace que los números sean procesables.

Clicky proporciona una función de mapa de calor increíble que revela dónde hacen clic los visitantes 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 al guardar cada acción del mouse y el teclado y convertirlas en videos.

Cada uno de estos servicios tiene sus propias características y beneficios únicos, pero todos brindan comentarios valiosos en el momento de 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 marketing.

Registre errores y evite dolores de cabeza innecesarios

Los sitios web se están volviendo 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 activa mediante código JavaScript.

Al implementar la función de suscripción, la probamos en los principales navegadores y nos sentimos seguros de que habíamos hecho todo lo necesario. Sin embargo, más tarde recibimos un correo electrónico de un visitante que se quejaba de que la función de suscripción a la página de destino no funcionaba.

Resultó que el visitante en cuestión estaba usando Adblock Plus en su modo más estricto, lo que bloqueó el script de análisis de Clicky. A diferencia de otros servicios de análisis, el código de inserción de Clicky no era resistente en este sentido, 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 detenidamente en cómo evitar situaciones similares en el futuro. Al equipo se le ocurrió que deberíamos usar el controlador de eventos global window.onerror para detectar y registrar dichos errores. Luego buscamos servicios de registro adecuados y terminamos eligiendo Errorception.

Errorception es sorprendente porque hace un trabajo y lo hace extremadamente bien: encontrar errores de JavaScript. Su interfaz de usuario es minimalista y funcional, el soporte es excelente y permite que el administrador del sitio vea errores individuales e investigue los rastros de la pila. Lo mejor de todo es que ofrece una verdadera inversión por su dinero.

Desde que integramos Errorception, hemos resuelto aproximadamente una docena de errores, algunos de los cuales eran poco probables 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() genera un error.

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

Diseñe un proceso de construcción de bajo mantenimiento

Inicialmente, la página de índice de UHK comenzó como una sola 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 archivos Less 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, nuestro Linode VPS de $ 20 por mes 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 diferida de imágenes es tu amiga, especialmente si tu página, como la nuestra, contiene muchas imágenes. Estamos usando el complemento WordPress Unveil Lazy Load.

• También puede cargar activos de forma diferida. Si una sección de una página depende de una secuencia de comandos adicional, es posible cargarla de forma diferida cuando se encuentre dentro de la ventana gráfica. Compruebe la visibilidad de la ventana gráfica con el complemento jQuery inview y cargue la secuencia de comandos con jQuery.getScript() o cualquier otro cargador de secuencias de comandos.

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

Hemos abordado algunos problemas de diseño de la página de destino en esta publicación, así que resumamos los puntos más importantes:

• Vaya 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 alienta a los visitantes a compartir con otros.
• Utilice análisis en tiempo real para que pueda reaccionar rápidamente ante picos repentinos de tráfico y unirse a la conversación en curso.
• Registrar siempre los errores. Hay muchas cosas que pueden (y saldrán) mal, por lo que es importante realizar un seguimiento.
• Optimice el rendimiento para que su sitio se mantenga al día incluso con las cargas de tráfico más altas.

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

Afortunadamente, el diseño de la página de destino que se comunica claramente y cautiva a la audiencia no depende completamente 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 por 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 marca o producto nuevo. En nuestro mundo impulsado por la web, una página de destino bien diseñada tiene la capacidad de generar seguidores, generar rumores y aumentar las ventas, todo lo cual es vital para la prosperidad continua de una empresa en crecimiento.