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

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

Link Estructura oficial de diseño

Material System Androi

HIG IOs