El diseño visual de una Landing Page debe expresar la identidad del producto o servicio y emocionar al usuario para persuadirle y que realice la conversión: darse de alta en el servicio, realizar una compra, dejar su correo electrónico…
Si en la lección de wireframes definíamos la jerarquización de los contenidos y la experiencia de usuario, en esta lección vamos a crear un sistema de diseño que nos ayude a dar estilos a nuestra Landing Page de una manera coherente, evitando cometer errores y ahorrando tiempo.
Primero vamos a crear el diseño visual de la versión para dispositivos móviles y después lo vamos a pasar a la versión escritorio.
Además, vamos a dejar el archivo listo para el developer handoff.
Si sigues esta lección paso a paso, habrás creado en Figma un prototipo totalmente funcional y al finalizar la lección serás capaz de manejar la herramienta con gran destreza 🙂
Además, al finalizar esta lección, habrás aprendido…
Herramientas de Figma
- Crear, organizar y aplicar estilos de texto, estilos de color, estilos de efectos, estilos de Layout Grid, componentes con Variants
- Diseños dinámicos con Auto Layout
- Utilizar plugins de Figma para mejorar tu productividad
- Dejar listo un archivo de Figma para el developer handoff
- Diferenciar entre dar permisos para ver y para editar cuando compartimos un archivo de Figma
- Elementos responsive con Variants
Consejos de diseño web
- Defender una propuesta de diseño visual de Landing Page
- Convertir un diseño para dispositivos móviles en un diseño para escritorio
- Qué es un sistema de diseño, para qué sirve, cómo crearlo y aplicarlo en una Landing Page y cómo mantenerlo actualizado y escalable
- Nociones de accesibilidad: legibilidad y color
- Comunicación y gestión: developer handoff
Hazte con el curso completo y ahorra más de un 20%
Si lo prefieres, puedes comprar el Curso de Diseño de una Landing Page con Figma completo con un ahorro de más del 20%.
Lecciones complementarias
Además de esta lección, el Curso de Diseño de Landing Page con Figma consta de las siguientes lecciones:
