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

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

1. Introducción

La asignatura Taller Diseño Plataformas Digitales tiene como propósito desarrollar en los estudiantes las competencias necesarias para idear, estructurar, diseñar, prototipar y testear aplicaciones digitales, considerando los requerimientos del usuario, los escenarios de uso y los principios de usabilidad. Para ello, resulta fundamental comprender cómo se construyen los sistemas gráficos de una aplicación y cómo sus interfaces deben adaptarse a diferentes dispositivos y formatos de visualización.

En esta evaluación, los estudiantes deberán desarrollar el Kit UI, el sistema gráfico y las pantallas de una aplicación, considerando las directrices de diseño de iOS y Android, tanto para teléfonos celulares como para dispositivos plegables (Fold). El objetivo es aplicar los conocimientos relacionados con la construcción de interfaces, la organización de sus componentes y la adaptación de los elementos visuales a diferentes dimensiones de pantalla, manteniendo una experiencia de usuario coherente y funcional.

Este ejercicio permitirá fortalecer la capacidad de tomar decisiones de diseño fundamentadas, desarrollar sistemas visuales consistentes y comprender la importancia de la adaptabilidad en aplicaciones destinadas a diferentes dispositivos.

2. Desarrollo de la evaluación

Descripción general del encargo

El estudiante deberá desarrollar el sistema visual y las interfaces de una aplicación digital, tomando como referencia el proyecto y los requerimientos definidos previamente en el Brief.

El trabajo contempla tres componentes principales: la creación del Kit UI, la definición del sistema gráfico y el diseño de las pantallas de la aplicación para distintos dispositivos y formatos de visualización.

La propuesta deberá considerar las directrices de diseño correspondientes a iOS y Android, incorporando las adaptaciones necesarias para teléfonos celulares y dispositivos plegables en orientación horizontal, según los formatos definidos para el proyecto.

Se evaluará especialmente la coherencia visual, la correcta aplicación de los componentes, la organización de los contenidos y la capacidad de adaptar la interfaz sin perjudicar su funcionalidad ni la experiencia del usuario.

2.1. Desarrollo del Kit UI

El Kit UI corresponde al conjunto organizado de elementos visuales y componentes reutilizables que permiten mantener la consistencia gráfica de una aplicación.

El estudiante deberá desarrollar y documentar los elementos necesarios para construir las interfaces de su proyecto, considerando las características de la marca, el perfil del usuario y los requerimientos establecidos en el Brief.

El Kit UI deberá incluir, según las necesidades de la aplicación:

• Identidad visual: logotipo o identificador de marca y recursos gráficos asociados.
• Paleta cromática: colores principales, secundarios, de fondo y de estados, como éxito, advertencia y error, cuando corresponda.
• Sistema tipográfico: familias tipográficas, tamaños, pesos y jerarquías para títulos, subtítulos, textos y etiquetas.
• Iconografía: conjunto de iconos coherentes en estilo, tamaño y función.
• Botones: estados y variantes de los botones principales, secundarios y de otras acciones necesarias.
• Campos de entrada: componentes para formularios, búsqueda y captura de información.
• Componentes de navegación: barras, menús, pestañas y otros elementos requeridos por la aplicación.
• Componentes complementarios: tarjetas, listas, selectores, indicadores, alertas y otros elementos necesarios según el tipo de proyecto.

2.2. Desarrollo del sistema de diseño

El sistema gráfico establece las reglas que organizan y regulan la aplicación de los elementos visuales en las diferentes pantallas de una interfaz.

En esta etapa, el estudiante deberá definir los parámetros que permitan construir interfaces consistentes, legibles y adaptables a los distintos formatos.

Se deberán considerar los siguientes aspectos:

• Jerarquía visual: relación entre títulos, contenidos, acciones principales y elementos secundarios.
• Espaciado: definición de una escala de separación para organizar los componentes de forma consistente.
• Reglas de color y tipografía: criterios para aplicar los colores y estilos tipográficos en los distintos elementos.
• Reglas de iconografía: tamaños, alineaciones, estilos y usos de los iconos.
• Componentes y estados: criterios de aplicación para botones, campos, tarjetas y otros elementos interactivos.
• Adaptabilidad: reglas para reorganizar los contenidos y componentes cuando cambien las dimensiones o la orientación de la pantalla.

2.3. Diseño de pantallas para iOS y Android

El estudiante deberá diseñar las pantallas de la aplicación para los siguientes formatos:

Formato 1: iOS – Pantalla de celular

Diseño de las pantallas de la aplicación para un teléfono del ecosistema Apple. Se deberán considerar las convenciones de navegación, los componentes nativos, la jerarquía visual y las áreas seguras de la interfaz.

Formato 2: iOS – Formato Fold

Adaptación de las pantallas al formato plegable definido para el proyecto. Se deberá reorganizar el contenido para aprovechar el espacio disponible, conservar la legibilidad y evitar que los componentes queden mal distribuidos. 

Formato 3: Android – Pantalla de celular

Diseño de las pantallas para teléfonos Android, aplicando las convenciones de Material Design, los componentes correspondientes y una distribución adecuada de los contenidos y acciones.

Formato 4: Android – Formato Fold

Adaptación de las pantallas a un dispositivo Android plegable, considerando el espacio adicional, la orientación solicitada, la reorganización de los componentes y la continuidad de las tareas del usuario.

Las adaptaciones no deben consistir únicamente en aumentar o reducir el tamaño de la pantalla. Se espera que el estudiante analice la distribución de los elementos y determine qué componentes deben mantenerse, desplazarse, reorganizarse o presentarse de otra manera para responder a cada formato.

2.4. Criterio para seleccionar las pantallas

Para optimizar el trabajo y evitar la repetición innecesaria de diseños, el estudiante deberá desarrollar únicamente las pantallas únicas de cada tipo o función.

Cuando una misma estructura de pantalla se repita con información diferente, se diseñará solamente un ejemplo representativo, siempre que los cambios no impliquen una estructura o interacción distinta.

Por ejemplo, si una aplicación contiene diez productos que utilizan la misma plantilla, bastará con diseñar la pantalla de uno de ellos. No será necesario desarrollar las diez variantes, salvo que alguna requiera una estructura, funcionalidad o distribución diferente.

Este criterio no significa eliminar pantallas esenciales del flujo de navegación. Se deben representar todas las tipologías necesarias para comprender la experiencia completa de la aplicación y sus adaptaciones.

2.5. Consideraciones técnicas y de diseño

Durante el desarrollo, el estudiante deberá tener en cuenta los siguientes principios:

• Coherencia visual: mantener una identidad gráfica reconocible en todos los formatos.
• Consistencia de componentes: utilizar los elementos definidos en el Kit UI de manera uniforme.
• Adaptabilidad: reorganizar los componentes según las dimensiones y orientación de cada dispositivo.
• Usabilidad: facilitar la comprensión de la interfaz y la ejecución de las tareas principales.
• Jerarquía visual: destacar la información y las acciones relevantes para el usuario.
• Aplicación de directrices: respetar las convenciones de iOS y Android sin confundir sus respectivos patrones de interfaz.
• Legibilidad y accesibilidad: asegurar que los textos, iconos, contrastes y controles puedan utilizarse adecuadamente.

3. Formato de entrega

El estudiante deberá crear una carpeta en un servicio de almacenamiento en la nube de su elección o proporcionar enlaces directos a los archivos. Los permisos deberán configurarse para que el docente pueda acceder al material sin solicitar autorización adicional, identificar en el campo de texto de la tarea los integrantes del grupo y sección.

La entrega deberá incluir los siguientes elementos:

1. Evidencia del Kit UI

Link público al documento que contiene los componentes visuales, la paleta cromática, la tipografía, la iconografía y los demás elementos reutilizables de la aplicación.

2. Evidencia del sistema de diseño (sistema gráfico)

Link público al documento que presenta las reglas de construcción de las interfaces.

3. Pantallas solicitadas

Archivo PDF o enlace público que contenga los diseños de las pantallas únicas de la aplicación, organizadas e identificadas por plataforma y formato:

• iOS – Celular.
• iOS – Fold.
• Android – Celular.
• Android – Fold.

Importante: antes de realizar la entrega, el estudiante deberá comprobar que los tres enlaces funcionen, que los documentos estén completos y que los permisos de acceso sean públicos o permitan la visualización directa por parte del docente.

4. Aprendizaje esperado

Esta evaluación aborda el aprendizaje esperado 2.1, orientado al desarrollo de interfaces de aplicaciones híbridas que respondan a las necesidades de uso en múltiples dispositivos y formatos de visualización, considerando los requerimientos del Brief, la innovación y el diseño centrado en el usuario.

Mediante la creación del Kit UI, la documentación del sistema de diseño y el desarrollo de las pantallas adaptadas, el estudiante deberá demostrar que puede transformar una propuesta conceptual en un sistema de interfaz organizado, consistente y adaptable a diferentes contextos de uso.

El trabajo requiere integrar conocimientos de diseño visual, arquitectura de interfaz, construcción de componentes y adaptación de contenidos, justificando las decisiones adoptadas según las características de cada plataforma y dispositivo.

5. Conclusión

La evaluación permite consolidar los conocimientos relacionados con la configuración visual de aplicaciones digitales, promoviendo el desarrollo de sistemas gráficos coherentes y la adaptación de interfaces a diferentes dispositivos. A través de la construcción del Kit UI, la definición de reglas gráficas y el diseño de pantallas para iOS y Android, el estudiante podrá demostrar su capacidad para organizar componentes, mantener la consistencia visual y responder a las necesidades de los usuarios en distintos formatos de visualización.

En relación con los criterios de evaluación, el trabajo permitirá evidenciar el cumplimiento del criterio 2.1.2, mediante la definición de una pauta de estilo gráfico vinculada con la identidad conceptual de la aplicación y su perfil de usuario; del criterio 2.1.3, a través de la aplicación sistemática de esa pauta en los componentes, las reglas gráficas y las pantallas; y del criterio 2.1.4, mediante el diseño de visualizaciones adaptadas a distintos dispositivos, considerando la usabilidad, la funcionalidad y la interacción. De esta manera, la evaluación busca comprobar que el estudiante no solo es capaz de diseñar interfaces visualmente consistentes, sino también de fundamentar y adaptar sus decisiones para construir experiencias digitales claras, funcionales y centradas en el usuario.

Indicaciones de entrega

En la plataforma AAI se habilitará la tarea para que carguen la documentación en la fecha correspondiente, está estará habilitada hasta 15 minutos iniciada la clase.  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.

Rúbrica de evaluación.

Criterios	Excelente	Bueno	Aceptable	Insuficiente
1. Determina pauta de estilo gráfico para App, de acuerdo con la vinculación conceptual de la solución y perfil de usuario. (Kit UI)	Desarrolla un Kit UI completo y coherente con el concepto de la aplicación y el perfil de usuario. Define correctamente paleta cromática, tipografía, iconografía, botones, controles y componentes reutilizables, estableciendo variantes y estados cuando corresponde.	Desarrolla un Kit UI coherente con el concepto de la aplicación y el perfil de usuario. Incluye los principales elementos visuales y componentes, aunque presenta pequeñas inconsistencias o carece de algunas variantes y estados.	Desarrolla un Kit UI parcialmente coherente con el concepto de la aplicación y el perfil de usuario. Incluye algunos elementos visuales, pero presenta inconsistencias de estilo o componentes importantes incompletos.	No desarrolla un Kit UI funcional o los elementos presentados son insuficientes, desorganizados o no guardan relación con el concepto de la aplicación ni con el perfil de usuario.
2. Integra pauta de estilo propuesta, considerando parámetros y propiedades de diseño de interfaz. (Sistema de diseño)	Documenta e integra un sistema de diseño completo, con reglas claras de retícula, márgenes, espaciado, jerarquía visual, tipografía, color y uso de componentes. Aplica los parámetros de manera consistente en las interfaces y considera las particularidades de cada plataforma.	Documenta e integra un sistema de diseño que define los principales parámetros visuales y de interfaz. Aplica las reglas de manera mayormente consistente, con pequeñas omisiones o diferencias entre pantallas.	Presenta un sistema de diseño parcial, con reglas poco detalladas o inconsistentes. La aplicación de los parámetros visuales varía entre pantallas y dificulta mantener una estructura uniforme.	No presenta un sistema de diseño definido o las reglas son insuficientes para orientar la construcción de las interfaces. Los parámetros y propiedades visuales se aplican sin consistencia.
3. Diseña diferentes visualizaciones de interfaz, considerando parámetros de usabilidad, funcionalidad e interacción.	Diseña las visualizaciones de interfaz con una organización clara de contenidos, jerarquía visual y navegación intuitiva. Los componentes responden a las funciones previstas, facilitan la interacción y consideran la legibilidad, accesibilidad y necesidades del usuario.	Diseña las visualizaciones con una organización adecuada y navegación comprensible. La mayoría de los componentes responde a las funciones previstas, aunque presenta pequeños problemas de usabilidad, legibilidad o interacción.	Diseña visualizaciones con problemas de organización, jerarquía o navegación. Algunos componentes no responden claramente a las funciones previstas y existen dificultades de usabilidad o interacción.	Las visualizaciones presentan problemas importantes de organización y navegación. Los componentes no permiten comprender o realizar adecuadamente las acciones previstas y no se consideran suficientemente la usabilidad ni la interacción.
4. Diseña todas las pantallas y adaptaciones solicitadas para iOS y Android (vertical – Fold).	Diseña el 100 % de las pantallas únicas solicitadas y presenta todas las adaptaciones correspondientes a los formatos definidos para iOS y Android. Diferencia correctamente las convenciones de cada plataforma y reorganiza los contenidos y componentes para cada dispositivo, manteniendo la funcionalidad y coherencia visual.	Diseña entre el 90 % y el 99 % de las pantallas únicas solicitadas. Presenta las adaptaciones principales para los formatos requeridos, con pequeñas omisiones o problemas de distribución que no afectan significativamente la comprensión de la interfaz.	Diseña entre el 70 % y el 89 % de las pantallas únicas solicitadas. Presenta adaptaciones incompletas o poco diferenciadas entre plataformas y formatos, con problemas visibles de distribución o consistencia.	Diseña menos del 70 % de las pantallas únicas solicitadas o no presenta las adaptaciones necesarias para los formatos requeridos. Las propuestas no permiten verificar adecuadamente la visualización de la aplicación en los dispositivos establecidos.
5. Implementa correctamente la identidad visual de la marca en la App.	Integra la identidad visual de la marca de manera consistente en todas las pantallas y formatos. Aplica correctamente logotipo, colores, tipografía y recursos gráficos, fortaleciendo el reconocimiento de la marca y manteniendo una relación coherente con el concepto de la aplicación.	Integra los principales elementos de identidad visual de la marca en las pantallas y formatos. Mantiene una aplicación mayormente consistente, con pequeñas diferencias en el uso de colores, tipografía o recursos gráficos.	Integra parcialmente la identidad visual de la marca. Algunos elementos se aplican de forma inconsistente o presentan diferencias entre pantallas y formatos que debilitan la coherencia de la propuesta.	No integra adecuadamente la identidad visual de la marca. Omite elementos esenciales o utiliza colores, tipografías y recursos gráficos que no corresponden a la identidad definida para la aplicación.

Clase Laboratorio Digital Animación 3D semana 13/10/2026

Evaluación III – Animación inicial de personajes

Modalidad: Individual

Ponderación: 35%

1. Introducción

La asignatura Laboratorio Digital Animación 3D tiene como propósito desarrollar las habilidades, los fundamentos y los conocimientos esenciales para generar animaciones con objetos simples y compuestos en tres dimensiones, utilizando herramientas de software especializadas y considerando los requerimientos de un flujo de trabajo de producción. Asimismo, promueve el aprendizaje continuo, la aplicación de buenas prácticas y el desarrollo de metodologías de trabajo que permitan responder a los desafíos propios de la animación digital.
En esta tercera evaluación, correspondiente a la unidad Animación inicial de personajes, deberás integrar los conocimientos adquiridos durante las clases para desarrollar un personaje bípedo original, desde su conceptualización y modelado tridimensional hasta la configuración de su rigging y la creación de una animación. El proyecto contempla las etapas de preproducción, producción técnica y entrega final, permitiéndote experimentar un flujo de trabajo que conecte el diseño del personaje con su comportamiento y movimiento dentro de una escena.
A través de este encargo, tendrás la oportunidad de demostrar tus habilidades para transformar una propuesta gráfica en un personaje tridimensional funcional, capaz de ejecutar acciones comprensibles mediante el lenguaje corporal y de interactuar con un objeto del entorno sin recurrir a diálogos.

2. Desarrollo de la evaluación

El desarrollo de esta evaluación se organiza en dos hitos prácticos: una etapa formativa, orientada a ejercitar y fortalecer las habilidades técnicas necesarias, y una etapa sumativa, en la que deberás aplicar de manera autónoma los aprendizajes adquiridos mediante la creación de un proyecto original.

Objetivo
Diseñar un personaje goblins bajo la estética de "Stylized Cartoon", el personaje debe tener un accesorio, posteriormente una animación del personaje en un escenario, para esto deberán desarrollar las siguientes piezas:

• Concepart del personaje
• Vista Frontal y lateral con lineas de calce
• Guión narrativo
• Storyboard a partir del guión narrativo
• Lineart digital o vector

Blender debe contener:

• Colecciones
• Blocking
• Highpoly
• Lowpoly
• incorporar  loop de animación 
• rigging
• IK
• Personalización de huesos por controladores
• Mapas UV
• Texturas
• Estilo Hand paint
• Programa Adobe Subtance painter
• Animaciones
• Loop
• NLA
• Configuraciones de render

¿Que es el Stylized Cartoon?

Este enfoque estético, desarrollado originalmente por Supercell para unificar el universo de sus juegos (como Clash of Clans), se caracteriza por combinar un aspecto amigable y colorido con una alta funcionalidad de juego.

2.1. Estética Caricaturesca y Proporciones Exageradas

Los personajes se diseñan siguiendo las reglas tradicionales del estilo de animación tradicional o cartoon. Presentan rasgos exagerados (como ojos grandes, mandíbulas prominentes o extremidades robustas) para que el jugador identifique de un solo vistazo la función de la tropa en el campo de batalla: un Gigante es visualmente enorme para denotar que es un tanque, mientras que las Arqueras lucen ligeras para indicar su velocidad y ataque a distancia.

Referencias 

Goblin

Clase Laboratorio Digital Animación 3D semana 01/10/2026

Guía de Entrega:

Proyecto de Animación 3D en Blender

1. Requisitos Técnicos de la Animación

 

• Duración: 12 segundos.
• Configuración de Blender: Ajustar la velocidad a 25 fps y la línea de tiempo (timeline) a un total de 300 fotogramas.
• Escenario: Diseñar el entorno utilizando únicamente objetos primitivos (cubos, esferas, cilindros, etc.).
• Animación del personaje (Loop):
  • Indle
  • Caminar
  • Saltar
  • Crear ciclo de animación a elección del estudiante, el cual debe coincidir con la propuesta del storyboard.

2. Documentación Requerida (PDF o enlace a Canva)

Deberás adjuntar un archivo PDF o un enlace público a Canva que incluya los siguientes apartados:

 

• Narrativa: Un único párrafo que describa claramente el objetivo comunicativo o la historia de la animación.
• Storyboard: Un guion gráfico de mínimo 5 viñetas. Debe presentarse estrictamente en formato lineart (solo líneas limpias, sin color ni sombreado).

3. Formato y Parámetros de Entrega

Subir enlace único de almacenamiento en la nube en formato público (Google Drive, OneDrive, Dropbox, etc.) que contenga la siguiente estructura de archivos de forma organizada:

 

• Archivo ejecutable de Blender (.blend).
• Carpeta con las texturas exportadas para Blender.
• Carpeta con las texturas exportadas para Unity.
• El archivo PDF o el enlace público a Canva con la documentación técnica. 
• Grabación de pantalla: play a la animación en el NLA (se debe visualizar la textura del robot).

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

Lista referencial de los elementos del Kit UI

Elementos básicos de diseño (diseñar considerando estados):

Botones y Acciones

◦ Botón primario: Acción principal como "Comprar" o "Guardar".
◦ Botón secundario: Acción alternativa como "Cancelar" o "Volver".
◦ Botón terciario: Enlaces de texto simples sin contenedor.
◦ Botón de icono: Botones circulares o cuadrados que solo contienen un icono (ej.
carrito, notificaciones).
◦ Botón flotante (FAB): Botón que flota sobre la interfaz, ideal para accesos rápidos como "Crear producto".

Elementos de Formulario y Entrada de Datos

◦ Campo de texto: Input básico para ingresar nombres, correos o descripciones.
◦ Campo de texto numérico: Input específico para precios, stock o códigos postales.
◦ Área de texto: Input multilínea para descripciones largas de productos.
◦ Casilla de verificación (Checkbox): Elemento de selección múltiple (ej. elegir varias categorías).
◦ Botón de opción (Radio button): Elemento de selección única (ej. elegir un metodo de envio).
◦ Interruptor (Toggle switch): Activar o desactivar estados (ej. "Producto visible en la tienda").
◦ Lista desplegable (Select item): Opción individual dentro de un menú de selección.
◦ Control deslizante (Slider): Para ajustar rangos como el precio mínimo y máximo.

Indicadores, Estado y Navegación

◦ Etiqueta (Badge / Tag): Indicador visual pequeño para estados (ej. "Nuevo", "Sin stock", "Envio gratis").
◦ Icono: Glifos individuales del sistema (ej. lupa, engranaje, usuario, estrella).
◦ Avatar: Contenedor circular para la foto de perfil del emprendedor o el logo de su marca.
◦ Punto de paginación: Indicador de qué página o imagen del carrusel se está visualizando.
◦ Indicador de carga (Spinner / Loader): Elemento animado individual que muestra que un proceso está en curso.

Separadores y Contenedores Básicos

◦ Línea divisoria (Divider): Línea sutil para separar secciones de contenido.
◦ Línea de progreso: Barra horizontal que indica un porcentaje (ej. progreso de configuración de la tienda).
◦ Fondo de tarjeta (Surface / Card basic): El contenedor vacío con sombra o borde, antes de agregarle texto o imágenes.

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

Clase Laboratorio Digital Animación para Videojuegos semana 07/09/2026

Unidad II: Animación avanzada de personajes 3D

Modalidad: Individual
Software principal: Blender y motor de videojuegos compatible
Duración: 5 semanas
Instancias de evaluación: Formativa, semana 3 / Sumativa, semana 5
Ponderación de la evaluación sumativa: 25%

1. Introducción

La asignatura Laboratorio Digital Animación para Videojuegos corresponde a una asignatura evaluativa de carácter práctico del área formativa de Diseño, desarrollada en modalidad presencial. Su propósito es que, al finalizar, el estudiante sea capaz de crear animaciones 2D y 3D a partir de elementos narrativos y arquetipos de personajes, orientadas a su implementación en contextos de juegos digitales. Este proceso considera, además, el desarrollo de habilidades relacionadas con la comunicación, el trabajo colaborativo y el aprendizaje continuo o permanente.

En continuidad con los aprendizajes desarrollados durante la Unidad I, esta segunda unidad profundiza en la animación avanzada de personajes 3D, trasladando las decisiones conceptuales, expresivas y técnicas del personaje hacia un contexto de producción orientado a videojuegos. En esta etapa, el estudiante deberá trabajar con poses clave, rigging, ciclos de animación, limpieza de curvas, exportación de archivos FBX e integración de las animaciones dentro de un motor de videojuegos.

La evaluación propone desarrollar un personaje 3D cuya identidad se encuentre determinada por un arquetipo previamente seleccionado, utilizando referentes visuales ortogonales como apoyo para la construcción y definición del personaje. A partir de esta identidad, se desarrollarán cuatro acciones de combate: ataque, recibir daño, bloquear o evadir y muerte. Cada animación deberá tener una duración de 2 segundos, equivalente a 48 fotogramas, y funcionar como un ciclo continuo cuando corresponda.

El proyecto culminará con la integración del personaje y sus animaciones en un motor de videojuegos, donde el estudiante deberá implementar un sistema básico de control que permita probar las acciones desarrolladas. De esta manera, la evaluación busca que el estudiante no solo produzca animaciones técnicamente correctas, sino que sea capaz de comprobar su funcionamiento dentro de un contexto interactivo, aproximándose a un flujo de trabajo propio de la producción de videojuegos.

2. Desarrollo de la evaluación

2.1 Aprendizaje esperado

La evaluación se desarrolla en función del siguiente aprendizaje esperado:

2.1 Desarrolla un nivel en motor de videojuego integrando personajes animados 3D, para testear animaciones y mecánicas de juegos digitales, considerando el desarrollo y la importación desde un software de especialidad, junto a la gestión del tiempo y los recursos.

El aprendizaje esperado será abordado mediante un proyecto individual que contempla la creación y preparación de un personaje 3D, la producción de animaciones de combate y su posterior exportación e integración en un motor de videojuegos.

2.2 Criterios de evaluación

La evaluación considera los siguientes criterios:

2.1.1. Produce poses clave para personajes 3D a partir de referentes visuales, utilizando controles de rigging según los requisitos del brief.

2.1.2. Realiza animaciones en loop de personajes 3D, considerando ciclos de acciones, desplazamientos, movimiento y su exportación a motor de juego.

2.1.3. Integra personajes animados en formato FBX a motor de videojuegos, de forma optimizada, limpiando superposiciones, suavizando arcos y cumpliendo con los tiempos establecidos.

2.1.4. Integra las animaciones a un player en motor de videojuego considerando las acciones del personaje como mecánicas de juego.

3. Organización general de la evaluación

El proyecto tendrá una duración total de 5 semanas y estará dividido en dos instancias:

Evaluación formativa

Duración: semanas 1, 2 y 3.

Su propósito será acompañar el desarrollo técnico y conceptual del personaje, permitiendo recibir retroalimentación antes de la etapa final de integración.

Evaluación sumativa

Duración: semanas 4 y 5.

Su propósito será corregir, optimizar, exportar e integrar las animaciones desarrolladas en un motor de videojuegos, finalizando con la presentación y entrega del proyecto.

Clase Taller Diseño Plataformas Digitales semana 27/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:

Etapa 1: Investigación

Los estudiantes, organizados en "duplas", desarrollaran una pizarra online para un cliente de ecommerce. A partir de este deberán:

• Analizar las diferencias de la misma app en los sistemas operativos iOS (HIG) y Andori.

• Analizar app de ecommerce.

• Diseño Mapa de navegación.

• Presentar los resultados en un mural colaborativo en Miro o Figma.

Etapa 2: Desarrollo

Con el mapa 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.

• Presentar el wireframe en Figma.
• Formato: IOS, Androi, adaptaciones pantalla Flip de ambos sistemas
• Pantallas:
• login, 
• home, 
• catalogo, 
• producto, 
• perfil, 
• ajustes, 
• preguntas frecuentes (FAQ)

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.

Formato de Entrega

Compartir los siguientes enlaces en formato publico según corresponda:

• Link de pizarra online
• Link de figma

Nombres de los integrantes y secciones a la que corresponde.

Es responsabilidad del estudiante verificar que el enlace compartido tenga acceso público y que los archivos puedan visualizarse correctamente.

Indicaciones de entrega

En la plataforma AAI se habilitará la tarea para que carguen la documentación en la fecha correspondiente, está estará habilitada hasta 15 minutos iniciada la clase.  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.

Rúbrica de Evaluación

Criterios	Excelente	Bueno	Aceptable	Insuficiente
1. Reconoce una problemática de diseño digital, considerando el análisis de soluciones, las necesidades del usuario y los requisitos.	Identifica con claridad y precisión la problemática de diseño digital; relaciona de manera coherente las necesidades del usuario, los requisitos del proyecto y el análisis de posibles soluciones.	Identifica correctamente la problemática y relaciona la mayoría de las necesidades del usuario y requisitos con posibles soluciones, aunque presenta oportunidades de profundización.	Reconoce parcialmente la problemática; establece una relación limitada entre las necesidades del usuario, los requisitos y las soluciones propuestas.	No identifica claramente la problemática o presenta una propuesta que no responde a las necesidades del usuario ni a los requisitos establecidos.
2. Define un usuario y una estructura de contenidos, de acuerdo con estándares de arquitectura de la información y a metodología de diseño centrado en el usuario.	Define un perfil de usuario claro, completo y pertinente; organiza los contenidos mediante una estructura lógica y coherente, aplicando correctamente principios de arquitectura de la información y diseño centrado en el usuario.	Define un usuario adecuado y una estructura de contenidos coherente; aplica correctamente la mayoría de los principios de arquitectura de la información y diseño centrado en el usuario.	Define un usuario de manera superficial y presenta una estructura de contenidos parcialmente organizada, con aplicación limitada de los principios de arquitectura de la información.	No define claramente al usuario o presenta una estructura de contenidos desorganizada, sin relación con las necesidades del usuario.
3. Genera un wireframe, de acuerdo con la integración de contenidos, componentes, directrices de interfaz humana y sistema operativo.	Genera un wireframe completo, claro y funcional; integra correctamente contenidos, componentes, navegación y directrices de interfaz correspondientes al sistema operativo.	Genera un wireframe coherente y funcional; integra la mayoría de los contenidos y componentes, respetando en gran medida las directrices del sistema operativo.	Genera un wireframe básico; integra parcialmente los contenidos y componentes y presenta inconsistencias en la aplicación de las directrices de interfaz.	El wireframe es incompleto, confuso o inexistente; no integra adecuadamente contenidos, componentes ni directrices del sistema operativo.
4. Diseña para pantalla de iOS, Android y adaptaciones para modelos Flip horizontales.	Desarrolla correctamente las interfaces para iOS y Android, incorporando adaptaciones específicas para dispositivos Flip horizontales; mantiene coherencia, legibilidad, usabilidad y correcta distribución de los elementos en todos los formatos.	Desarrolla las interfaces para iOS y Android y realiza las adaptaciones para formato Flip horizontal, presentando leves inconsistencias de distribución, proporción o adaptación.	Desarrolla parcialmente las interfaces solicitadas; las adaptaciones para uno o más formatos presentan problemas de distribución, legibilidad o usabilidad.	No desarrolla correctamente las interfaces para los sistemas solicitados o no incorpora las adaptaciones para dispositivos Flip horizontales.
5. Cumple con el 100% de las pantallas solicitadas.	Presenta el 100% de las pantallas solicitadas, completas, correctamente identificadas y desarrolladas de acuerdo con los requerimientos del proyecto.	Presenta entre el 90% y 99% de las pantallas solicitadas, manteniendo un desarrollo adecuado y coherente con la propuesta.	Presenta entre el 70% y 89% de las pantallas solicitadas, evidenciando avances parciales en el desarrollo de la propuesta.	Presenta menos del 70% de las pantallas solicitadas o las pantallas entregadas se encuentran incompletas y no permiten evidenciar el desarrollo de la propuesta.

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 Proyecto Integrado semana 24/08/2026

Clase Proyecto Integrado semana 17/08/2026