UX/UI para el desarrollo de interfaces web

Objetivos

• ✓ Diferenciar la experiencia de usuario (UX) y el diseño de interfaces (UI), y situarlos en el módulo de Diseño de Interfaces Web.
• ✓ Conocer al usuario de una web (sus necesidades, objetivos y dificultades) para planificar su interfaz.
• ✓ Organizar los contenidos de una web y prototipar interfaces con Figma.
• ✓ Definir el diseño visual de una interfaz y documentarlo en una guía de estilos.
• ✓ Evaluar y mejorar la accesibilidad de una interfaz web siguiendo las pautas WCAG.
• ✓ Evaluar la usabilidad de una interfaz web con las heurísticas de Nielsen y pruebas con usuarios.

Contenidos

1. 01

   UX y UI

   • Qué es la experiencia de usuario y qué es la interfaz
   • El diseño centrado en el usuario
   • La UX/UI en el módulo de Diseño de Interfaces Web
2. 02

   Conocer al usuario

   • Investigación de usuarios
   • Personas
   • Mapa de empatía
   • Recorrido del usuario (user journey)
   • Práctica. Define el usuario de un proyecto
3. 03

   Arquitectura de la información y prototipado

   • Organización de contenidos y navegación
   • Bocetos, wireframes, mockups y prototipos
   • Prototipado con Figma
   • Práctica. Prototipa una interfaz
4. 04

   Diseño visual y guía de estilos

   • Color, tipografía y jerarquía visual
   • Componentes de la interfaz
   • La guía de estilos web: para qué sirve y qué secciones tiene
   • Sistemas de diseño
   • Práctica. Elabora una guía de estilos
5. 05

   Accesibilidad

   • Por qué una web accesible
   • Pautas WCAG
   • Herramientas de verificación
   • Práctica. Evalúa la accesibilidad de una web
6. 06

   Usabilidad

   • Principios de usabilidad
   • Heurísticas de Nielsen
   • Pruebas con usuarios
   • Práctica. Haz una evaluación heurística

Metodología

Para el seguimiento del curso se utilizará un aula virtual en Moodle que dispondrá de los siguientes recursos:

• Documentación y videotutoriales para el seguimiento de los contenidos.
• Fichas de cada práctica, con ejemplos para usar en el aula.
• Recursos digitales: enlaces y guías didácticas.
• Foro abierto para todas las personas participantes en el que se podrán exponer dudas, propuestas, etc.
• Las prácticas se realizan de manera individual y se valoran para cada participante.
• Seguimiento continuo durante todo el curso.

Requisitos

• Ordenador con navegador y conexión a Internet.
• Cuenta gratuita de Figma.