Diseño · 2° Bachillerato · Diseño Gráfico y Comunicación Visual · 2.º Período

Diseño de interfaces y experiencia de usuario (UI/UX)

Introducción a los principios del diseño centrado en el usuario para productos digitales. Creación de wireframes, flujos de navegación y prototipos interactivos básicos.

En resumen:El diseño de interfaces (UI) y la experiencia de usuario (UX) son disciplinas esenciales en la era digital. Este tema introduce al alumnado en la creación de productos digitales que no solo sean visualmente atractivos, sino también fáciles de usar y accesibles. Estudiamos cómo se estructura la información, cómo se diseñan los flujos de navegación y la importancia de poner al usuario en el centro de todas las decisiones.

• Competencias Clave LOMLOE
• CE.DI.9.1. Comprender los principios básicos del diseño de interfaces (UI) y experiencia de usuario (UX).
• CE.DI.9.2. Diseñar wireframes y prototipos interactivos básicos para aplicaciones o webs.

Sobre este tema

El diseño de interfaces (UI) y la experiencia de usuario (UX) son disciplinas esenciales en la era digital. Este tema introduce al alumnado en la creación de productos digitales que no solo sean visualmente atractivos, sino también fáciles de usar y accesibles. Estudiamos cómo se estructura la información, cómo se diseñan los flujos de navegación y la importancia de poner al usuario en el centro de todas las decisiones.

La LOMLOE incorpora estas competencias digitales para que los estudiantes comprendan la arquitectura de las aplicaciones y webs que consumen a diario. El aprendizaje activo es fundamental aquí: mediante la creación de wireframes en papel y el testeo de prototipos con compañeros, los alumnos descubren errores de lógica que no verían de forma teórica. Es un proceso de diseño basado en la evidencia y el comportamiento humano.

Preguntas clave

1. ¿Qué diferencia existe entre el diseño de interfaz (UI) y la experiencia de usuario (UX)?
2. ¿Cómo se diseña una navegación intuitiva para una aplicación móvil?
3. ¿Por qué es crucial la accesibilidad en el diseño web contemporáneo?

Atención a estas ideas erróneas

Idea errónea común

UI y UX son lo mismo.

Qué enseñar en su lugar

La UI es la capa visual (colores, botones), mientras que la UX es el proceso y la sensación del usuario al interactuar. Las simulaciones de navegación ayudan a ver que una app bonita (buena UI) puede ser frustrante si es difícil de usar (mala UX).

Idea errónea común

El diseño web es solo para programadores.

Qué enseñar en su lugar

El diseño de la experiencia y la interfaz es una tarea creativa y analítica previa a la programación. El uso de herramientas de prototipado sin código permite a los alumnos centrarse en el diseño puro.

Ideas de aprendizaje activo

Piensa-pareja-comparte

Prototipado en Papel: La App de Cartón

Los alumnos dibujan las pantallas de una app sencilla en tarjetas de papel. Un compañero 'actúa' como el móvil y otro como el usuario, pulsando los 'botones' para ver si la navegación es lógica.

60 min·Parejas

Piensa-pareja-comparte

Análisis de Usabilidad: ¿Dónde está el botón?

Los grupos analizan una web municipal o escolar que sea difícil de usar. Deben identificar tres 'puntos de dolor' y proponer un rediseño del wireframe que solucione esos problemas.

50 min·Grupos pequeños

Piensa-pareja-comparte

Accesibilidad Digital

Se presentan ejemplos de interfaces que no cumplen normas de accesibilidad (poco contraste, botones pequeños). Las parejas proponen cambios para que una persona con visión reducida pueda usarlas.

30 min·Parejas

Preguntas frecuentes

¿Qué es un wireframe?

Es un esquema básico de una interfaz, sin colores ni imágenes finales. Sirve para definir la estructura, la jerarquía de la información y las funcionalidades antes de pasar al diseño visual.

¿Por qué es importante el diseño 'Mobile First'?

Porque la mayoría de los usuarios acceden desde el móvil. Diseñar primero para pantallas pequeñas obliga a priorizar el contenido esencial y garantiza una mejor experiencia en todos los dispositivos.

¿Cómo ayuda el aprendizaje activo a entender la UX?

Al observar a un compañero intentar usar un prototipo que ellos han diseñado, los alumnos ven de inmediato dónde se confunde el usuario. Esta retroalimentación directa es más potente que cualquier lección teórica sobre usabilidad.

¿Qué es la arquitectura de la información?

Es la forma en que se organiza y etiqueta el contenido de un sitio web o app para que los usuarios encuentren lo que buscan de la manera más eficiente posible.