Clase Taller Diseño Plataformas Digitales semana 25/08/2025

Recomendaciones diseño de retícula

Para diseñar una retícula limpia en iOS y Android que no interfiera con los iconos del sistema (como la batería, la hora o las barras de navegación), debes respetar las llamadas Zonas Seguras (Safe Areas).

El margen superior e inferior absoluto que debes dejar libre en tus diseños es el siguiente:

📱 iOS (iPhones con Dynamic Island / Notch y Face ID)

• Margen Superior (Status Bar): 47 pt a 59 pt (varía según el modelo, pero 54 pt es el estándar seguro actual para cubrir la Dynamic Island).
• Margen Inferior (Home Indicator): 34 pt (el espacio reservado para la barra de inicio de iOS).

🤖 Android (Dispositivos modernos de pantalla completa)

• Margen Superior (Status Bar): 24 dp a 48 dp (varía según la marca y la perforación de la cámara; 48 dp es la recomendación estándar de Material Design 3).
• Margen Inferior (Navigation Bar): 48 dp (el espacio que ocupa la barra de tres botones o la barra de gestos del sistema).

📏 Cómo estructurar tu retícula (Grid System)

Para que tus diseños sean simétricos y profesionales, integra estos márgenes del sistema dentro de tu estructura de columnas:

• Puntos de inicio del contenido: Tu contenido real (títulos, botones de la app, imágenes) debe comenzar debajodel margen superior y terminar antes del margen inferior.
• Márgenes laterales (Padding): Usa un estándar de 16 pt/dp o 24 pt/dp en los bordes izquierdo y derecho de la pantalla para pantallas móviles.
• Regla de incremento: Diseña basándote en una retícula de 8 pt/dp (todos tus elementos, espacios y cajas deben ser múltiplos de 8: 8, 16, 24, 32, 48, 64, etc.).

📏 1. Dimensiones de Pantalla Estándar (Artboards / Frames)

Para diseñar interfaces móviles hoy en día, utiliza estos tamaños de lienzo como base. Son los tamaños estándar de la industria que garantizan que el diseño se escale bien a pantallas más grandes o pequeñas:

• iOS (iPhone 13 / 14 / 15 / 16): Usa un Frame de 393 x 852 pt.
• Android (Google Pixel / Samsung Estándar): Usa un Frame de 360 x 800 dp o 412 x 915 dp (Material Design 3).

⚙️ 2. Cómo configurar la Retícula (Layout Grid) en Figma

Para crear una estructura limpia donde los elementos se alineen perfectamente, configura tu panel de Layout Grid en la barra lateral derecha de Figma con los siguientes valores:

Para iOS (Frame: 393 x 852)

1. Haz clic en el botón + en Layout Grid.
2. Cambia el icono de cuadrícula por el de Columns (Columnas).
3. Aplica estos valores exactos:
   • Count (Cantidad): 4 (es el estándar para teléfonos).
   • Color: Rojo con 10% de opacidad (o el que prefieras).
   • Type (Tipo): Stretch (para que sea responsivo).
   • Margin (Márgenes laterales): 16 o 20 (espacio libre en los bordes izquierdo y derecho).
   • Gutter (Separación entre columnas): 16 (el espacio entre cada barra vertical).

Para Android (Frame: 360 x 800)

1. Haz clic en el botón + en Layout Grid y selecciona Columns.
2. Aplica estos valores:
   • Count: 4
   • Type: Stretch
   • Margin: 16
   • Gutter: 16 o 24 (Material Design suele usar separaciones un poco más amplias).

📐 3. Cómo marcar las Zonas Seguras con Guías Visuales

Dado que Figma no bloquea automáticamente los márgenes superior e inferior del sistema, la mejor práctica es arrastrar guías horizontales o dibujar rectángulos invisibles como referencia:

1. En iOS: Activa las reglas en Figma (Shift + R). Arrastra una guía horizontal desde la parte superior hasta los 54 pt (fin de la barra de estado). Arrastra otra desde abajo hacia arriba hasta los 34 pt (zona del indicador de inicio). El espacio central que queda es tu área de trabajo real para botones y texto.
2. En Android: Haz exactamente lo mismo colocando la guía superior en 48 dp y la guía inferior en 48 dp.

💡 Consejo Pro para el Diseño de Retículas

Para el espaciado vertical (la distancia entre un título, un párrafo y un botón), no uses columnas. Utiliza la regla de los 8 puntos.

Asegúrate de que la altura de tus componentes y los espacios de separación vertical sean siempre múltiplos de 8 (por ejemplo: un botón de 48 pt de altura, separado por 24 pt del siguiente elemento). Esto creará un ritmo visual perfecto sin necesidad de saturar la pantalla con líneas horizontales.

Clase Taller Diseño Plataformas Digitales semana 17/08/2025

Link Estructura oficial de diseño

Material System Androi

HIG IOs

Clase Taller Diseño Plataformas Digitales semana 03/12/2025

Evaluación 4 Unidad IV: Testeo de Soluciones

Introducción

La presente evaluación se enmarca en la Unidad IV: Testeo de Soluciones del Taller de Diseño de Plataformas Digitales. Esta asignatura, de carácter práctico, busca que los estudiantes sean capaces de idear, estructurar, diseñar, prototipar y testear aplicaciones para diferentes dispositivos. Se trabaja desde los requerimientos del usuario y los escenarios de uso, aplicando criterios de usabilidad y metodologías creativas.
En este contexto, la evaluación tiene como propósito validar las propuestas diseñadas anteriormente mediante procesos de testeo, mejoras iterativas y la presentación formal frente a un comité, demostrando dominio del desarrollo de la interfaz y del pensamiento crítico propio del diseño digital.

Desarrollo

La evaluación responde directamente al Aprendizaje Esperado 4.1, que señala que el estudiante debe desarrollar una propuesta de diseño de interfaz colaborativa, comprobando su funcionalidad y usabilidad mediante testeos, mejoras innovadoras y adaptabilidad en diferentes dispositivos. Para esto, los estudiantes deberán presentar una carpeta en la nube (link público) que contenga los siguientes elementos fundamentales:

1. Presentación utilizada para la defensa ante comité

Debe incluir:

• El brief trabajado en la asignatura integrada.

2. Link al prototipo wireframe funcional en Figma – Material System (MS)

El prototipo debe:

• Ser completamente funcional.

• Reflejar las mejoras aplicadas tras el testeo.

3. Link al prototipo wireframe funcional en Figma – Human Interface Guidelines (HIG)

Al igual que el prototipo MS, debe:

• Ser completamente funcional.

• Mostrar la integración de mejoras basadas en la experiencia de usuario.

Conclusión

La Evaluación 4 permite que los estudiantes cierren el ciclo completo de diseño, desde la definición del problema hasta la validación mediante testeo. A través de la presentación y la entrega de prototipos funcionales, deberán demostrar su capacidad de aplicar criterios de usabilidad, diseñar interfaces coherentes con los estándares MS y HIG, y resolver problemas de navegación, interacción y visualidad en entornos digitales. Con esta evaluación, se consolida la habilidad de prototipar, testear e iterar soluciones en contextos reales de diseño digital, fortaleciendo el pensamiento crítico y el trabajo colaborativo.

Relación con los criterios de evaluación

• Criterio 4.1.1: Se cumple mediante la entrega ordenada de cada documento, prototipo y presentación, evidenciando el proceso completo de diseño y testeo.

• Criterio 4.1.2: Se demuestra a través de las mejoras innovadoras propuestas, fundamentadas en técnicas de trabajo colaborativo y análisis de usabilidad.

• Criterio 4.1.3: Se evidencia al integrar prototipos, wireframes y maquetas digitales, mostrando un proceso iterativo guiado por retroalimentación y pruebas con usuarios reales o simulados.

Con lo anterior, los estudiantes concluyen la unidad demostrando dominio técnico, metodológico y reflexivo, fundamentales en el diseño de plataformas digitales profesionales.

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.  Carpetas vacías o errores al enviar el link serán evaluadas con la nota mínima.  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.

Clase Taller Diseño Plataformas Digitales semana 19/11/2025

Unidad: III

Introducción

La asignatura Taller Diseño Plataformas Digitales busca que los estudiantes desarrollen competencias prácticas vinculadas al diseño y creación de aplicaciones digitales, aplicando metodologías de diseño centrado en el usuario, estándares de usabilidad y coherencia visual.
En esta evaluación, los estudiantes deberán demostrar el dominio adquirido en la ideación, estructuración y diseño de interfaces digitales, integrando los lineamientos de Material System (MS) y Human Interface Guidelines (HIG). Esta etapa representa la culminación del proceso de diseño, donde la propuesta inicial se materializa en una interfaz visual sólida, coherente y funcional, que responda a los requerimientos del brief y a las necesidades reales del usuario.

Desarrollo

El encargo consiste en desarrollar el diseño final de la interfaz de la app, aplicando los principios, componentes y sistemas de diseño propios de Material System (Android) y Human Interface Guidelines (iOS).
Los estudiantes trabajarán en duplas y presentarán su propuesta final en formato Canvas o PDF A4 apaisado, que deberá incluir los siguientes elementos:

Estructura de entrega

1. Portada

   • Título: Diseño final interfaz de app Juntemonos

   • Nombres de los integrantes

2. Marca

   • Identidad visual (logo, colores base, tipografía y tono visual general).

   • Breve descripción conceptual de la marca o cliente seleccionado.

3. Kit UI MS

   • Componentes visuales principales del sistema Material Design: botones, inputs, tarjetas, menús, íconos, tipografía y paleta cromática.

   • Uso coherente de jerarquía visual, profundidad y movimiento.

4. Kit UI HIG

   • Componentes visuales del sistema Human Interface Guidelines: barras de navegación, tab bars, tipografía del sistema, íconos y componentes nativos de iOS.

   • Aplicación de principios de claridad, profundidad y deferencia visual.

5. Diseño de Sistemas MS

   • Presentar la estructura del sistema de diseño y sus reglas de aplicación.

   • Identificar y justificar los principios de construcción (rejilla, márgenes, espaciado, color y movimiento).

6. Diseño de Sistemas HIG

   • Presentar la estructura del sistema de diseño y reglas de aplicación.

   • Identificar las decisiones visuales y estructurales según las guías de iOS. (rejilla, márgenes, espaciado, color y movimiento).

7. Diseño Final MS

   • Aplicación visual definitiva del diseño Material System:

     • Uso de color con degradados, sombras proyectadas y jerarquías visuales.

     • Diseño completo de cada pantalla, identificada con su nombre (Inicio, Perfil, Menú, etc.).

8. Diseño Final HIG

   • Aplicación visual definitiva del diseño Human Interface Guidelines:

     • Uso del estilo Liquid Glass, transparencias y profundidad visual.

     • Diseño completo de cada pantalla, identificada con su nombre. (Inicio, Perfil, Menú, etc.).

Elementos para entregar

• 1. Link público a la presentación final (Canvas o PDF compartido desde la nube).

Recomendaciones:

• Asegurar coherencia visual y funcional entre las versiones MS y HIG.

• Mantener consistencia en la navegación y el lenguaje visual.

• Revisar que todos los elementos estén correctamente identificados y aplicados.

Conclusión

La presente evaluación permite evidenciar el dominio de los contenidos fundamentales del taller, consolidando el proceso de diseño desde la investigación y conceptualización hasta la implementación visual definitiva. El desarrollo del diseño de interfaz en dos sistemas operativos permite comprender las diferencias, fortalezas y particularidades de cada guideline, reforzando la capacidad de adaptación y coherencia visual en distintos entornos digitales.

El cumplimiento de los objetivos de esta evaluación refleja la integración de los aprendizajes esperados: el diseño centrado en el usuario, la aplicación de pautas de estilo coherentes con cada sistema operativo, la estructuración de contenidos funcionales y la correcta implementación de componentes visuales e interactivos, demostrando una comprensión integral del proceso de diseño de aplicaciones digitales híbridas.

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.

Rúbrica de Evaluación – Diseño Final Interfaz App (Unidad III)

Criterios	Excelente	Bueno	Aceptable	Insuficiente
1. Reconoce criterios de navegación en App, considerando las necesidades del usuario.	La navegación es clara, intuitiva y fluida; responde plenamente a las necesidades del usuario y a los objetivos de la aplicación.	La navegación es coherente y funcional, con leves oportunidades de mejora en la secuencia o accesibilidad.	La navegación presenta estructura básica, pero con inconsistencias o dificultades de comprensión.	La navegación es confusa, incompleta o no responde a las necesidades del usuario.
2. Diseña sistema gráfico en App, de acuerdo con la temática, objetivo y perfil de usuario determinado.	El sistema gráfico es coherente, atractivo y completamente alineado a la temática, objetivos y perfil de usuario; demuestra una propuesta visual sólida.	El sistema gráfico mantiene coherencia general y responde al perfil del usuario, aunque con algunos elementos poco consistentes.	El sistema gráfico cumple parcialmente con la temática o el perfil del usuario; presenta debilidad conceptual o visual.	El sistema gráfico es inconsistente o no guarda relación con la temática ni con el perfil del usuario.
3. Integra las diferentes vistas e interfaces en una App, considerando la experiencia del usuario.	Integra de forma completa y coherente todas las vistas e interfaces; garantiza una experiencia de usuario fluida y bien estructurada.	Integra la mayoría de las vistas con coherencia; la experiencia de usuario es funcional pero con leves mejoras posibles.	Integra parcialmente las vistas o interfaces; la experiencia de usuario es limitada o poco intuitiva.	No integra adecuadamente las vistas o la experiencia de usuario es deficiente.
4. Desarrolla el diseño de cada una de las pantallas identificándolas claramente, tanto para MS como para HIG.	Todas las pantallas están completas, correctamente identificadas y adaptadas a los sistemas MS y HIG, mostrando dominio de ambos lineamientos.	La mayoría de las pantallas están desarrolladas y correctamente identificadas; presenta leves omisiones o inconsistencias entre sistemas.	Solo parte de las pantallas están desarrolladas o identificadas; la adaptación entre MS y HIG es incompleta.	Las pantallas no están claramente identificadas o el diseño no se adapta a los sistemas requeridos.
5. Implementa correctamente estilos: MS (Flat Design, color degradado, sombras proyectadas) y HIG (Liquid Glass).	Aplica con precisión los estilos visuales de cada sistema; demuestra comprensión de los principios estéticos y técnicos de MS y HIG.	Aplica correctamente la mayoría de los estilos visuales, con leves inconsistencias entre sistemas.	Aplica parcialmente los estilos visuales, con errores de interpretación o aplicación técnica.	No aplica los estilos correspondientes o presenta confusión entre los lineamientos de MS y HIG.

Clase Taller Diseño Plataformas Digitales semana 04/11/2025

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.

Clase Taller Diseño Plataformas Digitales semana 02/09/2025

Formato de entrega

Introducción

El encargo final de la asignatura tiene como propósito integrar los conocimientos adquiridos, aplicando las directrices de diseño de interfaz en un proyecto simulado. A través de la selección de un cliente ficticio, los estudiantes deberán definir un proyecto digital, diseñar su brief y elaborar prototipos iniciales en formato wireframe en Figma, considerando tanto el Material System (Android) como las Human Interface Guidelines (iOS).
Este ejercicio busca consolidar competencias en el diseño centrado en el usuario, aplicando principios de usabilidad, accesibilidad y coherencia visual según cada sistema operativo.

Desarrollo

El encargo consta de tres etapas principales:

1. Selección del cliente ficticio y Brief del proyecto

• Los estudiantes elegirán un cliente ficticio y diseñarán un brief en formato PDF A4 apaisado.

• Este documento servirá como base conceptual para el diseño de la aplicación.

2. Desarrollo de Wireframes (armado en Figma)

• A partir del brief, los estudiantes diseñarán 5 pantallas en formato wireframe, utilizando como referencia uno de los dos sistemas:

  • Material System (MS)

  • Human Interface Guidelines (HIG)

• Las pantallas deben demostrar la estructura, flujo y navegación de la aplicación, integrando elementos esenciales de interfaz, controles y componentes.

3. Adaptaciones

• De las cinco pantallas iniciales, los estudiantes deberán seleccionar dos y adaptarlas al sistema operativo opuesto.

  • Ejemplo: si los wireframes fueron diseñados en Material System, dos pantallas deberán adaptarse al formato de Human Interface Guidelines (y viceversa).

• Estas adaptaciones deberán ser trabajadas considerando las diferencias de estilo, componentes y coherencia entre ambos sistemas.

Formato de entrega

Los estudiantes deberán enviar dos links compartidos en formato público:

1. Link de descarga del Brief en PDF A4 apaisado.

2. Link de acceso al proyecto en Figma con las pantallas desarrolladas y adaptadas.

Conclusión

Este encargo final integra las competencias fundamentales de la unidad, permitiendo a los estudiantes enfrentarse a un proceso de diseño digital cercano al contexto profesional: análisis de un brief, diseño estructurado de pantallas y adaptación de interfaces según los lineamientos de Android e iOS.
La entrega busca demostrar la capacidad de los estudiantes para idear, estructurar y prototipar soluciones digitales, asegurando coherencia visual, interacción clara y una experiencia de usuario efectiva.

En este ejercicio se evidencia la aplicación de los principios revisados en clase:

• Material System e HIG como guías oficiales de diseño.

• Estructura de interfaz y navegación para organizar el flujo de la aplicación.

• Controles y componentes como herramientas de interacción.

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.

Rúbrica de Evaluación – Unidad I

Criterios	Excelente	Bueno	Aceptable	Insuficiente
1. Analiza el Brief del cliente (objetivos, usuarios, escenarios y contextos)	Análisis completo y detallado; identifica claramente todos los elementos con coherencia y profundidad.	Análisis claro y correcto; identifica la mayoría de los elementos, con menor nivel de detalle.	Análisis parcial; omite aspectos relevantes o los presenta superficialmente.	Análisis incompleto o inexistente; no aborda los elementos principales del Brief.
2. Reconoce una problemática de diseño digital (soluciones, necesidades del usuario, requisitos del Brief)	Problema claro y relevante; vincula necesidades y requisitos; propone soluciones bien fundamentadas.	Problema coherente; reconoce necesidades y requisitos; solución general pero adecuada.	Problema vago; relación débil entre necesidades, requisitos y soluciones.	No identifica problema o no lo relaciona con necesidades del usuario ni con el Brief.
3. Define un usuario y una estructura de contenidos	Perfil de usuario preciso y detallado; estructura de contenidos conforme a estándares y bien justificada.	Perfil adecuado; estructura clara, con limitados detalles metodológicos.	Perfil superficial; estructura incompleta o poco coherente.	No define claramente al usuario ni establece una estructura comprensible.
4. Genera un wireframe (integración de contenidos, componentes, directrices HIG/MS)	Wireframe funcional, coherente y detallado; integra contenidos y componentes respetando plenamente las directrices.	Wireframe coherente; integra contenidos y respeta en gran parte las directrices, con menor detalle.	Wireframe básico; integra pocos contenidos o componentes; aplicación limitada de directrices.	Wireframe deficiente o inexistente; sin integración clara ni respeto a directrices.
5. Desarrolla controles y componentes como herramientas de interacción	Integra variedad de controles y componentes adecuados; interacción coherente y consistente con el SO.	Integra controles y componentes funcionales; menor variedad o detalle en la interacción.	Integra pocos controles y componentes; algunos son poco funcionales o inconsistentes.	No integra controles ni componentes adecuados, dificultando la interacción del usuario.

Clase Taller Diseño Plataformas Digitales semana 26/08/2025

Link Estructura oficial de diseño

Material System Androi

HIG IOs

Clase Taller Diseño Plataformas Digitales semana 19/08/2025

Evaluación 1 – Unidad I: Directrices de diseño de interfaz

Introducción

La asignatura Taller Diseño Plataformas Digitales busca que los estudiantes adquieran competencias para idear, estructurar, diseñar, prototipar y testear aplicaciones digitales considerando la experiencia del usuario, los lineamientos de usabilidad y las directrices de interfaz de cada sistema operativo.
En esta primera evaluación, los estudiantes deberán aplicar estos principios para analizar un brief, definir un proyecto digital y estructurar sus primeras propuestas de interfaz a través de wireframes y prototipos de baja fidelidad. Esto permitirá introducirse en el flujo de trabajo de proyectos reales, donde la comprensión del problema, el usuario y los escenarios de uso son fundamentales para un diseño exitoso.

Desarrollo

La evaluación contempla dos etapas principales:

Etapa 1: Investigación

Los estudiantes, organizados en duplas, desarrollaran un brief para un cliente ficticio. A partir de este deberán:

• Analizar los objetivos del cliente, usuarios, contextos y escenarios de uso.

• Reconocer la problemática central y proponer una solución conceptual en forma de aplicación nativa para Android e iOS.

• Definir el perfil del usuario, los objetivos de la aplicación y la propuesta conceptual.

• Presentar los resultados en un mural colaborativo en Miro.

Etapa 2: Desarrollo

Con la propuesta conceptual definida, los estudiantes deberán:

• Diseñar las pantallas esenciales en un wireframe de baja fidelidad.

• Integrar los elementos básicos de interfaz, componentes y controles adecuados según la usabilidad y accesibilidad.

• Documentar el wireframe en Miro y presentar las vistas mediante un video en Figma que muestre la interacción entre pantallas.

Aprendizajes esperados abordados

• 1.1: Definir un proyecto digital nativo de Android e iOS considerando necesidades del usuario y estándares de interfaz.

Contenidos mínimos obligatorios aplicados

• Material System y Human Interface Guidelines.

• Elementos esenciales de la interfaz y estructura de aplicaciones.

• Controles y componentes básicos de UI.

• Principios de usabilidad, diseño de interfaz y accesibilidad.

Conclusión

Esta primera evaluación introduce a los estudiantes al proceso de diseño de aplicaciones móviles, desde el análisis del brief hasta la estructuración de pantallas en wireframes. El objetivo es que comprendan cómo la identificación de las necesidades del usuario, junto con el uso de lineamientos oficiales de diseño, contribuyen a construir soluciones digitales claras, coherentes y funcionales.

Relación con criterios de evaluación

• Al analizar el brief (1.1.1), el estudiante demuestra comprensión del problema y objetivos del cliente.

• Al reconocer la problemática y posibles soluciones (1.1.2), conecta los requerimientos con la experiencia del usuario.

• Al definir al usuario y la estructura de contenidos (1.1.3), aplica metodología de diseño centrado en el usuario y arquitectura de la información.

• Al generar el wireframe (1.1.4), integra contenidos, componentes y directrices de interfaz específicas de Android e iOS.

Estructura sugerida del Brief 

1. Nombre del proyecto / aplicación

2. Descripción general de la organización (cliente ficticio)

3. Objetivos del cliente (qué busca resolver con la app)

4. Problemática detectada (qué necesidad existe actualmente)

5. Usuarios principales

   • Perfil general (edad, intereses, ocupación, etc.)

   • Necesidades específicas

   • Problemas actuales

6. Escenarios y contextos de uso (cuándo, dónde y cómo usarían la app)

7. Objetivos de la aplicación (qué funcionalidades debe cumplir)

8. Requerimientos mínimos del diseño

   • Plataformas (Android / iOS)

   • Estándares de usabilidad y accesibilidad

   • Contenidos esenciales