Es un curso totalmente práctico y desde cero donde no necesitas conocimientos previos. Aprenderás a diseñar interfaces de usuario atractivas, eficientes y aplicando los principios del UI y UX adecuadamente. En este curso también aprenderás a diseñar productos digitales haciendo uso de Figma, una de las herramientas más potentes y completas en este rubro hoy en día, además de aplicaciones complementarias como Figma Mirror.
-
CONCEPTOS UI, HERRAMIETAS BÁSICAS EN FIGMA
- Sesión 1
- 1.1. Definición UI Conceptos Preliminares
- 1.2. Diferencia Entre UX UI
- 1.3. Diferencia Entre UI Y Front End
- 1.4. UI Parte Del Diseño Gráfico
- 1.5. Tareas Principales Del Diseñador UI
- 1.6. Herramientas Para Diseño UI
- 1.7. Introducción A Figma
- 1.8. Crear Cuenta En Figma
- 1.9. Instalar Figma Al Ordenador
- 1.10. Partes De La Interfaz De Figma (Parte 1)
- 1.11. Partes De La Interfaz De Figma (Parte 2)
- Actualización de Figma, cambios en la interfaz
- Cuestionario #1
- 1.12. Ayuda Y Atajos De Teclado
- 1.13 Crear Frame O Hoja De Trabajo
- 1.14. Trabajando Sobre Frame
- 1.15. Figuras Geométricas
- 1.16. Modificando La Forma De Las Figuras Geometricas
- Tips para la edición de formas
- 1.17. Creando Figuras Con Alt Y Shift
- 1.18. Duplicar Figuras
- 1.19 Guías Visuales En Figma
- 1.20. Guardar E Importar Un Archivo De Figma
- 1.21. Eliminar Y Restaurar Un Proyecto
- 1.22. Alineación
- 1.23. Modificando Las Esquinas De Las Figuras
- 1.24. Modificando El Color De Figuras
- 1.25. Agregando Bordes A Las Figuras
- 1.26. Efectos
- 1.27. Las Capas En Figma
- 1.28. Bloquear Y Ocultar Capas
- 1.29. Agrupar Y Desagrupar Capas
- 1.30. Operaciones Booleanas
- 1.31. Como Compartir Mi Diseño
- ¡Generemos una gran comunidad!
- Práctica #1
-
HERRAMIENTAS AVANZADAS EN FIGMA
- Sesión 2
- 2.1. Vectores Herramienta Pluma
- 2.2. Vectores Herramienta Lapiz
- 2.3. Imágenes
- 2.4. Efectos En Imágenes
- 2.5. Formatos Webp, Svg, Gif, Illustrator
- 2.6. Agregando Texto
- 2.7. Configurando Texto
- 2.8. Google Fonts Y Font Awesome
- 2.9. Instalador De Fuentes Para Figma Web
- 2.10. Figma Mirror
- 2.11. Herramienta Mano
- 2.12. Regla Y Guías
- 2.13. Herramienta Comentarios
- 2.14. Constraints
- 2.15. Constraints Práctica
- 2.16. Fijar Objeto Cuando Usamos El Scroll
- 2.17. Herramienta Presentación
- 2.18. Layout Grid
- 2.19. Layout Grid Con Columnas Y Filas
- 2.20. Auto Layout
- 2.21.Herramienta Export
- Cuestionario #2
- 2.22. Herramienta Slice
- 2.23. Máscara
- 2.24.Creando Una Tarjeta Con Máscara
- Tips para ser más productivo durante el diseño en Figma
- Práctica #2
-
CONCEPTOS DE DISEÑO APLICADOS AL UI
- Sesión 3
- 3.1. Principios De Diseño Aplicados A UI
- 3.2. Consistencia
- 3.3. Contraste
- 3.4. Jerarquía
- 3.5. Legibilidad
- 3.6. Espacio Negativo
- 3.7. Escala
- 3.8. Tamaño De Texto
- 3.9. Interlineado
- 3.10. Recursos Gráficos
- 3.11. Instalación De Plugins
- 3.12. Plugin Unsplash
- 3.13. Plugin Iconify
- 3.14. Plugin Content Reel
- 3.15. Paletas De Color
- 3.16. Aplicando Paletas De Color Al Diseño
- 3.17. Variaciones De Color
- 3.18. Principios De Usabilidad
- 3.19. Visibilidad
- 3.20. Relación
- 3.21. Control
- 3.22. Consistencia
- 3.23. Prevención
- 3.24. Reconocimiento
- 3.25. Flexibilidad
- 3.26. Estética
- 3.27. Errores
- 3.28. Ayuda
- Buscando Inspiración
- Cuestionario #3
- Práctica #3
-
PATRONES Y PROCESO DEL DISEÑO
- Sesión 4
- 4.1. Patrones De Diseño
- 4.2. Patrón De Diseño – Botones
- 4.3. Formularios
- 4.4. Patrón De Diseño – Navegación
- 4.5. Patrón De Diseño – Menú
- 4.6. Patrón De Diseño – Carrusel – Bottom Bar
- 4.7. Patrón De Diseño – Hero Image – Banner
- 4.8. Patrón De Diseño – Card
- 4.9. Patrón De Diseño – Paginación – Scroll Infinito
- 4.10. Patrón De Diseño – Modal
- 4.11. Patrón De Diseño – Tooltip – Toast – Notificación
- Recurso Extra: Landing Page y su estructura
- 4.12 Componentes Parte 1
- 4.13. Componentes Parte 2
- 4.14 Componentes Parte 3
- 4.15 Plantillas
- 4.16. Proceso De Diseño
- 4.17. User Flow Parte 1
- 4.18 User Flow Parte 2
- 4.19. Wireframe Parte 1
- 4.20. Wireframe Parte 2
- 4.21. Wireflow
- 4.22. Mockup
- Cuestionario #4
- Práctica #4
- Study Jam1
-
CREANDO MI PROYECTO FINAL
- Sesión 5
- ¿ Qué te parece el curso de UI/UX para el Diseño de Interfaces hasta ahora ?
- 5.1. Preparando Proyecto Final
- 5.2. Creando Nuestros Wireflows Parte 1
- 5.3. Creando Nuestros Wireflows Parte 2
- 5.4. Creando Nuestros Wireflows Parte 3
- 5.5. Responsive Web Design
- 5.6. Mobile First
- 5.7. Selección De Tamaño De Frames Para Wireframe
- 5.8. Seleccionando La Configuración De Layout Grid
- 5.9. Analizando El Tamaño Adaptativo De Mis Elementos
- 5.10. Modificando El Layout Grid
- 5.11. Creando Nuestros Wireframes Parte 1
- 5.12. Creando Nuestros Wireframes Parte 2
- 5.13. Creando Nuestros Wireframes Parte 3
- 5.14. Creando Nuestros Wireframes Parte 4
- 5.15. Creando Nuestros Wireflows – Plugin Autoflow
- 5.16. Creando Nuestros Wireflows – Parte 2
- 5.17. Creando Mi Paleta De Colores
- 5.18. Seleccionando Tamaño De Texto
- 5.19. Creando Nuestros Mockups Parte 1
- 5.20. Creando Nuestros Mockups Parte 2
- 5.21. Creando Nuestros Mockups Parte 3
- 5.22. Creando Nuestros Mockups Parte 4
- 5.23. Creando Nuestros Mockups Final
- Material adicional : Proyecto 10Minds Rent a Car
- Práctica #5
- Sesión 6
- Study Jam 2
