En este tutorial te guiaré a través del proceso de diseño de una página de inicio de una aplicación sencilla y orientada a la conversión. Utilizaremos la aplicación Android de Tuts+ para la demostración, haciendo hincapié en sus características y beneficios, y empleando llamadas a la acción en todo momento.
Lo esencial de la alta conversión
A la hora de diseñar las páginas de aterrizaje hay algunas cosas que hay que hacer bien para disfrutar de altas tasas de conversión.
Según el growth hacker Neil Patel, para tener una página de aterrizaje que aplaste a la competencia necesitas:
Un titular de primera línea
Subtítulos persuasivos
Imágenes
Explicación
Propuesta de valor o beneficios
Flujo lógico
Testimonios fiables
Potente llamada a la acción
Vamos a implementar todos los elementos anteriores para que nuestra página de inicio sea lo más efectiva posible.
Modelo AIDA
Te recomiendo encarecidamente que eches un vistazo a Employing AIDA Principles in Web Design de Shaun Cronin. AIDA son las siglas de Atención, Interés, Deseo y Acción; y estos principios pueden aplicarse a diferentes situaciones que implican la venta de productos o servicios.
Los estudios demuestran que a la gente no le importa desplazarse, así que una vez que hayas creado un interés inicial en la parte superior de la página no deberías preocuparte por alargar tu página de inicio. Esto es necesario para contar una gran historia y añadir elementos persuasivos.
Pruebas A/B
Las páginas de inicio efectivas no pueden diseñarse simplemente una vez y funcionar bien. Hay que seguir probando con varias combinaciones de textos, colores, llamadas a la acción y otros elementos para conseguir los mejores resultados.
Comienza creando un nuevo documento de Photoshop (Archivo > Nuevo...) con la configuración que se muestra a continuación. Eres libre de utilizar un lienzo de las dimensiones que prefieras.
Paso 2
Establezcamos algunas guías para que nuestro diseño tenga suficiente espacio y parezca equilibrado. Establecer algunas pautas garantizará la pulcritud y ayudará a definir la anchura de nuestro sitio web a efectos de este diseño. Ve a Ver > Nueva Guía... y establece algunas pautas. Suelo elegir 1000px como punto de partida y añado algunas directrices de las esquinas para que tenga espacio para respirar.
Nota: Directrices utilizadas para este tutorial: vertical a 100px, 600px y 1100px.
Consejo: También puedes utilizar el plugin GuideGuide de Photoshop para hacer este proceso aún más rápido.
Diseño del área de la cabecera
La cabecera o zona "por encima del pliegue" desempeña un papel muy importante a la hora de captar a los usuarios y garantizar que los visitantes permanezcan en el sitio web.
La función principal de nuestra página de inicio de la aplicación es convencer a los visitantes de que se descarguen la aplicación. Por eso nos centraremos en las ventajas de probar la aplicación y facilitaremos su descarga.
Paso 1
Primero vamos a crear un grupo llamado "Cabecera" haciendo clic en Capa > Nuevo > Grupo... o pulsando el pequeño icono de la parte inferior del panel de capas. Después de eso, coge la Herramienta de Tipo Horizontal (T), elige la fuente PT Sans (Bold) de 18px de tamaño, establece el color a negro #000000 e introduce el nombre de tu aplicación para que sirva de logotipo, colócalo en la esquina superior izquierda justo al lado de la primera directriz vertical. Dale un poco de espacio por encima para que no parezca estrecho.
Paso 2
Vamos a crear un botón de llamada a la acción que vamos a reutilizar en todo nuestro diseño para asegurarnos de que los visitantes actúan. Crea un nuevo grupo llamado "CTA btn" y escoge la Herramienta Rectángulo Redondeado (U), establece el Radio a 2px, cambia el color de primer plano a verde lima #17e594 y dibuja una forma rectangular de tamaño 206x38px.
Ahora haz clic con el botón derecho del ratón en la capa, selecciona Opciones de fusión... y marca la opción Trazo. Después aplicar un verde más oscuro #09ba74.
Elige de nuevo la Herramienta de Tipo Horizontal (T) e introduce la copia para nuestro botón. He utilizado PT Sans (Bold) 12px y el color blanco #FFFFFF.
Paso 3
Ahora escoge la Herramienta Rectángulo (T) y dibuja un rectángulo de 1200x600px (cualquier color) y colócalo justo debajo de nuestra navegación superior mínima. He dejado un espacio de 25px entre el logo y la forma como hice para el logo de arriba para que sea consistente.
Ahora coge una foto del Toolkit de Unsplash y colócala encima de la capa de la forma del rectángulo. A continuación, mantén pulsada la tecla Alt y pasa el ratón por encima de la capa de la imagen hasta que veas una pequeña flecha apuntando hacia abajo, entonces suelta el ratón para crear una máscara de recorte para que la imagen solo sea visible en el área del rectángulo.
Pulsa CMD+T para cambiar el tamaño de la foto, asegurándote de que mantienes pulsada la tecla Shift para que el tamaño sea proporcional.
Paso 4
Vamos a añadir una capa de filtro de color gris para que nuestro fondo esté listo para la copia y la captura de pantalla de la aplicación.
Cambia el color de primer plano a gris oscuro #222325 y crea una nueva capa, colócala encima de la capa de la foto y una vez más crea una máscara de recorte. Luego presiona Alt+Backspace para rellenar la capa con gris. Finalmente, reduce la Opacidad de la capa al 80%.
Paso 5
Coge de nuevo la Herramienta Tipográfica Horizontal (T), cambia el color a blanco #FFFFFF y usando PT Sans (Bold) de 48px de tamaño introduce el mensaje principal. Asegúrate de darle mucho espacio por encima.
Paso 6
Ahora reduce el tamaño de la fuente a 21px, selecciona el peso de la fuente Normal, introduce un mensaje más descriptivo y colócalo debajo del mensaje principal. Para que las líneas parezcan equilibradas y fáciles de leer, aumenta la altura de las líneas a un mínimo de 30px. Coloca la descripción debajo del titular principal, en mi caso la moví 40px hacia abajo.
Paso 7
Repitamos nuestro botón de llamada a la acción (CTA) para que el visitante tenga claro qué debe hacer después de leer el texto. Busca el grupo "CTA btn" y duplícalo pulsando CMD+J, después colócalo debajo del mensaje secundario.
Paso 8
Ya hemos terminado con el texto y la llamada a la acción principal, así que vamos a poner una vista previa de la aplicación para mostrar su aspecto antes de que la gente decida descargarla.
Descarga gratis la maqueta del Samsung Galaxy S5 de Martin Adamko y colócala en tu documento. Después, mantén pulsada la tecla CMD, haz clic en todas las capas que pertenezcan a esa maqueta y haz clic con el botón derecho para elegir Convertir en objeto inteligente. Usa CMD+T para cambiar su tamaño y moverlo a la derecha de nuestra copia y descripción principal.
Después de eso, coloca la pantalla de tu aplicación en la maqueta del smartphone pulsando sobre la capa de objetos inteligentes y guardándola. He utilizado una captura de pantalla de la nueva aplicación Android de Tuts+ Courses.
Diseño del área de beneficios
Hemos terminado con la cabecera. Minimiza el grupo y crea otro llamado "Beneficios".
Paso 1
Después de eso, elige la Herramienta de Tipo Horizontal (T) de nuevo, cambia el color al mismo gris oscuro #222325 que usamos para el filtro (haz que tu diseño sea consistente y cohesivo en lugar de traer más colores) y usando PT Sans (Bold) 30px introduce una declaración fuerte y colócala debajo del área de la cabecera, dejando mucho espacio por encima.
Paso 2
Ahora tenemos la oportunidad de convencer a nuestros visitantes de que merece la pena descargar nuestra aplicación. Piensa en los beneficios más que en las características para que la gente pueda visualizarse usándolo. Cambia el color a un sutil azul gris #6a7588 e introduce un par de líneas explicando por qué la gente debería usar tu aplicación. He optado por PT Sans (Regular) 21px con una altura de línea de 32px, la misma configuración que se utiliza para el mensaje secundario en el área de la cabecera.
Presta atención al espacio entre los bloques de texto, deja suficiente espacio para dar esa sensación de ligereza a tu diseño.
Paso 3
Una vez más, repitamos el botón de llamada a la acción (CTA) para que los visitantes que no estaban convencidos antes puedan pasar a la acción justo después de leer tu copia de beneficios. Duplica el grupo "CTA btn" pulsando CMD+J y colócalo debajo de la copia de beneficios. Muévelo al grupo de "Beneficios" para que tu documento esté más organizado.
Diseño del área de características
Hemos terminado con el área de beneficios, así que minimiza el grupo y crea uno nuevo llamado "Características". Aquí destacaremos algunas de las características de la aplicación para que los visitantes que quieran saber más y ya estén interesados puedan conocerla mejor.
Paso 1
Cambia el color de primer plano a gris claro #fbfbfb, usaremos un color de fondo diferente para la sección de Características para separarla del resto. A continuación, elige la Herramienta Rectángulo (U) y dibuja una forma de tamaño 1200x700px que servirá de fondo. Asegúrate de dar espacio a la sección de arriba.
Paso 2
Para separar aún más el área de Características, pongamos líneas horizontales de 1px entre los fondos. Escoge la Herramienta Línea (U), establece el Peso a 1px y cambia el color a un gris más oscuro #eeeeee.
Consejo: mantén pulsada la tecla Shift para dibujar una línea perfectamente horizontal.
Paso 3
Abre el grupo "Beneficios" y encuentra la capa del titular, pulsa CMD+J para duplicarla y muévela al grupo "Características". Edítalo para que se ajuste a tus necesidades y colócalo dentro del fondo gris previamente creado.
Paso 4
Crearemos tres bloques de características con un icono, un titular y una breve descripción. Crea un nuevo grupo y llámalo "Característica 1" o algo más descriptivo. Dirígete a Iconfinder y descarga un icono de usuario de 48x48 px. Pulsa el botón derecho del ratón sobre su nombre de capa y aplica las siguientes opciones.
Puedes notar que estamos imitando el estilo del botón para que todo sea consistente.
Paso 5
Una vez más, duplica la capa del titular, colócala dentro del grupo "Característica 1" y utilizando la Herramienta Tipográfica Horizontal (T) reduce su tamaño de fuente a 16px y la altura de línea a 22px.
Paso 6
Utilizando la misma Herramienta de Escritura horizontal (T), escribe tres líneas cortas que expliquen tu característica. Asegúrate de cambiar el color del tipo al azul gris usado anteriormente #6a7588. Colócalo debajo del icono y del titular.
Paso 7
Ahora minimiza el grupo y duplícalo dos veces pulsando CMD+J. Después, personaliza los grupos duplicados para que se ajusten a tu aplicación. Para este tutorial he utilizado iconos de marcadores y relojes de Iconfinder. Asegúrate de dejar suficiente espacio entre los bloques para que parezca equilibrado.
Paso 8
Cuanto más se muestre el aspecto real del producto, mejor, utilizaremos una perspectiva diferente de nuestra maqueta de smartphone. He volteado la maqueta del Samsung Galaxy S5 utilizada anteriormente y he sustituido su captura de pantalla encontrada en Google Play. Haz clic con el botón derecho del ratón en la capa de la maqueta en la parte superior y selecciona Nuevo objeto inteligente a través de copia para crear una copia independiente.
Para personalizar la maqueta del smartphone, haz clic dos veces en la miniatura de la capa y coloca allí la pantalla de tu aplicación.
Diseño del área de testimonios
Añadiremos algo de credibilidad social a nuestra aplicación mostrando algunos testimonios de usuarios de la misma.
Paso 1
Minimiza todos los grupos y crea uno nuevo llamado "Testimonios". Introduce un titular de sección como hicimos antes y colócalo debajo del fondo del grupo "Características" dejando un espacio consistente.
Paso 2
Ahora abre el grupo "Características", duplica una de ellas y muévela dentro del grupo "Testimonios". Reutilizaremos el grupo para nuestros testimonios. Edita el texto, cambiando el titular por el nombre de una persona y la descripción por el texto del testimonio.
Elimina el icono y, con la Herramienta Elipse (U), dibuja una forma circular. A continuación, coloca la foto de perfil de la persona sobre la capa de la forma del círculo y crea una máscara de recorte. He utilizado una cara de User Inter Faces.
Paso 3
Por último, duplica el grupo de testimonios recién creado y personalízalo con diferentes nombres, testimonios y fotos de perfil.
Diseño de la zona de pie de página
Minimiza el grupo "Testimonios" y crea otro llamado "Pie de página". Aquí pondremos un botón final de llamada a la acción (CTA) y algunos enlaces a páginas interiores del sitio web, ya que la mayoría de la gente se desplaza hacia abajo para buscar la arquitectura del sitio.
Paso 1
Dirígete al grupo "Cabecera" y, manteniendo pulsada la tecla Shift, elige las capas de forma rectangular y filtro gris. Después pulsa CMD+J para duplicarlos y moverlos a tu nuevo grupo "Pie de página". A continuación, coloca una foto de tu elección entre la forma del rectángulo y las capas de filtro gris creando una máscara de recorte.
Paso 2
Añade otro titular que anime a la gente a actuar y descargar tu aplicación. Hazlo blanco #FFFFFF para que sea muy visible sobre el fondo más oscuro. A continuación, duplica el botón de llamada a la acción (CTA) y colócalo debajo del titular.
Paso 3
Elige de nuevo la Herramienta Tipográfica Horizontal (T) e introduce algunos enlaces de tu página web. He utilizado el color blanco #FFFFFFPT Sans (Regular) 16px y una altura de línea de 29px.
Paso 4
Duplica tu capa de texto y personalízala para que se ajuste a tu aplicación. A continuación, coloca una línea de copyright en la parte inferior del pie de página, dejando suficiente espacio por encima y por debajo.
¡Felicitaciones!
¡Eso es todo! Ya hemos terminado con el diseño del tema, ahora revisa las capas de tu documento, elimina las innecesarias y entrégalo a tu desarrollador o, mejor aún, ¡codifícalo tú mismo!
