Diseño Web UX/UI: Creando Experiencias Digitales Impactantes

Este plan de clase está diseñado para estudiantes universitarios de la asignatura de Diseño, con un enfoque en Diseño Web UX/UI. A través de cuatro sesiones intensivas de tres horas cada una, los estudiantes explorarán los principios fundamentales del diseño centrado en el usuario, la experiencia de usuario (UX) y la interfaz de usuario (UI), aplicándolos en proyectos prácticos que reflejan retos reales del mercado digital. El propósito es que los estudiantes no solo comprendan la teoría, sino que puedan diseñar, prototipar y evaluar interfaces digitales que sean intuitivas, atractivas y funcionales.

La metodología de Aprendizaje Invertido permitirá que los estudiantes trabajen con materiales (videos, lecturas y recursos) antes de cada clase para aprovechar el tiempo en actividades prácticas, colaborativas y de análisis en el aula. Esto favorece el aprendizaje activo, la resolución de problemas y el desarrollo de competencias profesionales clave para su futura inserción en la industria del diseño digital.

Este plan conecta directamente con el contexto actual, donde la experiencia digital es fundamental para la interacción social, educativa y comercial. Los estudiantes aprenderán a diseñar pensando en el usuario real, mejorando su capacidad crítica, creativa y técnica para aportar valor en cualquier proyecto digital.

• Analizar los principios fundamentales de UX/UI y su impacto en la experiencia del usuario.
• Diseñar prototipos de interfaces digitales aplicando técnicas de diseño centrado en el usuario.
• Evaluar la usabilidad de diseños digitales mediante pruebas y retroalimentación entre pares.
• Crear soluciones innovadoras que integren funcionalidad y estética en contextos reales.
• Argumentar decisiones de diseño basadas en datos, investigación y buenas prácticas en UX/UI.

• Computadoras con software de diseño y prototipado (Figma, Adobe XD o Sketch) – mínimo 1 por estudiante
• Proyector y pantalla para presentaciones
• Conexión a internet estable para acceso a recursos digitales
• Material impreso con guías rápidas de UX/UI (principios, heurísticas, ejemplos)
• Videos y lecturas previas asignados para estudio en casa (links proporcionados por el docente)
• Cuadernos o dispositivos para toma de notas
• Herramientas para pruebas de usabilidad (cuestionarios, formularios digitales)

• Conocimientos básicos de diseño gráfico y herramientas digitales.
• Familiaridad previa con conceptos elementales de interacción digital y navegación web.
• Capacidad para trabajar en equipo y comunicarse efectivamente.
• Habilidades básicas en investigación y análisis crítico de información.

Sesión 1: Fundamentos y Primeros Pasos en UX/UI

Fase de Inicio

Tiempo estimado: 20 minutos

Propósito de la sesión:

Introducir a los estudiantes en los conceptos claves de UX/UI y preparar el terreno para el diseño centrado en el usuario. Vincular conocimientos previos con la importancia actual del diseño digital.

Activación de conocimientos previos:

• Docente: Presenta la pregunta detonadora: “¿Recuerdan alguna aplicación o sitio web que les haya resultado difícil o frustrante de usar? ¿Qué problemas encontraron?”
• Estudiantes: Discuten en parejas durante 5 minutos y luego comparten ejemplos breves en plenaria.

Motivación y enganche:

• Docente: Muestra un video corto (3 minutos) con ejemplos impactantes de UX/UI exitosos y fallidos, destacando cómo el diseño afecta la experiencia del usuario.
• Estudiantes: Observan atentamente y responden a la pregunta: “¿Qué diferencia a un buen diseño de uno malo?”

Contextualización:

• Docente: Explica cómo el diseño UX/UI es crucial en la vida cotidiana, desde apps bancarias hasta plataformas educativas, y cómo esto abre oportunidades laborales.
• Estudiantes: Reflexionan y anotan cómo el diseño digital impacta su día a día.

Fase de Desarrollo

Tiempo estimado: 150 minutos

Presentación del contenido:

El docente recuerda que los estudiantes estudiaron previamente un video y lectura sobre principios básicos de UX/UI. Se abre un espacio para preguntas y aclaraciones breves (15 minutos).

Actividad 1: Análisis de Sitios Web desde la Perspectiva UX/UI

• Objetivo: Analizar principios de UX/UI aplicados en sitios web reales.
• Instrucciones:
• Formar grupos de 3-4 estudiantes.
• Cada grupo elige dos sitios web populares (pueden ser ecommerce, educativos, noticias).
• Utilizando una guía impresa con heurísticas básicas, analizan aspectos como navegación, accesibilidad, diseño visual y carga.
• Preparan un breve informe con fortalezas y debilidades observadas.
• Organización: Grupos de 3-4 estudiantes
• Producto: Informe escrito y presentación oral breve (5 minutos por grupo)
• Tiempo: 60 minutos
• Rol del docente: Circula entre grupos, formula preguntas como “¿Cómo afecta esta característica la experiencia del usuario?” o “¿Qué mejorarían para que sea más intuitivo?”

Actividad 2: Primer Boceto de Interfaz - Wireframe en Papel

• Objetivo: Diseñar un wireframe básico aplicando principios observados.
• Instrucciones:
• Individualmente, cada estudiante elige una idea de proyecto web personal o asignada (ejemplo: app para estudiantes, tienda online).
• Realizan un boceto en papel de la interfaz principal, considerando estructura, jerarquías y navegación.
• Comparten su boceto con un compañero para recibir retroalimentación inmediata.
• Organización: Individual con feedback en parejas
• Producto: Wireframe en papel y lista de comentarios recibidos
• Tiempo: 60 minutos
• Rol del docente: Ofrece retroalimentación puntual y sugiere mejoras basadas en usabilidad y claridad visual.

Diferenciación:

• Estudiantes avanzados: Pueden comenzar a digitalizar su wireframe en software de prototipado.
• Estudiantes con dificultades: Reciben apoyo adicional para simplificar el boceto y enfocarse en la estructura básica.

Transición:

El docente conecta el análisis de sitios reales con el diseño de wireframes, destacando la importancia de planificar antes de digitalizar.

Fase de Cierre

Tiempo estimado: 10 minutos

Síntesis:

• Docente: Solicita a cada estudiante escribir en una tarjeta tres aprendizajes clave del día.
• Estudiantes: Comparten voluntariamente una idea con el grupo.

Reflexión metacognitiva:

• ¿Qué principio de UX/UI te parece más importante y por qué?
• ¿Cómo te ayudó el análisis de sitios reales a entender mejor el diseño?
• ¿Qué dificultades encontraste al crear tu wireframe y cómo las superaste?

Retroalimentación:

El docente ofrece comentarios generales y destaca avances individuales observados durante las actividades.

Transferencia:

Se anticipa que en la siguiente sesión se trabajará en la digitalización y prototipado, por lo que deben revisar los materiales asignados.

Tarea o reto:

Revisar el video complementario sobre prototipado con Figma y preparar dudas o ideas para traer a clase.

Sesión 2: Prototipado Digital y Usabilidad

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito de la sesión:

Conectar el aprendizaje previo con la creación de prototipos digitales y comprender la importancia de la usabilidad.

Activación de conocimientos previos:

• Docente: Pregunta: “¿Qué elementos del wireframe que diseñaste crees que son fundamentales para digitalizar primero y por qué?”
• Estudiantes: Comparten ideas en plenaria y anotan puntos clave.

Motivación y enganche:

• Docente: Presenta un ejemplo de prototipo digital interactivo y una prueba de usabilidad con usuarios reales que muestra problemas comunes.
• Estudiantes: Observan y comentan posibles soluciones.

Contextualización:

• Docente: Explica cómo el prototipado facilita la detección de errores antes de programar y reduce costos en proyectos reales.
• Estudiantes: Reflexionan en parejas y anotan la importancia de validar ideas.

Fase de Desarrollo

Tiempo estimado: 150 minutos

Presentación del contenido:

Breve repaso guiado de herramientas de prototipado digital (Figma, Adobe XD), con énfasis en funciones clave previamente estudiadas.

Actividad 1: Digitalización del Wireframe y Creación de Prototipo Interactivo

• Objetivo: Crear un prototipo digital básico que permita interacción y navegación simulada.
• Instrucciones:
• Individualmente, cada estudiante digitaliza su wireframe en la herramienta asignada.
• Agrega botones, links y transiciones entre pantallas para simular la navegación.
• Guarda y prepara su prototipo para compartirlo.
• Organización: Trabajo individual con tutoría personalizada
• Producto: Prototipo digital interactivo
• Tiempo: 90 minutos
• Rol del docente: Apoya con dudas técnicas, sugiere mejoras en usabilidad y diseño visual.

Actividad 2: Prueba de Usabilidad en Pares

• Objetivo: Evaluar la usabilidad del prototipo mediante pruebas y retroalimentación concreta.
• Instrucciones:
• Formar parejas.
• Un estudiante presenta su prototipo y el compañero realiza tareas específicas (ejemplo: “Encuentra el producto X”, “Regístrate en la app”).
• El observador toma nota de dificultades y sugerencias utilizando un formulario breve.
• Intercambian roles.
• Organización: Parejas
• Producto: Formulario de evaluación completado y lista de sugerencias
• Tiempo: 60 minutos
• Rol del docente: Supervisa, orienta la formulación de feedback y modera discusión.

Diferenciación:

• Estudiantes avanzados: Pueden añadir animaciones y microinteracciones para mejorar la experiencia.
• Estudiantes con dificultades: Reciben apoyo en el manejo de la herramienta y en estructurar el prototipo básico.

Transición:

El docente conecta la evaluación de usabilidad con la importancia de iterar y mejorar el diseño, preparando la siguiente sesión enfocada en ajustes y diseño visual.

Fase de Cierre

Tiempo estimado: 15 minutos

Síntesis:

• Docente: Propone elaborar en conjunto un mapa mental digital que resuma pasos y aprendizajes sobre prototipado y usabilidad.
• Estudiantes: Participan aportando conceptos y ejemplos.

Reflexión metacognitiva:

• ¿Qué dificultades encontraste al digitalizar tu wireframe y cómo las superaste?
• ¿Cómo te ayudó la prueba de usabilidad a mejorar tu diseño?
• ¿Qué aspectos consideras prioritarios para la próxima iteración?

Retroalimentación:

El docente ofrece comentarios personalizados y destaca la relevancia de la retroalimentación entre pares.

Transferencia:

Se adelanta que en la próxima sesión se trabajará en el diseño visual y la presentación final de prototipos.

Tarea o reto:

Revisar materiales de diseño visual para interfaces y preparar ejemplos de interfaces que les gustan.

Sesión 3: Diseño Visual y Comunicación Digital

Fase de Inicio

Tiempo estimado: 10 minutos

Propósito de la sesión:

Conectar el prototipado con la importancia del diseño visual para crear una experiencia coherente y atractiva.

Activación de conocimientos previos:

• Docente: Pregunta: “¿Qué elementos visuales consideran que hacen más atractiva y fácil de usar una interfaz?”
• Estudiantes: Debaten en pequeños grupos y comparten ejemplos concretos.

Motivación y enganche:

• Docente: Muestra ejemplos de interfaces con buen y mal diseño visual e invita a identificar diferencias.
• Estudiantes: Analizan y comentan en plenaria.

Contextualización:

• Docente: Explica cómo el diseño visual contribuye a la identidad de marca y mejora la comunicación con el usuario.
• Estudiantes: Reflexionan y anotan cómo aplicarían estos conceptos a sus proyectos.

Fase de Desarrollo

Tiempo estimado: 160 minutos

Presentación del contenido:

El docente guía una revisión participativa sobre teoría del color, tipografía, jerarquía visual y consistencia, apoyado en ejemplos prácticos y la revisión de materiales asignados.

Actividad 1: Aplicación de Diseño Visual en el Prototipo

• Objetivo: Mejorar el prototipo digital integrando principios de diseño visual.
• Instrucciones:
• Individualmente, cada estudiante abre su prototipo digital.
• Aplica paletas de color, tipografías adecuadas y mejora la organización visual.
• Considera accesibilidad y contraste para usabilidad.
• Organización: Trabajo individual con asesoría continua
• Producto: Prototipo visualmente mejorado y funcional
• Tiempo: 100 minutos
• Rol del docente: Ofrece retroalimentación sobre estética, legibilidad y coherencia visual.

Actividad 2: Presentación y Crítica Constructiva

• Objetivo: Argumentar decisiones de diseño y recibir retroalimentación para mejora continua.
• Instrucciones:
• En grupos de 4, cada estudiante presenta su prototipo final.
• Reciben retroalimentación guiada basada en una rúbrica que incluye usabilidad, diseño visual y argumentación.
• Discuten posibles mejoras y aprendizajes.
• Organización: Grupos de 4 estudiantes
• Producto: Lista de feedback y plan de mejora
• Tiempo: 60 minutos
• Rol del docente: Modera, enfatiza aspectos positivos y áreas de oportunidad.

Diferenciación:

• Estudiantes avanzados: Integran elementos de branding y diseño responsivo.
• Estudiantes con dificultades: Reciben apoyo para ajustar colores y tipografías básicas.

Transición:

El docente sintetiza la importancia de la iteración y prepara a los estudiantes para la sesión final de evaluación y reflexión.

Fase de Cierre

Tiempo estimado: 10 minutos

Síntesis:

• Docente: Facilita una lluvia de ideas para resumir los elementos clave del diseño visual y su impacto en la experiencia UX/UI.
• Estudiantes: Participan activamente y anotan conclusiones.

Reflexión metacognitiva:

• ¿Cómo mejoró tu prototipo con los ajustes visuales?
• ¿Qué aprendiste sobre la relación entre estética y funcionalidad?
• ¿Qué feedback te resultó más valioso y por qué?

Retroalimentación:

Comentarios generales y recomendaciones para la sesión final.

Transferencia:

Invitación a preparar el portafolio digital y reflexionar sobre el aprendizaje global.

Tarea o reto:

Organizar y subir el prototipo final a la plataforma de la clase para revisión previa a la sesión final.

Sesión 4: Evaluación y Proyección Profesional en UX/UI

Fase de Inicio

Tiempo estimado: 10 minutos

Propósito de la sesión:

Conectar el aprendizaje realizado con la evaluación integral y la proyección profesional en diseño UX/UI.

Activación de conocimientos previos:

• Docente: Pregunta: “¿Qué habilidades y conocimientos consideras más valiosos para un diseñador UX/UI profesional?”
• Estudiantes: Discuten en grupos y comparten en plenaria.

Motivación y enganche:

• Docente: Presenta casos de éxito de profesionales UX/UI y su impacto en la industria.
• Estudiantes: Analizan y comentan sus expectativas.

Contextualización:

• Docente: Expone las tendencias y oportunidades laborales en UX/UI.
• Estudiantes: Reflexionan sobre su propio desarrollo profesional.

Fase de Desarrollo

Tiempo estimado: 150 minutos

Actividad 1: Presentación Formal del Proyecto Final

• Objetivo: Comunicar de manera clara y profesional el proyecto de diseño UX/UI desarrollado.
• Instrucciones:
• Cada estudiante presenta su prototipo final con justificación de decisiones de diseño, aprendizajes y mejoras realizadas.
• Se utiliza formato digital (presentación en diapositivas o video corto).
• Duración máxima por presentación: 8 minutos.
• Organización: Plenaria
• Producto: Presentación oral y digital del proyecto
• Tiempo: 90 minutos (aprox. 8-10 presentaciones)
• Rol del docente: Evalúa con rúbrica, hace preguntas de profundización y motiva debate.

Actividad 2: Reflexión Final y Plan de Mejora Personal

• Objetivo: Evaluar el propio aprendizaje y proyectar pasos a seguir en el desarrollo profesional.
• Instrucciones:
• Individualmente, cada estudiante responde un cuestionario con preguntas específicas:
• ¿Cuál fue tu mayor logro en este proyecto y por qué?
• ¿Qué habilidad te gustaría seguir desarrollando en UX/UI?
• ¿Cómo aplicarás lo aprendido en tu futuro profesional?
• Elabora un plan de mejora personal con metas concretas.
• Organización: Individual
• Producto: Documento escrito con reflexión y plan personal
• Tiempo: 50 minutos
• Rol del docente: Ofrece retroalimentación escrita y verbal, orienta en la formulación de metas realistas.

Diferenciación:

• Estudiantes avanzados: Elaboran además propuestas de mejora para proyectos colaborativos o portafolio profesional.
• Estudiantes con dificultades: Reciben apoyo para estructurar la reflexión y metas con ejemplos claros.

Transición:

El docente vincula la reflexión final con la importancia de la formación continua en diseño UX/UI y la búsqueda de oportunidades.

Fase de Cierre

Tiempo estimado: 20 minutos

Síntesis:

• Docente: Facilita una dinámica de cierre donde cada estudiante comparte en una frase qué se lleva de la experiencia y un compromiso para seguir aprendiendo.
• Estudiantes: Participan activamente y escuchan a sus compañeros.

Reflexión metacognitiva:

• ¿Cómo ha cambiado tu percepción sobre el diseño UX/UI desde la primera sesión?
• ¿Qué habilidades desarrollaste y cuáles seguirás trabajando?
• ¿Cómo planeas aplicar este conocimiento en proyectos futuros?

Retroalimentación:

El docente entrega una retroalimentación global sobre el desempeño de la clase y felicita los logros alcanzados.

Transferencia:

Se recomienda explorar cursos avanzados y prácticas profesionales para consolidar las competencias adquiridas.

Tarea o reto:

Invitación a montar el portafolio digital en plataformas profesionales y compartirlo para feedback continuo.

Tipo de evaluación:

• Diagnóstica: Activación de conocimientos previos en cada sesión para ajustar estrategias.
• Formativa: Durante el desarrollo, con retroalimentación continua en análisis, prototipado, pruebas de usabilidad y diseño visual.
• Sumativa: Presentación final del proyecto y reflexión personal en la última sesión.

Criterios de evaluación:

• Analizar principios de UX/UI y aplicarlos en proyectos (Objetivo 1): Evaluado en análisis de sitios web y argumentación en presentaciones.
• Diseñar prototipos con estructura y navegabilidad funcional (Objetivo 2): Evaluado en wireframes y prototipos digitales.
• Evaluar usabilidad mediante pruebas y retroalimentación (Objetivo 3): Evaluado en pruebas pares y formularios de usabilidad.
• Crear soluciones visualmente coherentes y atractivas (Objetivo 4): Evaluado en aplicación de diseño visual y presentaciones.
• Argumentar decisiones basadas en datos y buenas prácticas (Objetivo 5): Evaluado en presentaciones orales y reflexión escrita.

Instrumentos sugeridos:

• Rúbrica de evaluación para presentaciones orales y prototipos.
• Lista de cotejo para análisis de sitios y pruebas de usabilidad.
• Observación directa durante actividades prácticas.
• Portafolio digital con evidencias de trabajo.
• Cuestionarios de autoevaluación y coevaluación.

Evidencias de aprendizaje:

• Informes y análisis escritos de sitios web reales.
• Wireframes en papel y prototipos digitales interactivos.
• Formularios de evaluación de usabilidad completados en pares.
• Prototipos visualmente mejorados y presentaciones finales.
• Reflexiones personales y planes de mejora escritos.