Curso 2023-2024

Gráfica Interactiva. Usabilidad

Titulación
Título de Grado en Enseñanzas Artísticas de Diseño
Nivel de título
Grado
Descripción de la asignatura

Gráfica Interactiva Usabilidad es la continuación de la asignatura Gráfica Interactiva Edición, donde se comienza el camino hacia los perfiles de Diseño de Interacción y desarrollo Web Front-end. 

En esta asignatura se hace especial énfasis en las cuestiones de diseño de interacción, arquitectura de información, usabilidad y accesibilidad en la web. También se trabajan contenidos como el diseño de sistemas y su aplicación en CSS y HTML y el diseño reactivo y adaptativo. 

1. Identificadores de la asignatura
Tipo
Obligatoria de especialidad
Carácter
teórico-práctica
Especialidad / itinerario / estilo / instrumento
Diseño Gráfico
Materia
Tecnología aplicada al diseño gráfico
Periodo de impartición - curso
Periodo de impartición - semestre
2º semestre
Número de créditos
4
Número de horas totales
120
Número de horas presenciales
72
Departamento
Departamento de medios informáticos y audiovisuales
Prelación / requisitos previos

Es aconsejable haber superado las asignaturas de Fundamentos Científicos del Diseño, Tecnología Digital, Tecnología Digital Gráfica y Gráfica Interactiva: Edición.

 

Idioma/s en los que se imparte
Español
2. Profesor responsable de la asignatura
Aparicio de Santiago
Carlos
3. Relación de profesores y grupos a los que imparten docencia
Profesor
García García
Daniel
Grupo
DG2B
Profesor
Aparicio de Santiago
Carlos
Grupo
DG2A
4. Competencias
Competencias transversales
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
12CT Adaptarse, en condiciones de competitividad a los cambios culturales, sociales y artísticos y a los avances que se producen en el ámbito profesional y seleccionar los cauces adecuados de formación continuada
Competencias generales
5CG Actuar como mediadores entre la tecnología y el arte, las ideas y los fines, la cultura y el comercio
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
20CG Comprender el comportamiento de los elementos que intervienen en el proceso comunicativo, dominar los recursos tecnológicos de la comunicación y valorar su influencia en los procesos y productos del diseño
Competencias específicas de Diseño de Gráfico
8CEG Conocer los canales que sirven de soporte a la comunicación visual y utilizarlos conforme a los objetivos comunicacionales del proyecto
11CEG Dominar los recursos tecnológicos de la comunicación visual
5. Resultados del aprendizaje
Resultados del aprendizaje
Identificar la idiosincrasia del desarrollo web: un diseño interactivo, multi soporte, multiplataforma, ...
Desarrollar proyectos web flexibles y adaptables, para que respondan adecuadamente los diferentes escenarios posibles
Diseñar pensando en las expectativas del usuario
Construir sitios web como entidades estructuradas en cuanto a su arquitectura y navegabilidad
Diseñar aplicando el paradigma del diseño para todos y teniendo en mente que el acceso a la información debe ser universal
Aplicar técnicas de optimización para que los sitios web figuren en las posiciones más altas posibles de los resultados de las búsqueda en los buscadores
Desarrollar productos digitales que ofrezcan una experiencia al usuario no sólo funcional, sino también agradable y fácil de usar
6. Contenidos
Contenidos
I.- Responsive Design y Maquetación web
Tema 1. Introducción. Diseño fijo, flexible y adaptable.
I.- Responsive Design y Maquetación web
Tema 2. Media Queries. Maquetación responsive. Navegación. Mobile first.
I.- Responsive Design y Maquetación web
Tema 3. Maquetación avanzada en CSS
I.- Responsive Design y Maquetación web
Tema 4. CSS estratégico, clases modificadoras, SASS
II.- Arquitectura de la información
Tema 4. Sistemas de organización, etiquetado, navegación y búsqueda
II.- Arquitectura de la información
Tema 5. Metodología. Prototipado: desde el wireframe hasta el prototipo interactivo.
III.- Frameworks CSS
Tema 6. Creación de un framework. Design Tokens, Componentes
IV.- Usabilidad. Evaluación web
Tema 7. Características cognitivas. Peculiaridades del espacio web.
IV.- Usabilidad. Evaluación web
Tema 8. Evaluación con usuarios y sin usuarios
V. Accesibilidad web
Tema 9. Conceptos. Web para todos. Pautas de accesibilidad. Evaluación de la accesibilidad
VI. SEO
Tema 10. Introducción. Buscadores y posicionamiento. Factores internos y externos. Técnicas
7. Planificación temporal del trabajo del estudiante
Actividades teórico-prácticas
47 horas
Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)
5 horas
Realización de pruebas
20 horas
Horas de trabajo del estudiante
20 horas
Preparación prácticas
28 horas
8. Metodología
Actividades teóricas

Explicaciones en clase: Explicaciones sobre casos teóricos y módulos teóricos para comprender conceptos relacionados con Usabilidad, Arquitectura de Información, Accesibilidad, etc. siendo estas disciplinas con un marco conceptual concreto que hay que abordar en el aula. 

Estudio de casos: Análisis conjunto en clase de casos de éxito, y casos de uso de aplicación de los conceptos explicados en los módulos teóricos. 

Es aconsejable que los alumnos lean antes los documentos y recursos facilitados por el profesor a través del aula virtual. Esto facilita la participación de los alumnos durante la explicación. El profesor media en este proceso de reelaboración y no tanto en transmisor de información.

 

Actividades prácticas

Aprendizaje basado en proyectos: Se plantean ciertos proyectos durante la asignatura, donde se ponen en práctica los conocimientos adquiridos en los módulos teóricos correspondientes. Dichos proyectos pueden ser de tipo individual o grupal. 

Clases de taller: Donde se pone en práctica conocimientos de carácter procedimental relacionados con diseño o desarrollo, para explicar metodologías de trabajo.

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

No se contempla

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

Examen parcial de contenidos: Se plantea un examen de tipo teórico práctico para evaluar la adquisición de conceptos clave relacionados con los resultados de aprendizaje.

Actividades prácticas

Se van a plantear un conjunto de proyectos de menor a mayor nivel, donde se van aplicando los bloques de contenido. La cantidad de proyectos oscila entre 3 y 5 en función de la profundidad y calado de los proyectos. 

Ello se efectuará analizando si el material presentado por el alumno demuestra el conocimiento teórico de la asignatura y si ha aprovechado los conocimientos de las clases teórico prácticas a realizar.

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

No se contempla

9.2 Criterios de evaluación
Actividades teóricas

Examen parcial de contenidos: Este examen va a ser evaluado con corrección simple, atendiendo a criterios de rigurosidad y claridad en las explicaciones dadas, así como la aplicación en casos de uso.

Actividades prácticas

Los proyectos se evaluarán con una rúbrica en función de los objetivos que se marquen en los correspondientes enunciados. Dichos objetivos están relacionados con los resultados de aprendizaje a abordar en cada tema. 

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

No se contempla

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
25%
Actividades prácticas y otras actividades formativas
65%
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
30%
Pruebas prácticas
70%
9.3.3 Ponderación de instrumentos de evaluación para la evaluación extraordinaria y duración de la prueba
Pruebas escritas
30%
Pruebas prácticas
70%
9.3.4 Ponderación para la evaluación de estudiantes con discapacidad
Actividades teóricas
25%
Actividades prácticas y otras actividades formativas
65%
Actitud y participación
10%
10. Planificación temporal de los contenidos, metodología docente y evaluaciones. Cronograma
Semana 1
Bloque temático
I.- Responsive Design y Maquetación web
Tema / repertorio
Tema 1. Introducción. Diseño fijo, flexible y adaptable.
Actividades teóricas
Metodología
Clase teórica
Competencias
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
17CG Plantear, evaluar y desarrollar estrategias de aprendizaje adecuadas al logro de objetivos personales y profesionales
Actividades prácticas
Actividad
Práctica en aula
Competencias
1CEG Generar, desarrollar y materializar ideas, conceptos e imágenes para programas comunicativos complejos
3CEG Comprender y utilizar la capacidad de significación del lenguaje gráfico
Semana 2
Bloque temático
I.- Responsive Design y Maquetación web
Tema / repertorio
Tema 1. Introducción. Diseño fijo, flexible y adaptable.
Actividades teóricas
Metodología
 Seguimiento guiado paso a paso de ejemplos y resolución de ejercicio similar
Competencias
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
Actividades prácticas
Actividad
 Maquetación y navegación
Metodología
Ejercicio práctico
Competencias
17CG Plantear, evaluar y desarrollar estrategias de aprendizaje adecuadas al logro de objetivos personales y profesionales
2CEG Dominar los recursos formales de la expresión y la comunicación visual
Semana 3
Bloque temático
I.- Responsive Design y Maquetación web
Tema / repertorio
Tema 2. Media Queries. Maquetación responsive. Navegación. Mobile first.
Actividades teóricas
Metodología
 Seguimiento guiado paso a paso de ejemplos y resolución de ejercicio similar
Competencias
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
Actividades prácticas
Actividad
 Maquetación y navegación
Metodología
Ejercicio práctico
Competencias
17CG Plantear, evaluar y desarrollar estrategias de aprendizaje adecuadas al logro de objetivos personales y profesionales
2CEG Dominar los recursos formales de la expresión y la comunicación visual
Semana 4
Bloque temático
I.- Responsive Design y Maquetación web
Tema / repertorio
Tema 3. Maquetación avanzada en CSS
Actividades teóricas
Metodología
Clase teorico-práctica
Competencias
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
Actividades prácticas
Actividad
Maquetación y navegación
Metodología
Ejercicio práctico
Competencias
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
Semana 5
Bloque temático
I.- Responsive Design y Maquetación web
Tema / repertorio
Tema 3. Maquetación avanzada en CSS
Actividades teóricas
Metodología
Clase teórica
Competencias
17CG Plantear, evaluar y desarrollar estrategias de aprendizaje adecuadas al logro de objetivos personales y profesionales
Actividades prácticas
Actividad
 Maquetación y navegación
Metodología
Ejercicio práctico
Competencias
9CT Integrarse adecuadamente en equipos multidisciplinares y en contextos culturales diversos
Semana 6
Bloque temático
I.- Responsive Design y Maquetación web
Tema / repertorio
Tema 4. CSS estratégico, clases modificadoras, SASS
Actividades teóricas
Metodología
Clase teórico-práctica
Competencias
18CG Optimizar la utilización de los recursos necesarios para alcanzar los objetivos previstos
Actividades prácticas
Actividad
 Maquetación y navegación
Metodología
Ejercicio práctico
Competencias
18CG Optimizar la utilización de los recursos necesarios para alcanzar los objetivos previstos
Semana 7
Bloque temático
II.- Arquitectura de la información
Tema / repertorio
Tema 4. Sistemas de organización, etiquetado, navegación y búsqueda
Actividades teóricas
Metodología
Clase teórico-práctica
Competencias
1CEG Generar, desarrollar y materializar ideas, conceptos e imágenes para programas comunicativos complejos
3CEG Comprender y utilizar la capacidad de significación del lenguaje gráfico
Actividades prácticas
Actividad
Creación de un sistema de arquitectura de información
Metodología
Ejercicio práctico
Competencias
1CEG Generar, desarrollar y materializar ideas, conceptos e imágenes para programas comunicativos complejos
3CEG Comprender y utilizar la capacidad de significación del lenguaje gráfico
Semana 8
Bloque temático
II.- Arquitectura de la información
Tema / repertorio
Tema 5. Metodología. Prototipado: desde el wireframe hasta el prototipo interactivo.
Actividades teóricas
Metodología
Clase teórica
Competencias
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
Actividades prácticas
Actividad
Creación de un sistema de arquitectura de información
Metodología
Ejercicio práctico
Competencias
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
Semana 9
Bloque temático
II.- Arquitectura de la información
Tema / repertorio
Tema 5. Metodología. Prototipado: desde el wireframe hasta el prototipo interactivo.
Actividades teóricas
Metodología
Clase teórico-práctica
Competencias
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
Actividades prácticas
Actividad
Prototipado en baja y alta calidad
Metodología
Ejercicio práctico
Competencias
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
Semana 10
Bloque temático
III.- Frameworks CSS
Tema / repertorio
Tema 6. Creación de un framework. Design Tokens, Componentes
Actividades teóricas
Metodología
Clase teórica
Competencias
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
Actividades prácticas
Actividad
Creación de un sistema de diseño en CSS
Semana 11
Bloque temático
III.- Frameworks CSS
Tema / repertorio
Tema 6. Creación de un framework. Design Tokens, Componentes
Actividades teóricas
Metodología
Clase teórico-práctica
Competencias
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
Actividades prácticas
Actividad
Creación de un sistema de diseño en CSS
Metodología
Ejercicio práctico
Competencias
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
Semana 12
Bloque temático
IV.- Usabilidad. Evaluación web
Tema / repertorio
Tema 7. Características cognitivas. Peculiaridades del espacio web.
Actividades teóricas
Metodología
Clase teórico-práctica
Competencias
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
Actividades prácticas
Actividad
Ejercicio de evaluación web
Metodología
Ejercicio práctico
Competencias
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
Semana 13
Bloque temático
IV.- Usabilidad. Evaluación web
Tema / repertorio
Tema 8. Evaluación con usuarios y sin usuarios
Actividades teóricas
Metodología
Clase teórica
Competencias
9CT Integrarse adecuadamente en equipos multidisciplinares y en contextos culturales diversos
Actividades prácticas
Actividad
Ejercicio de evaluación web
Metodología
Ejercicio práctico
Competencias
9CT Integrarse adecuadamente en equipos multidisciplinares y en contextos culturales diversos
Semana 14
Bloque temático
V. Accesibilidad web
Tema / repertorio
Tema 9. Conceptos. Web para todos. Pautas de accesibilidad. Evaluación de la accesibilidad
Actividades teóricas
Metodología
Clase teórica
Competencias
9CT Integrarse adecuadamente en equipos multidisciplinares y en contextos culturales diversos
Actividades prácticas
Actividad
Ejercicio de evaluación web
Metodología
Ejercicio práctico
Competencias
9CT Integrarse adecuadamente en equipos multidisciplinares y en contextos culturales diversos
Semana 15
Bloque temático
VI. SEO
Tema / repertorio
Tema 10. Introducción. Buscadores y posicionamiento. Factores internos y externos. Técnicas
Actividades teóricas
Metodología
Clase teórica
Competencias
9CT Integrarse adecuadamente en equipos multidisciplinares y en contextos culturales diversos
Actividades prácticas
Actividad
Optimización de un proyecto web para SEO
Metodología
Ejercicio práctico
Competencias
9CT Integrarse adecuadamente en equipos multidisciplinares y en contextos culturales diversos
Semana 16
Bloque temático
Proyecto final
Tema / repertorio
Proyecto final
Actividades prácticas
Actividad
Proyecto final
Metodología
Ejercicio práctico
Examen de recuperación
Semana 17
Examen convocatoria ordinaria
Semana 18
Examen convocatoria extraordinaria
11. Recursos y materiales didácticos
Bibliografía general
Responsive Web Design, MARCOTTE, Ethan, A Book Apart, http://abookapart.com, 2012
Mobile first, WROBLEWSKI, Luke, A Book Apart, http://abookapart.com, 2011
Adaptive Web Design, GUSTAFSON, Aaron, Easy Readers, LLC, 2011
Information Architecture, MORVILLE, Peter, ROSENFELD, Louis, O’Reilly. USA 2007.
Arquitectura de la Información en Entornos Web, PÉREZ-MONTORO, Mario, TREA, Gijón 2010
No me hagas pensar. Actualización, KRUG, Steve, Anaya Multimedia, 2014
Bibliografía complementaria
Teoría del hipertexto, LANDOW, George P., Paidós, 1997
El mundo digital, NEGROPONTE, Nicolás, Ediciones B, 1999