UT4 / Diseño web con Figma
AulaMarketing · Lienzo de clase
Capas
Página · UT4
ÍNDICE DE LA UNIDAD
DISEÑO / UNIDAD 04
Diseño web
con Figma.
Antes de abrir Figma: ordenar la información, guiar la mirada y facilitar una acción.
Diseño web con Figma
UT 04 · AulaMarketing
LIENZO / 04
Frame 04 · Composition
FRAME / 04
04
Equipo creativo
Vista de escritorio · composición de pantalla.
#FF3737
#FF7237
#874FFF
#00B6FF
#24CB71
UT4 / ANTES DEL TUTORIAL
Antes de la herramienta, la estructura.
Siete ideas para pasar del diseño gráfico a una pantalla. El documento desarrolla los conceptos; aquí los veremos funcionar.
01 / INTRODUCCIÓN
Principios de maquetación
Los principios del diseño gráfico siguen aquí. Cambia el soporte; no la necesidad de ordenar.
Jerarquía
¿Qué debe verse primero?
Tamaño, posición y contraste establecen prioridades.
Alineación
¿Qué elementos comparten un eje?
Las relaciones visuales hacen que el conjunto se perciba ordenado.
Proximidad
¿Qué cosas van juntas?
Agrupa lo relacionado; separa lo que cumple otra función.
Contraste
¿Dónde está la acción importante?
Destaca lo necesario sin convertir todo en protagonista.
Espacio en blanco
¿Dónde necesita respirar la composición?
El vacío separa, organiza y da protagonismo.
SIN PRIORIDADES
Título principal
Información de apoyo.
Acción principal
CON JERARQUÍA
Título principal
Información de apoyo.
Acción principal
Comparación didáctica de maquetación, no una campaña real. Identifica qué cambia en el orden de lectura.
02 / INTRODUCCIÓN
Diseñar para una pantalla
Papel
Un formato fijo.
Decidimos la composición para unas dimensiones concretas.
Pantalla
Un recorrido interactivo.
Cambian el ancho, el dispositivo y las acciones del usuario.
01
Primer vistazo
Qué se presenta y qué merece atención.
02
Scroll
La información se descubre por bloques.
03
Acción
Pulsar, navegar, reproducir o reservar.
No hay que mostrarlo todo a la vez. Cada sección debe tener una función dentro del recorrido.
03 / INTRODUCCIÓN
Anatomía de una web
Mensaje principal + CTA
Card 1
Card 2
Card 3
Header
Identidad y navegación. Ayuda a orientarse.
Hero
Primer gran bloque: qué es, por qué interesa y qué hacer.
CTA
La llamada a la acción: comprar, reservar, ver o registrarse.
Secciones
Cada bloque organiza una parte del mensaje.
Cards
Agrupan elementos comparables: productos, noticias o personajes.
Footer
Cierra con contacto, enlaces e información complementaria.
Aprende a reconocer las piezas. No todas las webs necesitan los mismos bloques ni el mismo orden.
Esquema didáctico de una página. Un CTA también puede aparecer en el header, el hero u otras secciones.
Caso profesional · Decathlon USA. Captura incluida en el portfolio de Alejandro Barrero; no representa necesariamente la web actual. Fuente original. Pulsa la imagen para ampliarla.
04 / INTRODUCCIÓN
UI y UX
UI
Colores, tipografía, imágenes, botones e iconos con los que interactuamos.
UX
¿Se entiende el recorrido? ¿Se encuentra y se completa la acción?
Spotify · imagen oficial de la renovación de escritorio y web de 2021. Se utiliza como referencia histórica de interfaz, no como captura de la versión actual. Fuente original. Pulsa la imagen para ampliarla.
Una web puede ser espectacular y dificultar la tarea. Buscamos atractivo visual y facilidad de uso.
05 / INTRODUCCIÓN
Primero, el wireframe
Un wireframe es un esquema de la interfaz. Sirve para decidir la estructura antes de invertir tiempo en el acabado.
Ejemplo de wireframe publicado por Figma. Las formas representan contenido: no son imágenes pendientes de cargar. Fuente original. Pulsa la imagen para ampliarla.
Aquí decidimos
Orden: qué aparece antes y después.
Jerarquía: qué necesita más protagonismo.
Navegación: cómo se pasa de un bloque a otro.
Todavía no
Fotografías definitivas, paletas cerradas ni efectos decorativos.
01
Contenido
Qué necesitamos comunicar.
02
Wireframe
Dónde y en qué orden aparecerá.
03
Diseño visual
Cómo se verá la interfaz.
Si una estructura no se entiende sin decoración, añadir efectos no resuelve el problema.
06 / INTRODUCCIÓN
Retícula y responsive
La retícula organiza columnas, márgenes y separación. Las alineaciones se perciben aunque las guías no estén visibles.
01
Columnas
Zonas que los elementos pueden ocupar.
02
Márgenes
Espacio entre el contenido y el borde.
03
Separación
Distancia entre columnas o elementos.
Mismo contenido. Nueva composición.
Card A
Mismo contenido. Otra distribución.
Card B
Mismo contenido. Otra distribución.
Card C
Mismo contenido. Otra distribución.
Escritorio: tres columnas. Retícula oculta.
Demostración didáctica: compara la distribución, no solo el tamaño. La retícula mostrada es un ejemplo, no una regla universal.
Caso profesional · variantes de cabecera de Decathlon USA para diferentes anchos, documentadas por Alejandro Barrero. Fuente original. Pulsa la imagen para ampliarla.
07 / INTRODUCCIÓN
Antes de abrir Figma
En el taller utilizaremos Figma Design para diseñar pantallas y simular su navegación. En esta fase no publicaremos una web: prepararemos y probaremos su diseño.
Frames
Las pantallas o espacios de trabajo.
Textos e imágenes
El contenido visual de la interfaz.
Formas
La base de botones y otros elementos.
Auto Layout
Organización y adaptación de elementos.
Componentes
Elementos reutilizables y coherentes.
Prototipos
Simulación de navegación e interacciones.
Demostración oficial de Figma: un enlace de prototipo conecta dos pantallas. No es una captura de una tienda publicada. Fuente original. Pulsa la imagen para ampliarla.
PASAMOS A LA PRÁCTICA
Primero decidimos. Después lo construimos.
Antes de abrir la herramienta: ¿qué comunicamos?, ¿qué debe verse primero?, ¿qué queremos que haga la persona?
Los pasos de Figma los trabajaremos presencialmente en clase.
Síntesis para proyectar, basada en los apuntes de UT4. Las capturas de marcas se comentan con finalidad docente y pertenecen a sus respectivos titulares.
UT 04 · Diseño web con Figma.
Del diseño gráfico a la pantalla. Próximo paso: práctica presencial.
Diseño
Guía del lienzo
FRAME SELECCIONADO
Portada
Haz clic en un marco o elígelo en Capas.
APARIENCIA
Paleta Figma
RECORRIDO
01–07
Conceptos → ejemplos → práctica
INTERACCIONES
Cambia entre móvil y escritorio.
Activa la retícula.
Abre las capturas para ampliarlas.
Interfaz didáctica inspirada en Figma. El contenido sigue siendo una página de clase.