Diseña una Elegante Página de Aterrizaje de 'Registro de Gratitud' con Photoshop

En este tutorial te guiaré en el proceso de diseñar una página de aterrizaje elegante para el "registro de gratitud" de un servicioi ficticio. Comenzaremos totalmente desde cero, elaborando el diseño con Adobe Photoshop en poco tiempo. Utilizaremos algunas técnicas básicas e intermedias para crear este diseño con la conversión en mente. ¡Comencemos!

Elementos del Tutorial

Para poder seguir necesitarás algunos elementos (gratuitos):

• Relajándose en el sol foto de Skitterphoto
• Fuente PT Serif de Font Squirrel
• Fuente Playfair Display de Font Squirrel
• Fuente Source Sans Pro de Font Squirrel
• Avatars de usuarios de User Inter Faces

Alistando el Documento

Paso 1

Comienza por crear un nuevo documento de Photoshop (Archivo > Nuevo...) utilizando la configuración que se muestra a continuación. Eres libre de utilizar un lienzo con las dimensiones que prefieras: la web no es de un ancho fijo, después de todo.

Paso 2

Vamos a establecer algunas guías para que nuestro diseño tenga espacio suficiente y luzca equilibrado. No siempre utilizo una cuadrícula predefinida, pero establecer algunas pautas asegurarán pulcritud y ayudarán a definir el ancho de nuestra página web. Ve a Ver > Guía Nueva... y establece algunas líneas guías. Generalmente elijo 1000px como el ancho de la página web y añado algunas líneas guía desde las esquinas para que tenga espacio para respirar.

Nota: Las líneas guía utilizadas para este tutorial son: vertical en 200px, 500px, 700px, 900px y 1200px.

Consejo: También puedes usar el plugin GuideGuide de Photoshop para hacer este proceso aún más rápido.

Paso 3

Pegándote a la etiqueta de Photoshop de mantener las cosas organizadas y, por lo tanto, fáciles para navegar y editar. Vamos a crear tres grupos de capas llamados Cabecera, Contenido y Pie de Página. Para crear grupos ve a Capa > Nueva > Grupo... y dale a cada una un título tal como se ha mencionado. Para la rápida creación de un grupo sólo haz clic en el icono carpeta.

Diseñando el Área del Encabezado

El encabezado o zona "sobre el pliegue" (donde quiera que esté en estos días) juega un papel muy importante en atraer a los usuarios y garantizar que los visitantes se queden en el sitio web. Para este diseño de página de aterrizaje utilizo una toma de dos personas sentadas en un banco; una de ellas sosteniendo las manos en el aire describiendo emociones positivas y de felicidad.

Paso 1

Vamos a crear primero el fondo del blog. Dentro del grupo de "Encabezado" dibuja una forma rectángular de color negro #000000 usando la herramienta Rectángulo (U). En mi caso dibujé un rectángulo de 1400x728px de tamaño y lo coloqué en la parte superior del documento.

Ahora descarga la foto Relajándose en el sol, arrástrala hasta el documento de Photoshop y colócala encima de la capa del rectángulo. Cambia el nombre de la capa de la imagen a algo que reconozcas más tarde, en mi caso he utilizado IMG. Después mantén pulsada la tecla Alt y el ratón sobre la capa de la foto hasta que aparezca una pequeña flecha apuntando hacia abajo, después suéltalo. Acabas de crear una Máscara de Recorte. Finalmente reduce la capa IMG a 70% de Opacidad para que sea más legible el texto que pondremos en la parte superior.

Ahora pulsa CMD + T y cámbiale el tamaño a la foto para que se ajuste a tus necesidades.

Consejo: Mantén pulsada la tecla Shift para transformarla proporcionalmente.

Paso 2

Ahora vamos a crear una navegación global para nuestra página de aterrizaje para que la gente pueda navegar a través de la web.

Crea un nuevo grupo llamado "Navegación", ubícalo dentro del grupo "Cabecera". Después selecciona la herramienta Rectángulo (U) y dibuja una forma rectangular blanca entre la primera y la última línea guía vertical. Hazla con alrededor de 60px de altura para que los elementos de la  navegación tengan algo de espacio para respirar y verse limpias. Finalmente muévela 30px hacia abajo desde la parte superior para que podamos tener este efecto flotante que queda muy bien en nuestra imagen.

Paso 3

Ahora ubiquemos un logo y algunos enlaces para hacer que nuestra barra de navegación parezca algo que la gente puede utilizar. Para el logo simplemente he escrito "Grttd" utilizando la fuente Playfair Display (Bold Italic) a 26px de tamaño y color gris oscuro #0e0e0e.

Para los enlaces de navegación he utilizado la fuente Sans Pro en 14px con una distancia extendida entre las letras. Para el llamado a la acción principal "Registrarse" he usado el color negro y el color verde #96c218. Hemos terminado con la "Navegación", así que minimízala haciendo clic en el icono de triángulo pequeño junto al nombre del grupo.

Paso 4

Vamos a escribir un mensaje inspirador que acompañe a la imagen y a la idea global de la página web. Usaré una fuente enorme en negrita con un subtítulo que explique el concepto más detalladamente.

Ya que tenemos un fondo bastante oscuro para la zona superior es buena idea usar un texto claro para crear contraste y asegurar la legibilidad. He utilizado una letra blanca #FFFFFF con fuente Sans Pro (Black) en 80px con una altura de línea de 86px. Colócala sobre 120px debajo de la barra de navegación para que el mensaje tenga suficiente espacio alrededor para que sea percibido como importante.

Ahora vamos a ubicar el subtítulo que aclara el concepto y responde algunas preguntas de los visitantes . Para crear una buena combinación tipográfica vamos a mezclar el titular principal sans serif con la fuente serif elegante que hemos utilizado previamente para el logo.

Para más combinaciones de fuentes inspiradoras revisa: El Proyecto tipográfico de Google Web Fonts y Una Guía de Combinación de Fuentes para Principiantes.

Para este tutorial he utilizado el color blanco #FFFFFF y la fuente Playfair Display (Italic) de 26px y la he colocado 40px por debajo del título principal.

Paso 5

Vamos a agregar algo más interesante para que el visitante pueda ver el beneficio de permanecer en el sitio Web. Un registro de gratitud se basa en la grabación de las cosas por las que estás agradecido, así que alguna prueba social sería una buena idea, mostrarle a la gente que alguien lo está utilizando y mostrar algo más deseable como una racha.

Crea un nuevo grupo llamado "Ejemplo", luego selecciona la Herramienta Elipse (U) y, manteniendo pulsada la tecla Shift, dibuja un círculo. En mi caso es de 60 x 60px. Después de eso pon la cara de alguien en la parte superior de la capa del círculo y, manteniendo pulsada la tecla Alt, pasa el ratón sobre la capa hasta que aparezca una pequeña flecha apuntando hacia abajo, luego suéltalo para crear una Máscara de Recorte. Ahora puedes cambiarle el tamaño a la imagen si es necesario pulsando CMD + T.

Para este tutorial estoy usando una cara al azar de User Inter Faces.

Consejo Profesional: Mantén pulsada la tecla Shift para dibujar/cambiar el tamaño de forma proporcional.

Ahora tenemos que poner un indicador de registros consecutivos. Vamos a crear otra forma circular, esta vez más pequeña y colocaremos un número en su interior. Simple, pero comprensible, y hace el trabajo. Para el color del círculo he reutilizado el color verde previamente utilizado #96c218. En mi caso su tamaño es de 30x30px y el texto interior es blanco #FFFFFF con una fuente Sans Pro (Bold) de 14px .

Por último vamos a darle un nombre a nuestra persona y aclarar lo que este número representa. Escoje la Herramienta Texto Horizontal (T) e introduce un nombre y una longitud de racha. En mi caso he utilizado PT Serif (Bold Italic) a 16px para el nombre y la fuente Sans Pro (Regular) a 13px para la racha. Asegúrate de utilizar una altura de línea grande, lo suficiente para que los elementos tengan espacio para respirar.

Genial, una última cosa antes de pasar al área del contenido. Necesitamos una fuerte Llamada a la Acción (CTA) para que el usuario pueda hacer algo después de haber visto las imágenes y leer los titulares. Crea un nuevo grupo llamado "CTA", establece el color del primer plano en blanco #FFFFFF y agarra la Herramienta Rectángulo (T). Después de eso dibuja una forma rectangular, en mi caso su tamaño es de 280x60px. Observa la consistencia de la altura previamente utilizada para la barra de navegación.

Después de eso, ingresa algún texto persuasivo para el botón. Yo he utilizado "COMIENZA A VIVIR →", el color que ya se ha utilizado previamente en la barra de navegación es gris oscuro #0e0e0e, la fuente Sans Pro (Semibold) de 16px con una tracción a 140.

Paso 6

Ahora hemos terminado con el "encabezado". Vamos a abrir el grupo del "Contenido" y a crear otro llamado "Descripción". Pondremos un titular fuerte seguido de una descripción mas detallada de toda la web. Es importante repetir la Llamada a la Acción (CTA) para que el usuario no tenga que pensar demasiado, pero sea todavía capaz de tomar la acción cuando esté listo.

Elije la Herramienta Texto Horizontal (T) y elije una fuente potente para su titular. En mi caso estoy usando la bella y elegante, aunque de apariencia autoritaria Playfair Display (Black) a 60px. Asegúrate de darle a esta bestia un montón de espacio para respirar, yo la moví 100px hacia abajo de la imagen de cabecera.

Ahora usando la misma Herramienta Texto Horizontal (T) haz un rectángulo haciendo clic y arrastrándolo. En mi caso es una caja de 600x140px de tamaño donde puse algunos textos persuasivos para hacer que los usuarios hagan clic en el CTA. Para establecer una jerarquía visual clara el texto de la descripción debe ser menor y no tan pesado. En mi ejemplo usé gris #666666, PT Serif (Regular) a 18px, y la altura de línea a 28px. El elemento entero se mueve hacia abajo por 50px del titular esto para dar un aspecto limpio y profesional.

Después de leer el texto, nuestro visitante puede ser convencido de probarlo, por lo que conviene repetir una vez más el botón de la llamada a la acción (CTA). Abre el grupo de la "Cabecera", encuentra el "CTA" y duplícalo presionando CMD + J. Después de eso, muévelo dentro del grupo "Descripción" y cambia el color del botón a nuestro verde previamente utilizado #96c218 y para el texto utiliza el blanco #FFFFFF. Bájalo 50px del texto para tener un espaciamiento constante.

Se ve mucho mejor. Vamos a poner una línea simple para separar visualmente el bloque de la descripción del otro. Elije la Herramienta Línea (U), establece el Peso en 1px y traza una línea horizontal a través de las primera y última líneas guía verticales. En mi caso he utilizado un color gris claro #e6e6e6 que no es demasiado fuerte, pero hace el trabajo perfectamente.

Consejo Profesional: Mantén pulsada la tecla Shift para dibujar una línea perfectamente recta.

Paso 7

Ahora que hemos terminado con el bloque de la "Descripción" es el momento de pasar al siguiente. Crea un nuevo grupo llamado "Inspírate". Después de duplicar las capas del titular y la descripción del grupo de la "Descripción" y moverlas al grupo de "Inspírate". Edita las capas y cambia el texto. Abajo está mi ejemplo:

Ahora desplázate hasta el grupo del "Encabezado" y encuentra el grupo de «Ejemplo». Duplica todo el grupo pulsando CMD + J y muévelo al grupo "Inspírate". Reutilizaremos nuestro ejemplo de la parte superior y mostraremos algunas historias de los usuarios para inspirar a nuestros visitantes a tomar acción.

Cambia el nombre del grupo a "Historia" y deshazte del indicador verde. También, necesitarás cambiar el color del texto a gris oscuro #0e0e0e ya que es legible sobre un fondo blanco. Utiliza otra imagen para el avatar y escribe la posición y la ubicación de la persona en un gris más ligero #666666 para que gente pueda relacionarse más con esa persona.

Después de eso, crea un cuadro de texto de alrededor de 300x160px de tamaño utilizando la Herramienta Texto Horizontal (T) y escribe un ejemplo de actualización de registro de gratitud. He usado la fuente PT Serif (Italic) a 16px con el color gris oscuro utilizado antes #666666.

Ahora duplica dos veces el grupo de "Historia" y cambia los avatares, los nombres y las descripciones. Pon estos dos grupos en orden horizontal dejando espacios iguales entre cada uno y una línea después de todos estos grupos como antes.

Paso 8

Ahora, como ya estamos listos con el grupo "Inspírate", pasemos a la última sección de nuestra página de aterrizaje. El último Llamado a la Acción (con algunos detalles más) animará a los visitantes a registrarse introduciendo una dirección de correo electrónico.

Crea un nuevo grupo llamado "Email" y navega al grupo anterior para encontrar una capa de titular y luego duplícala presionando CMD + J y muévela al grupo recién creado. Cambia el título a algo alentador y muévelo 100px debajo de la línea para mantener la coherencia.

¡Excelente! Ahora establece el color del primer plano en un gris ligero #f5f5f5 y elije la Herramienta Rectángulo (U) para dibujar una caja para un campo de correo electrónico. Debe ser la de la misma altura que nuestro botón principal de Llamado a la Acción (CTA), aunque el ancho no importa mucho. En mi caso es de 430x60px. Luego toma la Herramienta Texto Horizontal (T) y escribe "Escribe tu Correo Electrónico" o algo similar, asegúrate de utilizar un color oscuro ya que es fácilmente legible.

Ahora dirígete al grupo de la "Descripción" en nuestro panel de capas y busca el grupo "CTA". Duplícalo presionando CMD + J y muévelo al grupo "Correo electrónico". Coloca el botón justo al lado del campo del correo electrónico y centra el elemento entero.

Paso 9

¡El fin está cerca! Vamos a minimizar todos los grupos y a abrir el grupo "Pie de Página". Establece el color del primer plano en un gris oscuro #2d2d2d y, utilizando la Herramienta Rectángulo (U), dibuja un rectángulo ancho que esté sobre los 230px de altura. Este será nuestro fondo de pie de página y se distinguirá del área del contenido gracias a su contraste.

Sigue adelante y encuentra el grupo "Navegación" y la capa del logo, duplícalo presionando CMD + J y mueve el grupo a "Footer". Cambia el color blanco #FFFFFF y muévelo 50px por debajo del borde del rectángulo del pie de página.

Por último, elije la Herramienta Texto Horizontal (T) y pon algunos enlaces que los usuarios puedan encontrar útiles. Asegúrate de agrupar tus enlaces para que sean fácilmente asociados. En mi caso he utilizado la fuente Source Sans Pro (Semibold) a 16px para el grupo de títulos y PT Serif (Regular) a 14px para los títulos de enlace.

¡Felicidades!

¡Eso es todo! Hemos terminado con el diseño, ahora revisa las capas, elimina las innecesarias y entrégalo a tu desarrollador o incluso mejor prográmalo tú mismo. He abordado algunas técnicas básicas y he demostrado mi flujo de trabajo para el diseño de sitios web, espero que hayas aprendido algo.

Me encantaría conocer tus comentarios y ver los resultados de este tutorial!

Recursos Adicionales

Si eres nuevo en el diseño de páginas de aterrizaje, te recomendamos una serie de tutoriales de introducción para que vayas rápido con lo básico:

• Principios del Diseño de una Página de Aterrizaje: Tarea Abierta -Acompañamiento al curso en Tuts + por Adi Purdila
• Guía de Inicio de la Conversión Exitosa por Ian Yates
  
• Consejos para el Diseño de Landing Pages de Nicho por Keir Whitaker
  

Si estás interesado en obtener ayuda con el diseño de tu Landing Page, Envato Studio tiene una gran colección de servicios de Diseño de Páginas de Aterrizaje y Desarrollo que podrías querer explorar. También podrías echarle un vistazo a los Temas para Páginas de Aterrizaje en Envato Market.