Figma es la herramienta por excelencia para el diseño y prototipado de productos digitales. En esta charla aprenderemos a diseñar una landing page que genere ventas. El proceso de diseño empieza con los contenidos, continúa con el diseño de wireframes mobile first, en el que veremos la jerarquización de contenidos y la experiencia de usuario; sigue con el diseño visual, en el que veremos cómo aplicar los valores de la marca y emocionar al usuario, y desemboca en el developer handoff, el paso a desarrollo (con WordPress, ¡claro!).

1. Cómo diseñar
una landing page
con Figma
#WCCA2021
Ana Cirujano
FOTO

2. - Diseñadora UI/UX
- Profesora de diseño
en 3ymedia School
- Podcaster en Un billete
a Chattanooga
#WCCA2021
anacirujano
FOTOS
acirujano
acirujano
Ana Cirujano

3. ¿Qué vamos a aprender?
● Qué es una Landing Page
● Cómo diseñar con Figma una Landing Page
que convierta
○ Contenido
○ Wireframes
○ Diseño visual
○ Developer handoff

4. ¿Qué es una
Landing Page?

6. Contenido

7. Crea un diseño simple
● Recuerda que menos es
más: ve al grano y evita
parrafadas que
entretengan.

8. Haz una única
propuesta de valor
● Ten un único objetivo de
conversión muy claro y
enfócate en
conseguirlo.

9. Repasa tu checklist
Todas las Landing Page
incluyen como mínimo:
● Un titular
● Una breve descripción
● Una imagen
● Un formulario para captar leads

10. Destaca los beneficios
en una lista
● La gente no lee, así que
no te enrolles y explica
muy claramente cómo
vas a solucionar su
problema.

11. La llamada a la acción
tiene que destacar
● Si puedes, es mejor que
esté above the fold. Pero
que no te dé miedo
repetirla, como mínimo, al
final de la página.

12. No incluyas
puntos de fuga
● Evita enlaces a otras
páginas: ¡que el usuario no
se vaya de tu Landing
Page sin convertir!

13. Si puedes,
incluye un vídeo
● Nada muestra mejor
el valor que un vídeo
y además, fomenta
la interacción.

14. Solicita los datos
imprescindibles
● ¿Seguro que necesitas
pedir algo más que el
correo electrónico?

15. Respeta la privacidad
● Recuerda que cumplir con
la ley de protección de
datos hará que el usuario
confíe en ti.

16. Incluye botones de
compartir en redes
● Ganarás mayor visibilidad y
te ayudará a convertir más.
No los confundas con
enlaces a tus perfiles.

17. Wireframes

20. Diseño visual

24. Developer handoff

26. #WCCA2021
Conclusiones
Contenido - Wireframes - Diseño visual - Developer handoff - Producción

27. ¡GRACIAS!
¿Alguna pregunta?
#WCCA2021