Curso 2025-2026

INTERFACES GRÁFICAS DE USUARIO

Titulación
Máster en Enseñanzas Artísticas en Diseño Interactivo
Nivel de título
Máster
Descripción de la asignatura

Esta asignatura se centra en los fundamentos y procesos avanzados del Diseño de Interfaces de Usuario (UI Design). A través de un enfoque técnico, metodológico y creativo, se aborda la creación de sistemas visuales, uniendo la dirección de arte con la experiencia de usuario.

El objetivo fundamental es que el alumnado sea capaz de proyectar un sistema de diseño profesional que sirva de base para soluciones digitales. Para ello, se trabajará desde la definición de los principios visuales de la marca (tipografía, color y retícula) hasta la construcción de componentes reutilizables y escalables mediante metodologías como el diseño atómico, garantizando una consistencia estética y operativa en entornos multisoporte.

1. Identificadores de la asignatura
Tipo
Optativa de especialidad
Carácter
Teórico - Práctico
Especialidad / itinerario / estilo / instrumento
Máster en Diseño de Interacción
Materia
Tecnología aplicada al Diseño
Periodo de impartición - curso
MDI
Periodo de impartición - semestre
1º semestre
Número de créditos
3
Número de horas totales
75
Número de horas presenciales
45
Departamento
Departamento de medios informáticos y audiovisuales
Prelación / requisitos previos

Sin requisitos previos

Idioma/s en los que se imparte
Español
2. Profesor responsable de la asignatura
Huelves Illas
Iván
3. Relación de profesores y grupos a los que imparten docencia
Profesor
Huelves Illas
Iván
Grupo
MDI
4. Competencias
Competencias transversales
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
15CT Trabajar de forma autónoma y valorar la importancia de la iniciativa y el espíritu emprendedor en el ejercicio profesional
Competencias generales
3CG Establecer relaciones entre el lenguaje formal, el lenguaje simbólico y la funcionalidad específica
Competencias generales Máster en diseño de Interacción
CB1 Poseer y comprender conocimientos que aporten una base u oportunidad de ser originales en el desarrollo y en la aplicación de ideas, a menudo en un contexto de investigación
CB3 Integrar conocimientos y enfrentarse a la complejidad de formular juicios a partir de una información que, siendo incompleta o limitada, incluya reflexiones sobre las responsabilidades sociales y éticas vinculadas a la aplicación de sus conocimientos
CB4 Comunicar sus conclusiones, y los conocimientos y razones últimas que las sustentan, a públicos especializados y no especializados de un modo claro y sin ambigüedades
CB7 Reconocer la necesidad del cambio y tener las habilidades para actuar de forma independiente, anticipar y adaptarse a las transformaciones en contextos de ambigüedad e incertidumbre
Competencias específicas Máster en diseño de Interacción
CE1 Conocer y manejar conceptos avanzados relativos al diseño interactivo que permitan reconocer problemas y oportunidades en el análisis y la ejecución de proyectos en todo tipo de organizaciones e instituciones
CE2 Realizar proyectos de diseño interactivo apropiados a los condicionantes comunicativos, tecnológicos y capaces de atender a los requerimientos de accesibilidad a la información
CE5 Aportar valor mediante la creatividad y la participación dentro de un equipo multidisciplinar y desarrollar las habilidades directivas para ejercer responsabilidades en proyectos avanzados de diseño interactivo
CE6 Adquirir un conocimiento integral del contexto social y organizativo en que se desarrollan los proyectos avanzados de diseño interactivo y dar una respuesta a las necesidades y demandas profesionales, organizativas y sociales, modificando e Introducie
CE8 Desarrollar metodologías de investigación avanzadas en el ámbito del diseño interactivo que permitan una utilización innovadora de las tecnologías aplicables al diseño y a la comunicación
5. Resultados del aprendizaje
Resultados del aprendizaje
Proyectar sistemas de diseño profesionales y escalables, integrando una visión estratégica que garantice la consistencia visual y operativa en entornos digitales multisoporte.
Ejercer la dirección de arte en productos interactivos, mediante la definición técnica de tokens visuales (tipografía, color, retícula y estilos de forma) alineados con los valores y el moodboard de la marca.
Construir librerías de componentes reutilizables basadas en metodologías modulares (como el diseño atómico), para organizar de forma jerárquica elementos de interfaz desde niveles básicos hasta organismos complejos.
Estructurar la arquitectura de información y la navegación en pantalla, aplicando criterios de jerarquía visual y legibilidad para resolver problemas de diseño en dispositivos móviles y de escritorio.
Desarrollar prototipos de alta fidelidad que simulen flujos de usuario e interacciones complejas, permitiendo la validación funcional de la interfaz (navegación entre vistas, estados de componentes y gestión de datos).
6. Contenidos
Contenidos
La interfaz.
Definición, historia y desarrollo.
La interfaz
La navegación como forma de lectura e interacción
La interfaz
El soporte variable de la pantalla. El pixel como cuadricula formal.
Elementos básicos de la interfaz gráfica
Estructura, cuadrícula y retícula
Elementos básicos de la interfaz gráfica
La tipografía digital y los iconos
Elementos básicos de la interfaz gráfica
El color digital.
Los sistemas de diseño
Definición. Principios y finalidades
Los sistemas de diseño
Componentes. Funciones y estructura. Atomic design
Los sistemas de diseño
Relaciones signo / código/ acción.
Diseño de interfaz para producto digital
Historias de usuario. Actores, escenarios y contextos
Diseño de interface para producto digital
Dirección de arte. Estilos y tendencias
Diseño de interface para producto digital
Prototipado
7. Planificación temporal del trabajo del estudiante
Actividades teórico-prácticas
41 horas
Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)
0 horas
Realización de pruebas
4 horas
Horas de trabajo del estudiante
26 horas
Preparación prácticas
4 horas
8. Metodología
Actividades teóricas
  • Evaluación de competencias de partida: Sesiones iniciales orientadas a determinar el nivel de conocimiento en relación con la asignatura (individual).

  • Exposiciones magistrales participativas: Exposición de los fundamentos teóricos, históricos y conceptuales de la asignatura (colectiva).

  • Sesiones técnicas instrumentales: Formación en el uso de herramientas digitales en relación a la asignatura (colectiva).

  • Análisis de casos: Estudio crítico de referentes para extraer conclusiones aplicables al desarrollo de la asignatura (Colectiva).

  • Comunicación y defensa pública: Presentación oral argumentada de los fundamentos que sustentan las decisiones de diseño adoptadas en las actividades (Colectiva).

  • Foros de debate dirigido: Sesiones de intercambio de ideas para profundizar en los discursos actuales, tendencias y el impacto social de los contenidos de la asignatura a partir de materiales proporcionados (Colectiva).

Actividades prácticas

Desarrollo proyectual de un sistema de diseño (Design System) para un producto digital multisoporte (smartphone y desktop). La actividad práctica se estructura en torno a la detección de problemas de interfaz en servicios reales (auditoría visual), la definición de una dirección de arte estratégica y la construcción de una biblioteca de componentes jerarquizada (siguiendo metodologías como el diseño atómico). El resultado final consiste en la elaboración de un prototipo interactivo de alta fidelidad (Hi-Fi) realizado con software estándar de la industria (Figma) que valide los flujos de navegación, la jerarquía de los design tokens y la respuesta del sistema ante diferentes estados de usuario.

  • Aprendizaje Basado en Proyectos: Desarrollo autónomo de un sistema de diseño y prototipado para un producto digital multisoporte.

  • Tutorías personalizadas: Sesiones de seguimiento y tutoría destinadas a la resolución de problemas específicos durante el desarrollo de las actividades (Individual).

  • Actividades cortas: De carácter práctico y exploratorio.

Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)

E ESE DAYS

Se participará en los E ESE DAYS, las jornadas de diseño programadas en la Escuela. Las actividades que se desarrollen en esos días, formarán parte  de las actividades de la asignatura.

Siguiendo las instrucciones de inicio de curso, se refleja que el porcentaje mínimo de asistencia del alumno para la evaluación continua, no puede ser inferior al 80% del porcentaje total de las sesiones impartidas

9. Instrumentos y criterios de evaluación y calificación
9.1 Instrumentos de evaluación
Actividades teóricas

Aunque la carga teórica se integra principalmente en el desarrollo de los ejercicios, se utilizarán instrumentos específicos para evaluar la capacidad del alumnado en relación a estas actividades:

  • Participación proactiva y estructurada: Evaluación de las intervenciones (atendiendo tanto a la preparación previa del discurso como a la solidez de la argumentación).

  • Análisis colaborativo de casos: Valoración de la capacidad crítica para extraer conclusiones aplicables al diseño profesional mediante el estudio conjunto de referentes y situaciones reales.

  • Defensa y comunicación oral: Evaluación de la presentación pública de las actividades (poniendo el foco en la claridad expositiva y el uso preciso del vocabulario técnico de la disciplina).

  • Pruebas escritas: De carácter teórico relativas al contenido de la asignatura.

Estas actividades se evaluarán mediante instrumentos de observación sistemática (como escalas de valoración y registros de seguimiento analítico) que permitan medir de forma objetiva el nivel de adquisición de las competencias del alumnado.

Actividades prácticas
  • Proyecto integral: Desarrollo de un sistema de diseño.

  • Defensa y comunicación de resultados: Presentación pública y defensa de los ejercicios prácticos en el aula (poniendo el foco en la capacidad del alumnado para argumentar sus soluciones gráficas y técnicas frente al grupo).

La evaluación de estas actividades se realizará mediante rúbricas de desempeño. Estas matrices permitirán valorar de forma pormenorizada los diferentes aspectos de los ejercicios.

Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)

Las actividades formativas de carácter obligatorio se evaluarán mediante los siguientes instrumentos:

  • Registro de participación y observación directa: Valoración de la asistencia activa y la implicación del alumnado durante la actividad externa.

  • Escalas de valoración del aprovechamiento: Evaluación de la capacidad del estudiante para vincular los contenidos observados durante la visita con los conceptos teóricos y prácticos desarrollados en el aula (pudiendo requerir la entrega de una breve reseña o diario de aprendizaje).

9.2 Criterios de evaluación
Actividades teóricas

En relación a la participación y el discurso en el aula:

  • Implicación proactiva: Se valorará la asistencia presencial activa y la capacidad del alumnado para integrarse en los debates desde una postura crítica, fundamentada y respetuosa.

  • Calidad de la argumentación: Capacidad para estructurar intervenciones orales que demuestren una preparación previa de los temas tratados.

En relación a los estudios de caso, investigación y análisis de lecturas:

  • Rigor en el uso de fuentes: Se deberá hacer uso de herramientas de investigación y fuentes bibliográficas o profesionales de la disciplina del diseño.

  • Actualización de tendencias: Capacidad para reflejar el conocimiento de las corrientes actuales (a nivel técnico, formal y semántico) mediante el análisis de referentes y su aplicación en las propuestas propias.

  • Contextualización cultural: En la elaboración de las actividades se evaluará la capacidad para integrar los discursos culturales actuales y reflexionar sobre el papel de los contenidos de la asignatura en la sociedad contemporánea.

Actividades prácticas

Criterios de valoración del proyecto y ejercicios: Para la calificación de las actividades prácticas, se aplicará una rúbrica de evaluación que atenderá a los siguientes indicadores:

  • Conceptualización y resolución del producto digital: Capacidad para identificar oportunidades de mejora y proponer soluciones de diseño coherentes y funcionales.

  • Arquitectura de información y flujos de navegación: Eficacia en la organización de los contenidos y en la definición de la experiencia de navegación entre las distintas vistas.

  • Estructura, retícula y maquetación (Layout): Rigor en el uso de sistemas de rejilla (tanto en versión escritorio como móvil) y en la composición visual de la interfaz.

  • Definición y jerarquía de Design Tokens: Gestión técnica y sistemática de la tipografía (especificando jerarquías y unidades en px/rem), el color y los estilos de forma.

  • Construcción de bibliotecas de componentes: Aplicación de metodologías escalables (como el diseño atómico) para la creación de componentes reutilizables y sus diferentes estados (enabled, hover, disabled).

  • Prototipado interactivo y presentación: Calidad técnica del prototipo de alta fidelidad y claridad en la exposición de las soluciones de diseño adoptadas.

En relación a las convocatorias ordinaria y extraordinaria (Evaluación mediante prueba final):

  • Duración: La totalidad de la prueba teórico-práctica tendrá una duración de 6 horas.

  • Ponderación y mínimos: La parte teórica representa el 40% de la nota final y la parte práctica representa el 60% de la nota final. Es requisito indispensable obtener una calificación mínima de 5 en cada una de las partes para promediar con la otra parte.

  • Protocolo de acceso: No se permitirá la entrada al examen a aquellos estudiantes que se presenten transcurridos 15 minutos desde el inicio de la prueba.

  • Exclusividad de la calificación: Para la nota final de la asignatura a través de estas convocatorias, la calificación dependerá exclusivamente del resultado de la prueba (no se tendrán en cuenta los trabajos realizados durante el cuatrimestre).

Otras consideraciones y normativa del centro:

  • Gestión de entregas fuera de plazo: El retraso en la entrega de las actividades supondrá una penalización de 0,5 puntos por cada semana lectiva transcurrida. Esta penalización no podrá rebajar la nota obtenida por debajo del aprobado (5).

  • Actividades obligatorias y recuperación: Solo las actividades indicadas como obligatorias requieren una calificación mínima de 5 para superar la asignatura. Las tareas no obligatorias no entregadas se calificarán con un 0.

  • Propiedad intelectual: El plagio supone una calificación de cero en la actividad. Es obligatorio citar correctamente todas las fuentes de terceros.

  • Asistencia y evaluación continua: Resulta obligatoria la asistencia al 80% de las sesiones presenciales. Superar el 20% de faltas (contabilizándose también como tales los retrasos que excedan el tiempo establecido) conlleva la pérdida del derecho a la evaluación continua. En este caso, el estudiante deberá presentarse a la evaluación ordinaria o extraordinaria.

Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)

En relación a las actividades externas:

  • Curiosidad intelectual e implicación: Se valorará la actitud proactiva durante la actividad.
  • Capacidad de transferencia: Se evaluará la aptitud del alumnado para vincular los conocimientos adquiridos fuera del aula con el desarrollo de sus propios proyectos.
  • Análisis crítico: Capacidad para reflexionar sobre la importancia del contenido de la actividad en el ejercicio profesional del diseño gráfico.
  • Rigor en el registro: En caso de solicitarse una memoria o diario de aprendizaje, se tendrá en cuenta la capacidad de síntesis y la correcta utilización del vocabulario técnico adquirido durante la visita.
9.3 Criterios de calificación
9.3.1 Ponderación de los instrumentos de evaluación para la evaluación continua
Actividades teóricas
0%
Actividades prácticas y otras actividades formativas
90%
Actitud y participación
10%
9.3.2 Ponderación de instrumentos de evaluación para la evaluación con perdida de la evaluación continua y duración de la prueba
Pruebas escritas
40%
Pruebas prácticas
60%


Una vez comenzado el examen, se permitirá un máximo de 15 minutos de retraso, pero se descontará de la duración de dicho examen. A partir del minuto 16, no se permitirá la entrada al aula y el estudiante perderá su derecho a examen.

 

9.3.3 Ponderación de instrumentos de evaluación para la evaluación extraordinaria y duración de la prueba
Pruebas escritas
40%
Pruebas prácticas
60%


Una vez comenzado el examen, se permitirá un máximo de 15 minutos de retraso, pero se descontará de la duración de dicho examen. A partir del minuto 16, no se permitirá la entrada al aula y el estudiante perderá su derecho a examen.

 

9.3.4 Ponderación para la evaluación de estudiantes con discapacidad
Actividades teóricas
0%
Actividades prácticas y otras actividades formativas
80%
Actitud y participación
20%


Se seguirán las indicaciones del Marco ético y guía de buen uso de la inteligencia artificial en el diseño publicadas por la ESDM

 

10. Planificación temporal de los contenidos, metodología docente y evaluaciones. Cronograma
Semana 1
Bloque temático
La interfaz
Tema / repertorio
Definición, historia y desarrollo. La navegación como forma de lectura e interacción.El soporte variable de la pantalla
Actividades teóricas
Metodología
teórica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
3CG Establecer relaciones entre el lenguaje formal, el lenguaje simbólico y la funcionalidad específica
Actividades prácticas
Actividad
Análisis de interfaces.
Metodología
seminario
Semana 2
Bloque temático
Manejo de componentes
Tema / repertorio
Diseño de componentes simples - Componentes en FIGMA
Actividades teóricas
Metodología
teórica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
3CG Establecer relaciones entre el lenguaje formal, el lenguaje simbólico y la funcionalidad específica
Actividades prácticas
Actividad
Preparación de componentes básicos
Metodología
práctica
Semana 3
Bloque temático
Manejo de componentes
Tema / repertorio
Diseño de componentes simples - Componentes en FIGMA
Actividades teóricas
Metodología
teórica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
3CG Establecer relaciones entre el lenguaje formal, el lenguaje simbólico y la funcionalidad específica
Semana 4
Bloque temático
Manejo de componentes
Tema / repertorio
Herencia de componentes, swaping y manejo de estado
Actividades teóricas
Metodología
teórica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
3CG Establecer relaciones entre el lenguaje formal, el lenguaje simbólico y la funcionalidad específica
Semana 5
Bloque temático
Navegación
Tema / repertorio
Navegación en diferentes contextos
Actividades teóricas
Metodología
teórica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
3CG Establecer relaciones entre el lenguaje formal, el lenguaje simbólico y la funcionalidad específica
Actividades prácticas
Actividad
Proyecto final - Primeros pasos
Metodología
práctica
Semana 6
Bloque temático
Dirección de arte digital
Tema / repertorio
Aplicación de sistemas y metodologías de investigación
Actividades teóricas
Metodología
teórica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
3CG Establecer relaciones entre el lenguaje formal, el lenguaje simbólico y la funcionalidad específica
Semana 7
Bloque temático
Dirección de arte digital
Tema / repertorio
Aplicación de sistemas y metodologías de investigación
Actividades teóricas
Metodología
teórica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
3CG Establecer relaciones entre el lenguaje formal, el lenguaje simbólico y la funcionalidad específica
Semana 8
Bloque temático
Dirección de arte digital
Tema / repertorio
Proyecto final
Actividades teóricas
Metodología
teórica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
3CG Establecer relaciones entre el lenguaje formal, el lenguaje simbólico y la funcionalidad específica
Actividades prácticas
Actividad
Proyecto final
Semana 9
Bloque temático
Examen Ordinario
Tema / repertorio
Examen Ordinario
Actividades teóricas
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
3CG Establecer relaciones entre el lenguaje formal, el lenguaje simbólico y la funcionalidad específica
Examen convocatoria ordinaria
11. Recursos y materiales didácticos
Bibliografía general
The Modern Web Design Process, Moore Williams, John, Webflow
Designing for the web, Boulton, Mark, Five simple steps
Fundamental UI Design, Portman, Jane, UI Breakfast
Bibliografía complementaria
Otros materiales y recursos didácticos
  • Programas de edición de imágenes como Adobe Photoshop. 
  • Programas de edición de gráficos vectoriales como Adobe Illustrator. 
  • Programas de prototipado UI como Figma. 
  • Navegador Google Chrome o Mozilla Firefox.
  • Conexión a internet en el aula. Proyector en el aula.