Auto-reproducción
Autocompletar
Clase Previa
Completar y continuar
Diseño UI: Fundamentos para el diseño de Interfaces de Usuario
Introducción
¡Te damos la bienvenida al curso! (0:58)
Recomendaciones antes de iniciar (2:13)
Toma en cuenta esto para obtener el certificado de este curso
Materiales a utilizar en el curso
1.1 ¿Qué es UI? (3:58)
1.2 Roles y Funciones (7:23)
1.3 ¿Puedo ser un diseñador UI? (8:37)
1.4 ¿Qué hace UI? Análisis de casos (17:12)
Problemas que resuelve UI
2.1 Problemas de Usabilidad (4:37)
2.2 Problemas de Comunicación (3:59)
2.3 Problemas de Eficacia (4:51)
2.4 Soluciones Visuales (7:18)
2.5 Soluciones Motoras (5:15)
2.6 Soluciones Cognitivas (5:08)
2.7 Reflexión final (1:43)
Pasos para la elaboración de un Proyecto UI
3.1 Brief del Proyecto (5:54)
3.2 Contexto y Necesidades (9:29)
3.3 Investigación de la competencia (13:28)
3.4 Inspiración: ¿Dónde encontrar ideas? (5:44)
3.5 Moodboard (3:02)
3.6 Wireframes (5:55)
3.7 ¿Cómo crear wireframes? (2:28)
3.8 Whimsical: Primeros pasos (3:23)
Conociendo Figma
4.1 ¿Qué es Figma? (5:07)
4.2 Crear una cuenta en Figma (2:21)
4.3 Frames (7:01)
4.4 Agregar formas (6:01)
4.5 Panel de capas y elementos (3:48)
4.6 Alineación de elementos (4:56)
4.7 Color y degradado en Figma (7:36)
4.8 Efectos (6:47)
4.9 Propiedades de los textos (7:04)
4.10 Propiedades de las imágenes (3:44)
4.11 Pluggins de Figma (3:09)
4.12 Comunidad de Figma (4:01)
Principios de UI
5.1 ¿Qué es un buen diseño? (16:04)
5.2 Balance (9:27)
5.3 Alineación (5:55)
5.4 Proporción (10:03)
5.5 [Entregable] Creación de Layout Grid en Figma Simétrico (7:14)
5.6 [Entregable] Creación de Layout Grid en Figma Asimétrico (3:18)
5.7 Definir como plantilla un Layout Grid (1:23)
5.8 Espacio en Blanco (11:34)
5.9 Jerarquía visual (25:49)
5.10 Repetición (7:53)
5.11 Consistencia (3:39)
5.12 Ejemplos Prácticos: Principios de UI (13:34)
Gestalt
6.1 ¿Qué es la Gestalt? (3:37)
6.2 Proximidad (5:45)
6.3 Similitud (4:26)
6.4 Compleción (4:17)
6.5 Continuidad (5:44)
6.6 Cierre (3:42)
6.7 Conectividad (3:59)
El color
7.1 Qué es el color (2:57)
7.2 Teoría del color (7:46)
7.3 ¿Cuánto color usar? Reglas de referencia (3:24)
7.4 Psicología del color (8:39)
7.5 Recomendaciones sobre el uso del color (6:28)
7.6 Herramientas para medir la accesibilidad (6:38)
7.7 Creado una paleta de colores en Figma (8:15)
7.8 Herramientas para crear paletas de color (4:54)
7.9 Creando paletas de color con Pluggins de Figma (4:09)
7.10 [Entregable] Práctica de creación de Paleta de Color (2:31)
7.11 Creando paleta neutral con tu color de marca (4:07)
Sistemas de Diseño
8.1 ¿Qué es el atomic Design? (15:52)
8.2 Creación de un sistema de diseño de color (4:03)
8.3 Creación rápida de sistemas de diseño con FIGR (5:28)
Elaboración del proyecto final
Elaboración del proyecto final (1:11)
¿Cómo obtengo mi certificado del curso?
9.1 Panel de Navegación + Iconos (19:41)
9.2 Creando Avatars y Textos (13:49)
9.3 Elaboración del banner principal (24:21)
9.4 Elaborando Tarjetas Secundarias (16:59)
9.5 Elaborando nuestros Botones (10:58)
9.6 Barra de Búsqueda (5:31)
9.7 Botones + Iconos (5:40)
9.8 Encabezado (13:28)
9.9 Revisión de Detalles finales (7:25)
9.10 Exportación de Resultado (3:12)
7.8 Herramientas para crear paletas de color
Contenidos de Clase bloqueados
Si ya está inscrito,
necesitarás loguearte
.
Suscribirse en el Curso para Desbloquear