El wireframe es una herramienta que se utiliza en las primeras fases del proceso de diseño de un sitio web.
Nos permite esbozar el diseño de la Landing Page de una manera muy rápida. Así, podemos presentar y probar nuestra idea sin dedicarle demasiado tiempo ni recursos.
En los wireframes, jerarquizamos la información, priorizamos unos contenidos sobre otros y diseñamos la experiencia de usuario. En esta fase no nos detenemos en los detalles ni aplicamos colores, tipografía ni nada que nos distraiga: priorizamos el contenido. Ya nos ocuparemos después del diseño visual.
Figma es una herramienta ideal para diseñar los wireframes porque podemos hacerlo de manera colaborativa en tiempo real y, a través de un enlace, compartir nuestro diseño con el equipo de desarrollo y con las personas que van a aprobar el diseño.
Así, podrán probar el prototipo y todas las funcionalidades de la Landing Page (pestañas, ventanas pop-up, etc.) en sus propios dispositivos, tanto móvil como escritorio, para testear el diseño UX antes de pasar a la fase de diseño visual.
En esta lección vamos a ver paso a paso cómo se diseñan los wireframes de una Landing Page con Figma: primero diseñaremos los wireframes para la versión móvil y después los de la versión escritorio, siguiendo la técnica Mobile First.
Es una lección muy práctica y además teórica, ya que conocerás los porqués de cada una de las decisiones de diseño que se toman en cada sección de la Landing Page.
Vas a ver cómo se aplican las funcionalidades de Figma a un caso práctico.
Si sigues esta lección paso a paso, habrás creado en Figma un prototipo totalmente funcional y serás capaz de manejar la herramienta con gran destreza 🙂
Al finalizar esta lección, habrás aprendido…
Herramientas de Figma
- Crear, duplicar y renombrar archivos, páginas, Frames y grupos
- Crear y editar capas de texto
- Importar imágenes, recortarlas y realizar ajustes de modos de fusión
- Medir distancias entre objetos
- Organizar objetos con Smart Selection
- Crear diseños dinámicos con Auto Layout
- Configurar propiedades de las capas como Corner Radius, Fill, Stroke, etc.
- El panel de capas
- Nombrar capas
- Visualizar y ocultar capas
- Organizar capas con Tidy up
- Redimensionar un Frame desde el panel de capas
- Usar las herramientas de forma y la pluma para dibujo vectorial
- Utilizar la herramienta Escala para cambiar tamaños
- Duplicar objetos conservando la distancia entre capas
- Uso de componentes desde el panel de Assets
- Volteados vertical y horizontal con atajo de teclado
- Añadir emojis (¡importante!)
- Uso de los Constraints para definir cómo se va a comportar una capa al redimensionar un Frame
- Crear componentes con Variants y comprender cómo funcionan
- Comprender las opciones de Resizing en el Auto Layout de los Componentes
- Crear, organizar y aplicar estilos de texto, color, efectos y Layout Grid
- Prototipar un componente de pestañas y una ventana pop-up
- Modo de visualización del prototipo con áreas interactivas
- Figma Mirror
- Compartir prototipo con terceros con permisos de visualización
- Resetear la previsualización para reactivar las funcionalidades interactivas del prototipo
- Herramienta de comentarios
Consejos de diseño web
- Cuáles son los pasos del proceso de diseño de una Landing Page
- Qué es un wireframe y por qué es interesante diseñarlo con Figma
- Cómo convertir un diseño para dispositivos móviles en un diseño para escritorio
- Cómo defender una propuesta de diseño de wireframes
- Por qué evitamos utilizar Lorem ipsum
- Cómo incluir todos los requerimientos del RGPD en una Landing Page sin ensuciar nuestro diseño
- Diseño de formularios adaptados a la ley de protección de datos
- Definición de jerarquía visual y la importancia de jerarquizar correctamente los contenidos
- Atajos visuales
- El ritmo vertical
- La importancia de testear los diseños en su contexto
- Diferencia entre dimensiones y peso visual
- Por qué utilizamos los patrones de diseño que usamos: hero, pestañas, anuncios, cards, etc.
- Incluir llamadas a la acción
- Por qué no podemos cambiar el ancho de las capas de texto de las instancias y qué tiene que ver con la posterior maquetación en CSS
- Cuál es la mejor manera de presentar el contenido para que el usuario lo asimile de la manera más rápida
- La ley de proximidad de la Gestalt
- Nociones de accesibilidad de los textos
- Nociones de composición de textos. Alineación coherente de párrafos para mejorar la legibilidad
- Por qué una vez finalizado el diseño del wireframe y antes de pasarlo a visto bueno del cliente, debemos pasarlo al equipo (o a la persona) que va a realizar el desarrollo
- Advertencias que debemos hacer cuando compartimos un wireframe para visto bueno
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 una Landing Page con Figma completo consta de las siguientes lecciones:
