Curso
Fundamentos de Diseño Web
Diseña webs con mejor tipografía, layout, color, dirección visual y consistencia.
Módulo 1: Introducción al Diseño UI
Conoce cómo se desarrollará el curso, qué necesitas para comenzar y por qué el diseño UI es una parte fundamental en la creación de sitios web y productos digitales.
- Bienvenida al curso
- Cómo funciona el curso
- Qué necesitas para empezar
- Cómo desarrollar una mentalidad de diseñador
- Diferencias entre UI y UX
- Por qué el diseño UI es importante
Módulo 2: Tipografía para Interfaces
Aprende a seleccionar tipografías, definir tamaños y pesos, y construir jerarquías que mejoren la claridad, la legibilidad y la personalidad de una interfaz.
- Conceptos y términos tipográficos
- Cómo definir tamaños tipográficos
- Cómo utilizar los pesos tipográficos
- Jerarquía visual a través de la tipografía
- Tipografía para títulos y descripciones
- Tipografía para botones y navegación
- Cómo combinar tipografías
- Ejercicio práctico de diseño tipográfico
Módulo 3: Layout, Espaciado y Alineación
Aprende a organizar los elementos de una interfaz mediante retículas, contenedores, alineaciones y sistemas de espaciado.
- Introducción al modelo de caja
- Contenedores y estructura de una interfaz
- Fundamentos del grid
- Grid explícito e implícito
- Sistemas de espaciado
- Alineación y distribución de elementos
- Filas, columnas y composición
- Ejercicio práctico de layout y espaciado
Módulo 4: Color para Interfaces
Aprende a crear y aplicar paletas de color con intención, manteniendo coherencia visual, legibilidad y suficiente contraste.
- Psicología y función del color
- El círculo cromático
- Accesibilidad y contraste
- Cómo crear una paleta de color
- Colores principales, secundarios y de apoyo
- Cómo construir tonos y variantes
- Cómo aplicar el color a una interfaz
- Fundamentos del modo oscuro
Módulo 5: Identidad y Dirección Visual
Aprende a definir la identidad visual de una web, seleccionar referencias con intención y convertirlas en decisiones concretas de diseño.
- Por qué una web necesita una dirección visual
- Cómo definir la personalidad de una marca
- Cómo traducir conceptos de marca en recursos visuales
- Qué es un moodboard y para qué sirve
- Cómo buscar y seleccionar referencias
- Cómo analizar referencias sin copiar diseños
- Cómo convertir un moodboard en una interfaz
- Ejercicio práctico de dirección visual
Proyecto Final
Diseño completo de una interfaz aplicando los fundamentos aprendidos durante el curso.
- Tipografía
- Jerarquía visual
- Modelo de caja
- Grid
- Espaciado y alineación
- Color
- Identidad visual
- Dirección visual
- Consistencia entre componentes