Módulo 3: Diseño UX/UI

Table of contents

Fundamentos de UX/UI y enfoque centrado en el usuario (RA1)

En este apartado trabajé los fundamentos conceptuales del diseño UX/UI y su relación con el desarrollo web moderno.

1. Diferenciación entre UX (experiencia de usuario) y UI (interfaz de usuario).
2. Principios de usabilidad, accesibilidad y ética digital.
3. Diseño centrado en el usuario (DCU): comprensión, definición, diseño y evaluación.
4. Investigación de usuarios: entrevistas, encuestas, pruebas de usabilidad y análisis de feedback.
5. Historias de usuario y priorización de funcionalidades.

Temas clave identificados:

1. Tendencias actuales en desarrollo web UX/UI.
2. Diseño adaptativo y responsivo.
3. Microinteracciones y su impacto en la experiencia.
4. Relación UX/UI con objetivos del negocio y necesidades del usuario.

Herramientas esenciales de diseño y prototipado (RA2)

En este apartado enfoqué el aprendizaje en herramientas y flujo de trabajo para materializar interfaces funcionales.

1. Herramientas de diseño UX/UI: Figma, Adobe XD, Sketch, Framer y Webflow.
2. Creación de wireframes y prototipos.
3. Animaciones y transiciones como apoyo a la navegación.
4. Organización de elementos visuales y aplicación de principios básicos de diseño.
5. Exportación de assets y buenas prácticas de código limpio en diseño.

Actividades destacadas

1. Actividad práctica 1: exploración de Figma.
2. Actividad práctica 2: diseño completo de una interfaz UX/UI.
3. Actividad práctica 3: creación de un sistema de diseño básico.
4. Actividad integradora: diseño UX/UI aplicado a un proyecto digital.

Evaluación de usabilidad y mejora continua (RA3)

En este apartado trabajé métodos para analizar interfaces, identificar problemas y proponer mejoras accionables.

1. Fundamentos de usabilidad e impacto en la experiencia de usuario.
2. Diseño inclusivo y emocional.
3. Métodos de evaluación: pruebas moderadas/no moderadas y remotas/presenciales.
4. Técnicas avanzadas: test A/B, mapas de calor y grabaciones de sesión.
5. Diseño de pruebas: selección de participantes, escenarios y tareas realistas.
6. Interpretación de resultados, priorización de problemas y toma de decisiones.
7. Iteración y mejora continua en entornos ágiles.

Producto final del proceso

1. Proyecto RA3 de evaluación y mejora de usabilidad en una interfaz digital.
2. Informe de hallazgos con recomendaciones.
3. Evidencias de iteración y ajustes de diseño.

Recursos (imágenes, ejemplos, enlaces)

1. Ejemplo 1: construcción de un wireframe base en Figma para una pantalla de inicio.
2. Ejemplo 2: ejecución de una prueba de usabilidad con tareas definidas y registro de observaciones.
3. Enlace de apoyo: Nielsen Norman Group - 10 Usability Heuristics.
4. Enlace de apoyo: Interaction Design Foundation - UX Design.
5. Enlace de apoyo: W3C WAI - WCAG Overview.

Diseño visual aplicado

1. Estructura del informe por bloques temáticos para mantener trazabilidad del aprendizaje.
2. Jerarquía de encabezados para separar conceptos, actividades y evidencias.
3. Uso de listas numeradas para presentar procesos y resultados de forma clara.
4. Integración de terminología técnica UX/UI con redacción comprensible.
5. Organización en bloques cortos para mejorar lectura en móvil y escritorio.
6. Enfoque en consistencia visual entre módulos para una navegación más predecible.

Reflexión personal

Este módulo me permitió pasar de la teoría del diseño a una práctica más estructurada. Comprendí la base conceptual de UX/UI y el enfoque centrado en el usuario, aprendí a transformar ideas en prototipos y sistemas de diseño, y confirmé que evaluar e iterar es esencial para mejorar productos digitales. En conjunto, este módulo fortaleció mi capacidad para diseñar interfaces más útiles, accesibles y alineadas con necesidades reales.