Curso 2023-2024

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 está orientada a trabajar aspectos relacionados con Diseño Gráfico en Interfaces Gráficas de Usuario, conocido a nivel internacional como UI-Design. En esta asignatura vamos a abordar aspectos ténicos, metológicos y creativos para la generación de interfaces, así como para la inclusión de manejo de sistemas de componentes, branding, tipografía, ect..

El objetivo básico es que el alumno sea capaz de genera un Design System profesional que pueda ser la base de un diseño estratégico con componentes reusables y escalables. Vamos a ver cómo se puede generar un sistema de este tipo desde el Diseño para implementar en HTML y CSS.

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
MDI
Coordinador
3. Relación de profesores y grupos a los que imparten docencia
Profesor
Genérico Genérico
Profesor
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
4CG Tener una visión científica sobre la percepción y el comportamiento de la forma, de la materia, del espacio, del movimiento y del color
18CG Optimizar la utilización de los recursos necesarios para alcanzar los objetivos previstos
19CG Demostrar capacidad crítica y saber plantear estrategias de investigación
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
Relacionar el espacio interactivo y la navegación con el espacio impreso y la lectura.
Estructurar y comprender el espacio gráfico de la pantalla.
Definir los elementos gráficos de un sistema visual, sus significados, funciones y estructura.
Construir sistemas de diseño y sus componentes mediante programa de prototipado.
Ejercer la dirección artística de las aplicaciones.
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 icónos
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. Atom design
Los sistemas de diseño
Relaciones signo / código/ acción.
Diseño de interface 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
45 horas
Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)
0 horas
Realización de pruebas
0 horas
Horas de trabajo del estudiante
30 horas
Preparación prácticas
0 horas
8. Metodología
Actividades teóricas
  • Sondeo de conocimientos previos para poder estimar el nivel de conocimiento relacionado con la materia. (Individual).
  • Exposición teórica profesor-alumnos con los contenidos teóricos más relevantes. (Colectiva).
  • Exposición práctica del uso de software en donde mostraremos a los alumnos el uso de las herramientas. (Colectiva).
  • Actividades de gamificación para facilitar la adquisición de contenidos teóricos. (Individual / colectiva).
  • Lecturas, análisis y debates de textos en el aula en relación a los contenidos. Entre dos y cuatro lecturas. (Individual).
Actividades prácticas

Construcción de la interfaz para un producto digital básico, organizando la navegación, el sistema de componentes, la dirección de arte y presentando un prototipo realizado con herramientas especializadas en diseño web, sistemas y prototipado.

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

No se contemplan

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

Se evaluará la participación de los alumnos durante actividades teóricas y debates por medio de un registro anecdótico y lista de cotejo.

Actividades prácticas

Se realizarán un proyecto de interfaz gráfica mediante el diseño de un pequeño producto digital. evaluado a partir de una rúbrica.

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

No se contemplan.

9.2 Criterios de evaluación
Actividades teóricas

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

  • Asistencia presencial activa, implicándose en los debates desde una postura crítica y respetuosa.

En relación al análisis de las lecturas:

  • Se deberá de hacer uso herramientas de investigación y fuentes propias de la disciplina de diseño.
  • Se deberá de reflejar el conocimiento en las últimas tendencias a través del análisis, debates y exposiciones.
  • En la elaboración de las actividades será posible apreciar la integración de los discursos culturales actuales en relación a la materia y su papel en la sociedad.
  • La participación no podrá contener errores gramaticales o de expresión.

Otras consideraciones:

El retraso en la entrega de cualquiera de las actividades supondrá una penalización de 0,5 puntos por cada semana lectiva que transcurra. No obstante, la penalización no podrá rebajar la nota obtenida por debajo de cinco.

Los ejercicios prácticos será obligatoria su entrega y calificación de apto (nota igual o mayor que cinco) para superar la asignatura. Si el alumno no supera alguna de las actividades obligatorias (nota final menor que 5) tendrá derecho a una segunda entrega o recuperación durante la semana 17. El resto de actividades que no se hayan entregado serán calificadas con una puntuación de cero y hará media con el resto de calificaciones.

El plagio es un delito contra la propiedad intelectual. En caso de utilizar contenidos de terceros, ninguna fuente debe dejar de ser citada. Si el alumno utiliza contenidos de fuentes no citadas y los hace pasar por originales supondrá una calificación de cero en la actividad.

Si el estudiante no supera la asignatura durante la evaluación continua (nota final menor que 5) podrá presentarse a la evaluación extraordinaria.

Si el estudiante supera el 20% de faltas de asistencia perderá el derecho a la evaluación continua. Para superar la asignatura tendrá que presentarse a la evaluación ordinaria o extraordinaria. El alumno podrá calcular su porcentaje de asistencia hasta la fecha de consulta a través del registro en el aula virtual. Una vez supere el 20% de faltas de asistencia será notificado de la pérdida de evaluación continua a través de un mensaje en el correo institucional del centro. Para el cálculo del porcentaje se contará a partir de la primera sesión y no la fecha de auto-matriculación del alumno en el aula virtual.

En relación a la convocatoria ordinaria/extraordinaria:

  • La duración de la prueba teórica será de 1 hora.
  • Dicha prueba teórica representará un 40%  de la nota final y será necesario superar esta prueba con al menos una calificación de 5.
  • No se admitirá a aquellos estudiantes que  se presenten pasados 15 minutos del comienzo de la prueba.
  • En ningún caso para la calificación final de la asignatura  a través de cualquiera de estas dos convocatorias  se tendrán en cuenta trabajos realizados en la asignatura.
Actividades prácticas

En relación a los ejercicios prácticos se valorarán los siguientes items:
Realización y presentación del producto digital.
Navegación.
Estructura y maquetación.  
Definición de elementos básicos.
Diseño de componentes.
Prototipado y presentación.

En relación a la convocatoria ordinaria/extraordinaria:

  • La duración de la prueba práctica será de 5 horas.
  • Dicha prueba práctica representará un 60%  de la nota final y será necesario superar esta prueba con al menos una calificación de 5.
  • No se admitirá a aquellos estudiantes que  se presenten pasados 15 minutos del comienzo de la prueba.
  • En ningún caso para la calificación final de la asignatura a través de cualquiera de estas dos convocatorias se tendrán en cuenta trabajos realizados en la asignatura.
Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)

No se contemplan

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%
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%
9.3.4 Ponderación para la evaluación de estudiantes con discapacidad
Actividades teóricas
0%
Actividades prácticas y otras actividades formativas
90%
Actitud y participación
10%
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 Gimp o Adobe Photoshop. 
  • Programas de edición de gráficos vectoriales como Inkscape o Adobe Illustrator. 
  • Programas de prototipado UI como Figma o Sketch. 
  • Navegador Google Chrome o Mozilla Firefox.
  • Conexión a internet en el aula. Proyector en el aula.