Proceso creativo de un landing page (Parte 1: el texto)

Hace unas semanas publiqué un artículo donde compartí contigo el proceso de diseño web web que sigo con mis clientes. Esa publicación tuvo una muy buena acogida y eso me ha motivado a compartir nuevamente mi proceso contigo, pero esta vez en tiempo real y con la chance de que puedas participar de manera activa.

¿De qué se trata todo esto?

Dentro de tres semanas (el 9 de septiembre) lanzaré la versión 2.0 de mi curso “Diseño web: HTML y CSS desde cero”, para lo cual necesitaré redactar, diseñar y desarrollar una landing page (o página de aterrizaje), que tendrá la tarea de explicar de qué se trata el curso e invitar al público apropiado a tomar la acción de comprarlo.

Durante estas tres semanas, voy a compartir contigo el proceso de creación de la página de aterrizaje, con tanto detalle como sea posible. Lo haré en tres artículos, en donde cubriré los siguientes procesos:

1. Redacción del texto.
2. Diseño.
3. Maquetado.

Esta es la primera parte de la serie y hablaremos acerca del texto de la página, te contaré el porqué de cada decisión, te mostraré el texto original y, al final, tendrás la posibilidad de compartir tus comentarios y sugerencias para hacer de este landing page algo genial.

Basta de introducción, vamos directo al grano:

¿Por qué partir con el texto?

Me gusta comenzar el proceso de diseño web con la redacción del contenido porque es lo más lógico. En la práctica, tiene varias implicancias:

• Permite priorizar el orden de los elementos desde un principio, lo cual es muy importante, sobre todo en sitios responsive.
• Permite que, al momento de comenzar el diseño como tal, no hayan adivinanzas ni cabos sueltos, ya que se sabe con certeza cuáles serán las piezas que conformarán el layout.
• Permite que la redacción tenga una secuencia lógica, independientemente de los colores, imágenes o íconos que se usen en el diseño, lo cual le da mucha integridad a la página.

Cómo trabajo la redacción

Desde un punto de vista técnico, abro un nuevo documento de Google Docs y comienzo a escribir en él. Uso esta tecnología, ya que me permite compartir el contenido directamente con Melissa, quien cumple el rol de editora. Ella revisa mis textos y corrige lo necesario para que no haya faltas de ortografía o redacción. Google Docs también me permite compartir el documento contigo 🙂 (el link está más abajo).

Aparte de lo técnico, habitualmente cuando entro en modo escritura suelo poner algo de jazz, de preferencia instrumental. Por ejemplo, mientras escribo esto suena Pat Metheny. También suelo apagar mi monitor secundario y poner el navegador a pantalla completa, así puedo estar un buen rato sin distracciones.

Para comenzar con el texto, hago un listado de las ideas que quiero escribir y, una vez que tengo listo el esquema general, comienzo a redactar el contenido real.

Objetivo del texto

Mi objetivo general con el texto de esta página es comunicar directa y claramente de qué se trata el curso, dejando en claro sus tres puntos más relevantes:

• Es un curso que parte desde lo más básico. Como su nombre lo dice: “desde cero”.
• Es un curso que trata muy en profundidad los temas.
• No es un curso de HTML5 y CSS3, es un curso de HTML y CSS de manera global, tal como se pueden usar hoy en día, lo cual incluye cosas antiguas de estos lenguajes y cosas de las últimas versiones.

Finalmente, lo que pretendo es que la persona que necesita este curso pueda darse cuenta de inmediato que está en el lugar correcto y que debe tomar acción.

No tengo intenciones de desarrollar una actitud demasiado vendedora o ‘marketera’, ya que no quiero atraer a gente que tenga falsas expectativas del curso. Por ejemplo, si llega alguien que ya tiene conocimientos de HTML y CSS y busca un curso avanzado de HTML5 para aprender a hacer cosas complejas con canvas, geolocalización y animaciones CSS3 con keyframes, es importante que sepa de inmediato que este no es el lugar. Pero en cambio, si llega una persona que posee conocimientos desactualizados, muy básicos o nulos y desea aprender a maquetar sitios por su propia cuenta, es necesario que sepa que está en el lugar correcto.

Aplicando lo aprendido

En la redacción de este texto, quiero aplicar la misma lógica que he usado anteriormente en el landing page del curso Creación de Temas WordPress Profesionales, pero añadiendo algunos elementos especiales que permitan responder a las preguntas que sé que la gente se hará.

Desde que lancé el curso de WordPress he recibido correos de personas interesadas, en los cuales se repiten una y otra vez las mismas preguntas:

• ¿Cuando comienza el curso y cuánto dura?
• ¿Es online o presencial?
• ¿Hay una hora específica para ver las clases?
• ¿Cuánto plazo tengo para ver el material?
• Si tengo dudas, ¿me ayudarás?
• ¿Se entrega algún tipo de diploma?

Para responder a esas preguntas es que decidí crear una sección que identifico con el nombre “Ideas fuerza”, que consiste en una serie de seis puntos, cada uno con título y un pequeño texto atendiendo a estas temáticas. Es muy probable que también diseñe un ícono para cada uno de ellos.

Pro tip: si quieres escribir algo que de verdad conecte con tu público, lo mejor que puedes hacer es responder a sus preguntas.

Estructura del contenido

Me interesa que la sensación que tengan los visitantes al leer el contenido sea como si estuvieran leyendo una historia. Que el texto le lleve en un viaje, a través del cual vaya encontrando todas las respuestas a las preguntas que tenga sobre el curso.

Para conseguir eso, he decidido estructurar el contenido con los siguientes bloques, que estarán intervenidos de cuando en cuando por algunos testimonios:

1. Encabezado general: Esto es lo que se verá inmediatamente al cargar la página, contendrá un epígrafe que anunciará que se trata de un curso online, seguido de un título con el nombre del curso y un breve párrafo de introducción. Esta sección debe darle suficiente información al visitante para que entienda que se trata una página promocional de un curso en línea de HTML y CSS. Es probable que también incluya un video.
2. Introducción: Si el encabezado captura su atención y sigue bajando, el visitante se encontrará con la introducción, un par de párrafos que detallarán de qué se trata el curso y tratarán de generar expectativas reales al respecto.
3. Ideas fuerza: Como te comentaba anteriormente, quiero responder en esta sección las preguntas que sé que las personas se harán, convirtiendo las respuestas en beneficios a partir de frases cortas e íconos.
4. Requisitos: Uno de los miedos que mucha gente tiene antes de querer aprender de maquetación es que creen necesitar conocimientos de programación, pero están equivocados: HTML y CSS debieran ser el punto de entrada para cualquier persona que no sepa nada de código y quiera comenzar. En esta sección cubriré ese tema.
5. Contenidos: Llegado a este punto, el visitante probablemente se esté preguntando “OK, muy interesante todo, pero… ¿Cuáles son los temas que se cubren en el curso?”, así que es el momento de ir al detalle y mostrar los contenidos de cada módulo.
6. Acerca del instructor: La siguiente pregunta lógica del visitante sería “¿Quién es este tal Francisco y por qué debería aprender de él?”. En esta sección, trataré de responder a esa pregunta de manera resumida, apelando a mis años de experiencia.
7. Planes y precios: Después de leer todo lo anterior, el visitante ya debería saber si el curso es para él/ella o no, así que no hay necesidad de dilatar más el tema: Le mostraré los planes disponibles y el botón para comprar el curso.
8. Preguntas frecuentes: Esta última sección busca cubrir cualquier duda que haya quedado suelta, o que no sea tan relevante como para incluirla dentro del contenido general, como por ejemplo, el medio de pago y cómo elegir el plan apropiado.

Ayúdame a mejorar el texto

Este es el momento en que te invito a participar conmigo en este proceso. A continuación, te dejaré un enlace con el cual podrás acceder al documento de Google Docs donde he redactado el texto:

Revisa el texto aquí

Por favor, lee el texto y déjame un comentario más abajo, comentándome si está todo claro, si hay algo que falta o si hay alguna duda que te quede sin responder.

Haré los cambios necesarios en base a los comentarios que reciba y volveré el próximo miércoles con la segunda parte de esta serie, en la cual te mostraré el making of del diseño.

Tus comentarios son tremendamente valiosos y de seguro ayudarán a que este landing page quede de maravilla 🙂

Un abrazo,
@FranciscoAMK

Editado por: Melissa Amaro P.