Clase Taller Diseño Plataformas Digitales semana 15/10/2025

Unidad II: Configuración de visualización de App

Introducción

La asignatura Taller Diseño Plataformas Digitales busca que los estudiantes sean capaces de idear, estructurar, diseñar, prototipar y testear aplicaciones digitales centradas en las necesidades reales de los usuarios. En esta segunda evaluación, los estudiantes aplicarán los conocimientos adquiridos sobre diseño de interfaz y directrices de usabilidad para desarrollar la configuración de visualización de una App híbrida, es decir, una aplicación que pueda adaptarse a diferentes dispositivos y pantallas.
El objetivo de este trabajo es comprender cómo la estructura, la navegación, la pauta gráfica y la interacción deben coexistir para construir una experiencia visual coherente, funcional y adaptable, reforzando la capacidad de diseñar bajo metodologías de diseño centrado en el usuario.

Desarrollo

En esta evaluación, los estudiantes trabajarán en duplas, desarrollando una presentación visual (en formato PDF o canvas digital) que dé cuenta del proceso completo de diseño de interfaz.

1. Estructura general de la presentación

La presentación deberá contener los siguientes apartados:

• Portada

  • Título: Diseño wireframe App Juntemonos

  • Nombres de los integrantes

2. Árbol de navegación App

Se debe proponer la estructura jerárquica del contenido y navegación de la aplicación, representando visualmente cómo se relacionan las pantallas principales y secundarias.
Este árbol debe reflejar las necesidades del usuario y los requerimientos del brief, asegurando claridad, coherencia y una navegación intuitiva.

3. Diseño Wireframe – Material System (MS)

El desarrollo de esta sección debe considerar las directrices de diseño de Google (Material System) e incluir:

• Esquema de retícula: presentación y justificación de la estructura de columnas y márgenes aplicadas a las pantallas.

• Esquema de menús y/o botones: definición de elementos interactivos y su disposición jerárquica.

• Esquemas de íconos: coherencia visual y funcional con el estilo Android.

• Prototipo de cada pantalla: wireframes de baja o media fidelidad que representen la estructura completa de la App en entorno Android.

4. Diseño Wireframe – Human Interface Guidelines (HIG)

Se deben adaptar las mismas pantallas al sistema operativo iOS, respetando las guías de Apple (HIG).

• Esquema de retícula: justificación del cambio de proporciones y márgenes según HIG.

• Esquema de menús y/o botones: aplicación del patrón visual propio de iOS.

• Esquemas de íconos: diseño minimalista y limpio, de acuerdo con el sistema visual de Apple.

• Prototipo de cada pantalla: versión adaptada del wireframe, mostrando la coherencia entre ambos sistemas.

5. Prototipos funcionales en Figma

Los estudiantes deberán generar dos prototipos interactivos en Figma:

• Uno basado en Material System (MS).

• Otro adaptado a Human Interface Guidelines (HIG).

Cada prototipo debe permitir navegar entre las pantallas principales, evidenciando el flujo y la interacción del usuario con la App.

6. Formato de entrega

Los estudiantes deberán compartir 3 enlaces públicos:

1. Link de descarga o visualización pública de la presentación (PDF, Canvas, etc).

2. Link público al prototipo Figma (MS).

3. Link público al prototipo Figma (HIG).

Conclusión

Esta segunda evaluación permite consolidar el aprendizaje adquirido sobre diseño de interfaces multiplataforma, donde la coherencia visual, la estructura de navegación y la adaptabilidad son esenciales. A través del desarrollo de wireframes híbridos y prototipos funcionales, los estudiantes demostrarán su capacidad de trasladar una idea conceptual a una interfaz que funcione en diversos contextos y dispositivos, integrando estética, funcionalidad y experiencia de usuario.

Relación con los criterios de evaluación

• 2.1.1: El árbol de navegación evidencia la organización estructural del contenido y la respuesta a las necesidades del usuario y del brief.

• 2.1.2: La pauta de estilo gráfico refleja la coherencia conceptual y la vinculación con el perfil del usuario.

• 2.1.3: La integración de la pauta de estilo en los wireframes demuestra la aplicación correcta de parámetros y propiedades de diseño de interfaz.

• 2.1.4: Las diferentes visualizaciones en MS y HIG ponen en práctica los principios de usabilidad, funcionalidad e interacción, evidenciando el dominio de diseño en entornos multiplataforma.

Indicaciones de entrega

En la plataforma AAI se habilitará la tarea para que carguen la documentación en la fecha correspondiente.  Para la recepción del proyecto el estudiante debe tener como mínimo el 60% de asistencia a clases de la unidad, caso contrario será evaluado directamente con la nota mínima. Una vez finalizado el plazo, se bloqueará el acceso a subir la tarea.  Se recomienda evitar realizar la carga en el último minuto, dado que existe la posibilidad de fallas en el sistema y problemas de conexión que podrían surgir. Es aconsejable planificar con antelación para prevenir inconvenientes. NO SE RECIBIRÁN ENTREGAS POR CORREO O CHAT sin excepciones.  Aquellos que no envíen el proyecto en las fechas de evaluación recibirán una calificación mínima, a menos que justifiquen su ausencia de acuerdo con los protocolos establecidos en el Reglamento Académico.