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

Evaluación 3 – Unidad III: Integración gráfica e interactividad

1. Introducción

 

La asignatura Taller Diseño Plataformas Digitales busca que los estudiantes desarrollen las competencias necesarias para idear, estructurar, diseñar, prototipar y testear aplicaciones digitales, considerando los requerimientos de los usuarios, los escenarios de uso y los principios de usabilidad. Para alcanzar este propósito, es fundamental que los estudiantes no solo sean capaces de diseñar interfaces visualmente atractivas, sino también de integrar sus componentes y transformarlos en experiencias digitales interactivas y funcionales.

 

En esta tercera evaluación, los estudiantes deberán avanzar desde las propuestas visuales desarrolladas en la unidad anterior hacia la construcción de un prototipo funcional de aplicación híbrida. El desafío consiste en implementar las pantallas, componentes y sistemas de navegación mediante herramientas como Figma, FlutterFlow o plataformas similares, incorporando interacciones que permitan simular el funcionamiento de la aplicación.

 

El desarrollo deberá considerar las correcciones y oportunidades de mejora identificadas durante la evaluación anterior, procurando que la solución mantenga coherencia gráfica, facilite la navegación y se adapte a los diferentes dispositivos y formatos solicitados.

 

2. Desarrollo de la evaluación
 
Descripción general del encargo

 

A partir del prototipo visual desarrollado en la Unidad II, los estudiantes deberán implementar una versión funcional de su aplicación, integrando las diferentes vistas, componentes gráficos y elementos interactivos.

 

El prototipo deberá permitir recorrer las principales funcionalidades de la aplicación mediante una navegación clara, fluida y coherente con las necesidades del usuario. Para ello, será necesario conectar las pantallas, configurar las acciones de los componentes y representar los diferentes estados e interacciones que forman parte de la experiencia de uso.

 

El trabajo deberá desarrollarse considerando los cuatro formatos establecidos:

 

1. iOS – Vertical

 

Prototipo funcional para teléfono celular, considerando las convenciones de navegación y los componentes visuales correspondientes a iOS.

 

2. iOS – Fold (Duo)

 

Adaptación de la experiencia de uso al formato plegable o de doble pantalla definido para el proyecto. Se deberá reorganizar la interfaz y aprovechar el espacio disponible.

 

3. Android – Vertical

 

Prototipo funcional para teléfono Android, aplicando las convenciones de interfaz y navegación correspondientes a esta plataforma.

 

4. Android – Fold

 

Adaptación del prototipo para un dispositivo plegable Android, considerando la reorganización de contenidos, componentes y navegación.

 

Importante: las adaptaciones deben mantener la identidad visual y las funcionalidades principales de la aplicación. No basta con modificar las dimensiones de las pantallas; se espera que los estudiantes ajusten la distribución de los elementos para responder a las características de cada formato.

 

Clase Laboratorio Digital Animación para Videojuegos semana 26/10/2026

Exportar de blender a Unreal Engine

PARTE 1: Preparación obligatoria en Blender

1. Alinear la vista: Colocar la vista frontal de Blender. El personaje debe estar mirando de frente hacia la pantalla. Esto significa que está mirando hacia el eje -Y.

2. Seleccionar todo: En el modo objeto (Object Mode), selecciona la malla (Mesh) y el esqueleto (Armature).

3. Limpiar transformaciones: Presiona Ctrl + A y selecciona All Transforms.

• Verificación: Panel lateral (tecla N), la posición debe estar en 0,0,0, la rotación en 0,0,0 y la escala estrictamente en 1,1,1. Si no haces esto, la animación fallará.

4. Establecer el origen: Punto de origen (el puntito naranja) de la malla y del esqueleto esté exactamente en el centro del mundo (0,0,0), preferiblemente entre los pies del personaje.

 

PARTE 2: Exportación desde Blender (FBX)

 

1. Ve a File > Export > FBX (.fbx).

2. En la ventana que se abre, configura el panel de la derecha exactamente así:

• Include (Incluir):

                  • Activa la casilla Selected Objects (así solo exportarás lo que selecciones).

                  • En los iconos de abajo, selecciona haciendo Shift + Clic solo Armature y Mesh.

• Transform (Transformación):

                  • Scale: 1.0

                  • Apply Scalings: Cambiálo a FBX All (Vital para que no desaparezca la animación).

                  • Forward: X Forward

                  • Up: Z Up

• Geometry (Geometría):

                  • Smoothing: Cambiálo a Face (Evita errores de sombrado en Unreal).

• Armature (Esqueleto):

                  • Primary Bone Axis: X Axis

                  • Secondary Bone Axis: Y Axis

                  • Only Deform Bones: Activa esta casilla (Evita exportar huesos de control innecesarios).

                  • Add Leaf Bones: Desactiva esta casilla (Evita que Blender invente huesos extra al final de las cadenas).

• Animation (Animación):

                  • Si vas a exportar el personaje en posición de T o Pose de A, dejar Bake Animation desactivarla.

3. Ponle nombre al archivo y haz clic en Export FBX.

 

PARTE 3: Importación en Unreal Engine 4.27.2

 

1. Abre tu proyecto de Unreal y arrastra el archivo .fbx dentro del Content Browser.

2. Se abrirá la ventana de opciones de importación de FBX. Configúrala así:

• Mesh (Malla):

                  • Skeletal Mesh: Activa esta casilla (ya que el personaje tiene huesos).

                  • Import Mesh: Activa esta casilla.

• Skeleton (Esqueleto):

                  • Déjalo en None (marcado como None - Choose Skeleton). Esto obligará a Unreal a crear un esqueleto nuevo y limpio exclusivo para este personaje.

• Transform (Transformación):

                  • Asegúrate de que Import Translation y Import Rotation estén en 0,0,0, y la escala (Import Uniform Scale) en 1.0.

• Animation (Animación):

                  • Si el FBX incluye una animación que quieres importar ya mismo, activa Import Animations.

• Materiales:

                  • En Material Import Method, elige Create New Materials si quieres que Unreal intente crear los materiales de Blender de forma automática.

3. Haz clic en el botón Import (Evita hacer clic en Import All si estás probando por primera vez, para poder ver si salta algún error específico).

  

referencias

 

Exportar de blender a Unity 

1. Preparación en Blender

 

Antes de exportar, debes asegurarte de que los datos de tu modelo estén limpios.

• Resetear Transformaciones:

                  1. En el Object Mode, selecciona tu Mesh y tu Armature.

                  2. Presiona Ctrl + A y selecciona All Transforms. Esto dejará la Escala en 1.0 y las Rotaciones en 0, evitando que el modelo se deforme o cambie de tamaño en Unity.

• (Opcional si los loop no aparecen) Organizar las Animaciones (Loops):

                  1. Ve a la pestaña de animación Non-Linear Animation (NLA).

                  2. Asegúrate de presionar el botón "Push Down" en tus acciones de animación para convertirlas en tiras NLA. Esto garantiza que Unity reconozca múltiples animaciones individuales.

• Nombrar la Armature: Nombra el objeto de tu esqueleto en Blender como Root o el nombre de tu personaje (evita dejarlo como "Armature" para que Unity no cree un nodo extra innecesario).

 

2. Configuración de Exportación FBX

 

1. Ve a File > Export > FBX (.fbx).

2. En el panel derecho de configuración, aplica los siguientes parámetros:

 

Panel: Include

 

• Object Types: Selecciona únicamente Armature y Mesh (mantén presionada la tecla Shift para seleccionar ambos). Desmarca Camera, Light, etc.

• Active Collection / Selected Objects: Marca la casilla Selected Objects (es recomendable tener seleccionados tu malla y esqueleto en el visor antes de exportar).

 

Panel: Transform

 

• Scale: 1.0

• Apply Scalings: Cambia esto a FBX All (esto corrige discrepancias de escala entre programas).

• Forward: -Z Forward

• Up: Y Up (Unity usa Y como el eje hacia arriba, Blender usa Z).

• Apply Transform: Marca esta casilla.

 

Panel: Armature

 

• Primary Bone Axis: Y Axis

• Secondary Bone Axis: X Axis

• Only Deform Bones: Marca esta casilla. Esto evita exportar huesos de control (como los de un rig IK) que Unity no necesita, aligerando el archivo.

• Add Leaf Bones: Desmarca esta casilla. Si la dejas marcada, Blender creará huesos vacíos al final de cada cadena (las puntas de los dedos, por ejemplo) que solo ensucian la jerarquía en Unity.

 

Opcional por si los loop no fucnionan correctamente 

Panel: Animation

• Bake Animation: Marca esta casilla.

• Key All Bones: Marca esta casilla.

• NLA Strips: Marca esta casilla (para que exporte los loops que guardaste).

• All Actions: Desmárcala si solo quieres las tiras NLA activas, o márcala si quieres exportar absolutamente todos los clips guardados en el archivo.

• Force Start/End Keying: Marca esta casilla para asegurar que los loops mantengan su duración exacta.

3. Elige la carpeta de destino (puedes guardarlo directamente en la carpeta Assets de tu proyecto de Unity) y haz clic en Export FBX.

 

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.

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.