Libro Partituras de Interacción PIX

Título	Libro Partituras de Interacción PIX
Tipo de Proyecto	Proyecto de Titulación
Palabras Clave	PIX
Período	2025-
Asignatura	Taller de Titulación de Diseño
Del Curso	Titulación en Diseño de Interacción 2025
Carreras	Diseño
Alumno(s)	Belen Briones, Matías Morales Jiménez
Profesor	Katherine Exss

Objetivo del Proyecto PiX

Este proyecto busca documentar y divulgar PiX a través de una publicación doble: un libro físico y una versión web. Ambas incluirán una introducción teórica a las partituras, una sección de casos de uso reales y un toolkit práctico para crear partituras, ya sea de forma analóga o digital.

La versión web será más visual e interactiva, con enlaces a herramientas como Figma o Miro, mientras que el libro físico contendrá una hoja final desprendible con pictogramas precortados. El objetivo es ampliar el acceso a PiX como recurso para el diseño, la educación y la creación colectiva entre distintas disciplinas.

¿Por que un Libro?

Hasta ahora no existe un libro físico que reúna, organice y proyecte el desarrollo de PiX como lenguaje visual de interacción. Aunque existen publicaciones académicas, proyectos de título e investigaciones que lo han explorado en distintos contextos como, talleres, procesos de codiseño y experiencias reales, aún no se ha creado una obra que sistematice sus definiciones, estructura, evolución y casos de uso. Este libro nace como un gesto inaugural: no solo busca dejar registro, sino también ofrecer una mirada integradora sobre cómo PiX ha sido aplicado en ámbitos públicos, privados y académicos, incluso fuera del entorno universitario.

La incorporación de una plataforma web cumple un rol clave en este proceso. Al extender la experiencia de lectura, permite explorar el material de forma más dinámica, manteniendo vivo este libro latente y despertando el interés por su contenido. Este enfoque también permite mostrar cómo PiX se ha complementado con otras herramientas de lenguaje visual de UX, como diagramas de flujo, mapas de navegación y journey maps, ampliando su utilidad para modelar la interacción y facilitar la comprensión en proyectos multidisciplinares. En conjunto, el libro y la web buscan ser una puerta de entrada y una base sólida para futuras prácticas, reflexiones y aprendizajes.

Modelo visual

Modelo Visual en figma

Preguntas Entrevista PIX

Documento de las entrevistas

La elaboración de este documento fue fundamental para estructurar las entrevistas realizadas a distintos profesionales que han trabajado con las Partituras de Interacción PiX. Nos permitió guiar cada conversación de forma coherente y profunda, enfocándonos en conocer no solo los casos de uso específicos, sino también las motivaciones, experiencias y reflexiones de quienes han utilizado esta herramienta en proyectos reales.

Gracias a esta pauta, pudimos identificar objetivos clave de cada proyecto, comprender el rol que tuvo PiX en los distintos procesos de diseño y recopilar citas significativas que luego se integrarán en el libro como insumos discursivos y narrativos. Este documento no solo organizó nuestras entrevistas, sino que también nos ayudó a visibilizar patrones comunes, desafíos compartidos y el valor transversal del lenguaje PiX en contextos públicos, sociales y pedagógicos.

En resumen, fue una herramienta metodológica esencial que fortaleció la investigación, permitió profundizar en los relatos de cada entrevistado y sentó las bases para seleccionar los casos de uso que formarán parte del libro.

Modelo visual 28/04

El siguiente diagrama fue desarrollado con el objetivo de visualizar de forma integrada los conceptos clave que se repiten en las distintas experiencias recogidas durante nuestra investigación. A través de este ejercicio, buscamos identificar y organizar aquellos elementos que constituyen las bases fundamentales de las partituras de interacción PiX, y que permiten comprenderlas no solo como una herramienta, sino como un lenguaje común para el codiseño.Este diagrama no solo sistematiza términos y relaciones.

Modelo Visual 5/05

El modelo visual de PiX se construye a partir de tres conceptos clave: codiseño, lenguaje visual y partituras. A partir de ellos se desprenden otras nociones asociadas que los vinculan entre sí. Las partituras, por ejemplo, se leen mediante pictogramas, un tipo de lenguaje visual que hace visible el resultado acordado de un proceso de codiseño. Este acuerdo permite establecer una forma de comunicación universal, accesible para distintas personas y disciplinas. Las partituras se componen por capas: la capa de persona, que representa emociones, intenciones y necesidades. La de diálogo, que muestra las acciones concretas del usuario en la interfaz. La de sistema, que visibiliza los procesos que permiten el funcionamiento del servicio o plataforma que ocurren detrás de la pantalla. En tanto, el codiseño se ocupa de coordinar el trabajo entre usuarios, interdisciplinas y las distintas etapas del proyecto. El lenguaje visual, por su parte, activa un proceso cognitivo que fortalece la memoria y facilita la retención de información. Al recordar el proceso de creación, se favorece un mejor diseño universal, pensado para ser comprendido por todo tipo de personas.

Evaluación intermedia

Evaluación intermedia 12/05/2025

Evaluación intermedia 14/05/2025

Acerca de su origenes de PiX

Las Partituras de Interacción PiX nacieron en 2008 como resultado de un proyecto de título desarrollado por Katherine Exss y Estefanía Trisotti, bajo la guía del profesor Herbert Spencer en la Escuela de Arquitectura y Diseño de la PUCV. Surgieron como respuesta a la necesidad de representar, de forma visual y accesible, las interacciones entre personas y sistemas digitales. Su objetivo fue crear un lenguaje comprensible para equipos multidisciplinarios, facilitando el diseño centrado en la experiencia del usuario. Desde entonces, PiX ha evolucionado como herramienta para el codiseño y la construcción de valor en servicios digitales.

Toolkit para una participación accesible: el caso de pix como herramienta universal para el codiseño

Service blueprint (Lynn Shostack)

El Service Blueprint o Plano de Servicio es una herramienta estratégica utilizada principalmente en el diseño e innovación de servicios. Fue introducida por Lynn Shostack, una ejecutiva bancaria, en un artículo publicado en Harvard Business Review en 1982. Desde entonces, se ha convertido en una metodología clave no solo para crear nuevos servicios, sino también para analizar y mejorar la eficiencia operativa, detectar fallas en la experiencia del cliente y planificar transformaciones estructurales dentro de una organización, como el reposicionamiento o la reorganización interna.

Esta técnica permite visualizar, de forma detallada y estructurada, cómo funciona un servicio desde el punto de vista tanto del usuario como de la organización que lo ofrece. Para ello, descompone el servicio en componentes o capas, organizadas en distintas líneas que marcan los límites entre las acciones visibles para el cliente y los procesos internos de la empresa.

Un plano de servicio típicamente incluye:

Acciones del cliente: todo lo que hace el usuario durante su experiencia con el servicio.
Puntos de contacto (frontstage): las interacciones visibles entre el cliente y los empleados o interfaces del servicio.
Procesos internos Lynn Shostack (backstage): actividades que realiza el personal sin que el cliente las vea, pero que son esenciales para que el servicio funcione.
Soportes y recursos: sistemas, herramientas o infraestructura que apoyan la prestación del servicio.
Líneas divisorias: como la línea de visibilidad (separa lo que el cliente ve de lo que no ve), la línea de interacción (marca la relación directa entre cliente y empleado) y la línea de soporte interno.

El Service Blueprint ayuda a los equipos a detectar cuellos de botella, duplicidades, momentos críticos o fallos en la experiencia del usuario, promoviendo una visión sistémica y colaborativa entre diferentes áreas de una organización. Es especialmente útil en servicios complejos o multicanal, donde intervienen múltiples departamentos o plataformas digitales.

Sus limitaciones:Se enfoca en eficiencia operativa y no siempre captura la riqueza de la experiencia emocional o la intencionalidad del usuario. Es más útil en etapas de análisis que de creación.

Contenido Service Blueprint

UML caso de uso

La UML (Lenguaje Unificado de Modelado) es un lenguaje visual creado para ayudar a los programadores y diseñadores a representar, entender y planificar cómo funciona un sistema informático. Es como un conjunto de diagramas que permiten "dibujar" el funcionamiento de un programa o aplicación, en lugar de explicarlo solo con palabras o código.

Existen muchos tipos de diagramas en UML, como los diagramas de clases, de objetos o de secuencia. Cada uno muestra una parte distinta del sistema, y todos juntos permiten tener una visión más completa. Estos diagramas ayudan a visualizar cómo se relacionan los elementos del sistema, cómo se comportan y cómo se comunican entre sí.Con el tiempo, estos diagramas fueron organizados y estandarizados por un grupo llamado OMG (Object Management Group). Esta organización promueve el uso de UML como una herramienta para diseñar, construir y documentar software de manera más clara y ordenada. Además, OMG propone una forma de trabajo llamada Arquitectura Dirigida por Modelos (MDA). Esta busca simplificar el desarrollo de software usando modelos visuales como UML, con la idea de crear componentes de software que sean más fáciles de entender, reutilizar y adaptar a diferentes entornos.

Sin embargo, hay un desafío importante: a medida que los sistemas se vuelven más complejos, también lo hacen los diagramas. Esto puede hacer que el lenguaje visual de UML sea difícil de entender, especialmente para quienes no están involucrados directamente en el desarrollo o no tienen experiencia en programación. Por eso, aunque UML es una herramienta muy útil para los equipos técnicos, no siempre es fácil de interpretar para personas externas al proyecto. Este es uno de los retos actuales del diseño de software: hacer que la complejidad técnica pueda comunicarse de manera más clara y accesible para todos los involucrados.

limitaciones: Aunque útil para programadores, no comunica bien la experiencia desde el punto de vista del usuario ni facilita la colaboración con disciplinas como el diseño, la estrategia o el marketing.

Maquetación

Pagina web del Libro PiX

Casos

Caso 1: Proyectos integrados en cuadernillos pedagógicos (público)(Chile)
1. Tema:Diseño e implementación de cuadernillos pedagógicos con enfoque en proyectos integrados, dirigidos a escuelas públicas y subvencionadas, que incorporan metodologías activas como el uso de partituras de interacción adaptadas al aula.
2. Institución:Proyecto desarrollado en colaboración entre la Escuela de Diseño de la Pontificia Universidad Católica de Valparaíso y el Ministerio de las Culturas, las Artes y el Patrimonio de Chile.
3. Objetivo: Elaborar materiales pedagógicos que permitan a los docentes diseñar experiencias de aprendizaje interdisciplinarias desde una mirada más activa, situada y colaborativa, integrando herramientas como las partituras de interacción adaptadas al contexto escolar.

Caso 2: Proyecto Diplomado UXDI-ecosolidario Marketplace Lorena + Paula (Diplomado)(Argentina)
1. Tema:Diseño de plataforma digital para economías sociales y solidarias Uso de PiX en formación profesional como herramienta de codiseño para visualizar interacciones.
2. Institucional:Diplomatura en Diseño de Experiencia de Usuario (UXDI), Argentina
3. Objetivos: El objetivo fue integrar PiX como herramienta central dentro del proceso formativo de la Diplomatura UXDI, aplicándola en proyectos reales vinculados a la economía social y solidaria. En el caso del equipo EcoSolidaria, PiX permitió representar y codiseñar visualmente interacciones entre productores, consumidores y prosumidores dentro de una futura plataforma marketplace.

Caso 3: CEPAL-Mapa Federal Lorena + Paula (Argentina)(Público)
1. Tema:Diseño de sistemas accesibles en política pública de cuidados Uso de PiX como herramienta funcional para modelado de interacciones digitales.
2. Institución:Comisión Económica para América Latina y el Caribe (CEPAL) + Ministerio de Mujeres, Géneros y Diversidad de Argentina (MMGyD)
3. Objetivo:Utilizar PiX como herramienta visual para representar flujos funcionales del sistema de geolocalización del Mapa Federal del Cuidado, facilitando la comunicación entre equipos técnicos y el modelado de funcionalidades clave del sistema digital. El caso se centró en visualizar procesos complejos, como la habilitación de permisos de ubicación por parte de la persona usuaria a través de partituras que describían las acciones, emociones y requerimientos de cada capa del sistema: persona, diálogo y tecnología. Las partituras se integraron como parte del proceso de análisis funcional, permitiendo traducir requerimientos técnicos en esquemas comprensibles para diseñadores, programadores y tomadores de decisiones.

Caso 4: Proyecto Memento-Realidad aumentada y estimulación cognitiva, título Javiera Ruiz (Postgrado)(Chile)
1. Tema:Aplicación de realidad aumentada para adultos mayores con demencia, basada en técnicas mnemotécnicas (palacios de la memoria).
2. Institución:Escuela de Arquitectura y Diseño, Pontificia Universidad Católica de Valparaíso (PUCV).
3. Objetivo: Desarrollar una solución terapéutica que ayude a adultos mayores con deterioro cognitivo a reorganizar sus recuerdos en el espacio doméstico a través de tecnologías de realidad aumentada y técnicas de memoria espacial.

Caso 5:(1)ProyectoSaldo insoluto, Andrea Zamora (público)
1. Tema: corresponde a un proyecto desarrollado dentro de ChileAtiende, liderado por Andrea Zamora y su equipo.El objetivo principal fue definir y documentar el flujo de negocio de un trámite que carecía de una secuencia clara, relacionado con la devolución o retiro de fondos remanentes (saldo insoluto) de personas beneficiarias o sus representantes.
2. Institución: ChileAtiende – IPS.
3. Objetivo:Establecer un flujo universal y verificable que mostrara, paso a paso, cómo se tramitaba el retiro de saldos insolutos, integrando las visiones de negocio, tecnología y atención ciudadana

(2)Proyecto Subsidio de Discapacidad
1. Tema:entorno de ChileAtiende, trató el Subsidio de Discapacidad, un beneficio estatal otorgado a personas con discapacidad o sus representantes. A diferencia del anterior, este proyecto ya contaba con insumos y estructuras previas, por lo que las partituras se utilizaron de forma introspectiva, para reconstruir y analizar el flujo existente.
2. Objetivo:Reconstruir el flujo de interacción y sus dependencias institucionales, con foco en mejorar la claridad del proceso y la experiencia de los usuarios con discapacidad o sus representantes legales.

Caso 6: Proyecto, Empresa Cumplo, Camila Alvarado(Privado)(Chile)(México)
1. Tema:Diseño de MVP para sistema de atención de solicitantes en una fintech Aplicación de PiX para planificación colaborativa y coordinación técnica
2. Institución:Cumplo (empresa fintech, Chile/México/Perú)
3. Objetivo:Utilizar las partituras de interacción PiX como herramienta de planificación visual para mejorar la coordinación entre diseño, producto y desarrollo en el diseño de un sistema digital de atención a usuarios. La implementación de PiX permitió alinear a equipos multidisciplinarios en entornos ágiles, visualizar flujos de interacción complejos y anticipar requerimientos técnicos desde la etapa de descubrimiento, contribuyendo a una experiencia de usuario más clara y coherente.

Caso 7: Proyecto, El impacto urbano y las plataformas de delivery, Rodrigo Vera(Privado)
1. Tema:Plataformas de delivery y ciudadanía digital Uso de PiX para investigación doctoral sobre impacto urbano y social de aplicaciones de reparto
2. Institución:Doctorado en Arquitectura y Estudios Urbanos, Pontificia Universidad Católica de Chile
3. Objetivo:Utilizar las partituras de interacción PiX como herramienta de análisis visual y sistémico para representar las experiencias de usuarios, repartidores y restaurantes en plataformas de delivery. El objetivo fue visibilizar fenómenos urbanos complejos como las cocinas fantasma, el trabajo informal o la transformación del espacio público, generando una lectura crítica y situada del impacto de las tecnologías digitales sobre la vida en la ciudad.

Aclaración de Uso de IA

Dada la naturaleza tecnológica y evolutiva del diseño de interacción, se incorporaron herramientas de Inteligencia Artificial (IA) para optimizar y asistir en diversas etapas del proyecto.

Metodología de Prompting: Se hizo un estudio preliminar sobre la construcción de prompts efectivos para obtener respuestas precisas de los modelos de lenguaje.

Herramientas Utilizadas:

Redacción y Contenidos: Se utilizó ChatGPT para asistir en la redacción, estructuración de capítulos e ideación de contenido del libro físico, basado en información proporcionada por las entrevistas.
Asistencia Técnica: Se recurrió a Gemini para la generación de código (HTML/CSS) para el libro web y la organización del formato de citas.
Transcripción y Citas: Se empleó Tactiq.io (con funcionalidades de IA) para transcribir videollamadas de Meet, facilitando la recolección rápida de testimonios y citas directas para el libro PiX.

Plantilla Maestra de Prompt para Redacción de Casos (PiX)

Para asegurar la uniformidad, el tono y la profundidad de los siete casos de estudio en el libro, se desarrolló el siguiente prompt estructurado. Este actúa como la guía principal para la herramienta de IA, garantizando que el texto final sea un relato continuo, didáctico y profesional, enfocado en Product Owners y diseñadores de servicios.

GUÍA DETALLADA PARA REDACCIÓN DE CASOS (PiX)ROL y TONO: Asume el rol de redactor experto con un tono didáctico y profesional, dirigido a Product Owners y diseñadores de servicios. Las citas textuales no deben modificarse.
OBJETIVO: Redactar un texto continuo (sin punteo) que aborde la creación de un libro de partituras de interacción PiX. El objetivo es evidenciar el uso de las partituras PiX en un caso real y destacar sus aportes. El texto se construirá siguiendo la estructura numerada a continuación.
ESTRUCTURA DEL CAPÍTULO:
Título del Caso: Nombre del Caso + subtítulo explicativo (institución, lugar o sector).
Contexto del Proyecto: Un texto breve (1 a 2 párrafos) que describa: ¿Qué es el proyecto? ¿Dónde y cuándo se desarrolló? ¿Quiénes participaron? ¿Por qué se decidió utilizar PiX?
Objetivos de Uso de PiX: Define claramente: ¿Qué se quería lograr al utilizar PiX? ¿Qué etapa del proceso de diseño se abordó con PiX? ¿Qué roles o actores participaron en la creación/lectura de las partituras?
Desarrollo del Caso: Descripción paso a paso de cómo se implementó PiX (taller, sesión, dinámica). ¿Sobre qué es la partitura? ¿Qué se descubrió? (Insertar referencias a recursos visuales, fotos, diagramas, etc.).
Citas Textuales: Incorporar de 2 a 4 citas directas de participantes (con nombre y rol) donde se destaque el valor de PiX.
Reflexiones y Aprendizajes: Destacar: ¿Qué impacto tuvo el uso de PiX? ¿Se tomaron decisiones diferentes gracias a la visualización? ¿Aprendizajes transferibles?
Conclusión / Cierre: Un párrafo breve que sintetice el valor y aporte de PiX en este caso específico.
DATOS DE ENTRADA (Insertar información aquí):
- [Contenido de Título]
- [Contenido de Contexto]
- [Contenido de Objetivos]
- [Contenido de Desarrollo]
- [Citas a incluir]
- [Conclusiones clave]
- [Opcional: Ficha técnica del proyecto (Año, Lugar, Equipo, Enlace)]
Instrucciones Adicionales: Inicia la redacción indicando qué número de caso es. Termina con un salto de línea y solo el enlace URL.

Avances, lunes 16 de Junio

Maquetación: El libro tiene tamaño Carta.

Toolkit: Primer prototipo

Iconos de pix, capa de usuario, dialogo y sistema
Pentagrama de PiX
Pentagrama con dos hojas cartas

Partituras de Interacción para libro PiX

Partitura de interacción de como se lee el libro web
Partitura de interacción de como se lee el libro físico
Partitura de interacción de como se usa el Toolkit

Avances lunes 23 de Junio

Libros web

Este estudio analiza libros digitales diseñados para leerse directamente en la web. Comparamos su navegación, estructura visual e integración de imágenes o interactividad. El objetivo es identificar buenas prácticas en la creación de experiencias lectoras digitales atractivas y funcionales.

Presentación de libros web

Comentarios de cada libro

Resilient web: Creemos que el uso del color negro como fondo en la página web no favorece la lectura, ya que puede dificultar la legibilidad prolongada. Sin embargo, destaca el buen uso de capítulos claramente organizados en la página principal. La forma de citar es muy efectiva: se utilizan comillas y cursiva en gran tamaño para diferenciar claramente las citas del resto del texto. Aunque el contenido está centrado, la diagramación general podría mejorarse para ofrecer una experiencia de lectura más cómoda y fluida.
The shape of design: Hasta el momento, The Shape of Design se presenta como el mejor libro web que hemos revisado. Destaca por su excelente diagramación, el uso cuidadoso de ilustraciones y un formato de navegación limpio y minimalista. Al ingresar, realmente se tiene la sensación de estar entrando a un libro web: las flechas de navegación y el menú tipo “hamburguesa” están ubicados de forma precisa, lo que facilita el recorrido por los capítulos sin perder el efecto de estar leyendo en un entorno digital que simula lo físico con gran acierto.
The Manual: Está muy bien diagramado, con una estructura clara y cuidada en sus textos. Al citar, utiliza un estilo que destaca visualmente las citas del cuerpo principal. Cada capítulo comienza con una presentación bien definida, que incluye ilustraciones, lo que mejora la experiencia de lectura. Los párrafos están bien distribuidos y algunos contienen un pequeño símbolo tipográfico llamado asterismo (⁂), que se usa tradicionalmente para marcar una separación o cambio temático en el texto. Eso sí, el sitio no hace uso extensivo de imágenes, lo cual puede restarle dinamismo visual en algunos casos.
The Nature code: Presenta un diseño bien estructurado, con un navegador lateral a la izquierda que facilita el recorrido por las distintas secciones del libro. Destaca por el uso de numerosas imágenes interactivas y fotografías acompañadas de sus respectivos pies de página. La diagramación de los textos es clara y ordenada, y el formato de las citas está bien definido. Además, incluye elementos clave como la portada del libro, la bibliografía y otros recursos complementarios que enriquecen la experiencia de lectura.
Disiging for the web: Se destaca la posibilidad de descargar el libro en distintos formatos, como EPUB, Kindle o PDF, lo cual amplía su accesibilidad. Sin embargo, el diseño presenta algunas debilidades: los márgenes son reducidos y los párrafos extensos, lo que puede dificultar la lectura. La navegación principal se basa en una lista de capítulos visibles desde la página inicial, y cuenta con un pequeño encabezado para volver al inicio, aunque su uso puede resultar algo incómodo. Al hacer clic en los capítulos, el diseño es muy básico y se percibe como una estructura de enlaces sin un trabajo visual desarrollado en los botones. Aun así, el sitio incluye imágenes que complementan el contenido.
Practical typography: Ofrece una página de inicio atractiva, con los capítulos organizados de manera clara y accesible. Al navegar, se aprecia una excelente diagramación de los textos y un diseño visual limpio y simple que favorece la lectura. La presentación es elegante y funcional. Al finalizar cada capítulo, se encuentra un menú que permite navegar fácilmente a otras secciones del libro, volver al inicio o explorar contenido relacionado, lo que mejora la experiencia de uso sin complicar la interfaz.
The books of shaders: Es un libro web que presenta desde su página principal los capítulos organizados, junto con información sobre los autores y una sección de Agradecimientos. Al ingresar a un capítulo, el diseño es simple y claro, con márgenes amplios y párrafos bien distribuidos. El contenido incluye imágenes e ilustraciones interactivas que enriquecen la comprensión. Al final de cada página, se encuentra un menú de navegación con opciones como “previo”, “inicio” y “siguiente”, que facilita el recorrido continuo por el libro.

Method:La página abre con una portada atractiva que introduce de forma clara y general el contenido del libro web, así como a sus autores. La estructura sigue el formato de una página web tradicional, con header, cuerpo y footer bien definidos. Desde el inicio de la lectura se cuenta con botones de navegación Next y Previous, visibles tanto en la parte superior como al avanzar con el scroll, facilitando el desplazamiento entre secciones. A lo largo del contenido se incluyen citas destacadas y visualmente atractivas, mientras que todos los textos están centrados, lo que aporta una presentación limpia y ordenada que invita a seguir explorando.

Propuesta de ilustraciones

Si bien aún no tenemos definida completamente la línea gráfica de las ilustraciones, hemos explorado algunas referencias e intenciones visuales que queremos que acompañen tanto al libro como a la versión web del proyecto. Nos interesa que la ilustración dialogue con el contenido y el espíritu de PiX, manteniendo una estética sencilla, conceptual y coherente con su carácter metodológico.

Entre las posibilidades que estamos considerando, se encuentra un enfoque similar al del libro The Shape of Design, que combina ilustraciones minimalistas y abstractas, con una carga expresiva que complementa y potencia el contenido. También estamos evaluando el uso de dibujos simples o esquemáticos, que aporten claridad sin sobrecargar la información, permitiendo que el lector se centre en los conceptos clave.

En ambos formatos físico y digital, buscamos que la ilustración no sea meramente decorativa, sino que contribuya a representar ideas, facilitar la comprensión del método y acompañar la lectura de forma coherente con la propuesta visual general del proyecto.

Presentacción Final

Presentación de la Evaluación final de Semestre

Lamina Final

Proyecto de Título II semestre

Calendario del Segundo semestre

Referencias: La creación página Web

Revisión de casos de libros web

Nombre del libro	Lectura online	Img/Ilustración	Tipo de navegación	Diseño atractivo	Estrellas
Resilient Web	El contenido es claro y bien organizado, aunque el fondo negro dificulta la lectura prolongada. Los capítulos están accesibles desde la página principal, lo que ayuda a orientarse.	Se usan pocas imágenes. Destacan las citas, diferenciadas con comillas y cursiva en gran tamaño, lo que aporta identidad visual al texto.	La navegación es sencilla, basada en una estructura lineal de capítulos. Aunque es clara, puede sentirse limitada para el usuario.	La diagramación podría mejorar: los textos centrados hacen la lectura menos fluida. Sin embargo, se aprecia un estilo sobrio.	★★★☆☆
The Shape of Design	Destaca por su excelente diagramación, con un ritmo de lectura cómodo y atractivo. Da la sensación de estar leyendo un verdadero libro digital.	Uso cuidadoso de ilustraciones que complementan el contenido sin sobrecargarlo. Los recursos gráficos enriquecen la experiencia.	Cuenta con un menú tipo hamburguesa y flechas laterales que permiten avanzar o retroceder entre capítulos con gran facilidad.	El diseño es limpio, minimalista y envolvente. Genera la sensación de estar frente a un libro físico adaptado al entorno digital.	★★★★★
The Manual	La lectura es clara, con textos bien distribuidos. Cada capítulo abre con una breve presentación que prepara al lector.	Se incluyen ilustraciones iniciales que acompañan cada capítulo. Además, el uso de asterismos (⁂) marca cambios temáticos de forma elegante.	La navegación es estructurada y lógica, con capítulos definidos y fáciles de recorrer.	Su estilo es cuidado y elegante. Sin embargo, el sitio hace un uso limitado de imágenes, lo que lo hace menos dinámico visualmente.	★★★★☆
The Nature of Code	Presenta un texto bien organizado y accesible, acompañado de explicaciones claras que enriquecen la lectura digital.	Se caracteriza por un uso abundante de imágenes interactivas y fotografías con pies de página, lo que hace la lectura más dinámica.	Utiliza un navegador lateral fijo que permite desplazarse por las distintas secciones sin perder contexto.	Es uno de los libros más completos: incluye portada, bibliografía y recursos adicionales. Su estilo visual transmite orden y dinamismo.	★★★★☆
Designing for the Web	Ofrece la posibilidad de descargar el libro en varios formatos (EPUB, PDF, Kindle), lo que lo hace más accesible. No obstante, los párrafos largos dificultan la lectura en pantalla.	Incluye algunas imágenes que acompañan el texto, aunque no son el punto fuerte del diseño.	La navegación está basada en una lista de capítulos visibles desde el inicio, con encabezados simples para volver atrás. Sin embargo, puede resultar poco práctica.	El diseño general es básico y los márgenes reducidos generan cierta incomodidad en la lectura prolongada.	★★★☆☆
Practical Typography	El texto se presenta con gran claridad y estructura, lo que favorece la comprensión. La organización de los capítulos es ordenada y funcional.	No abunda en ilustraciones, pero su enfoque minimalista en tipografía y diseño lo vuelve muy legible.	Al finalizar cada capítulo, se despliega un menú que facilita la navegación hacia otras secciones o al inicio, optimizando la experiencia del lector.	Su diseño elegante y simple refuerza la idea de una web bien cuidada, centrada en la experiencia de lectura.	★★★★☆
The Book of Shaders	La lectura es cómoda gracias a los márgenes amplios y a una estructura clara de párrafos. Además, desde la portada se destacan los capítulos y agradecimientos.	Contiene imágenes e ilustraciones interactivas que enriquecen la comprensión, especialmente en temas técnicos.	Cada capítulo tiene un menú inferior con opciones de “previo”, “inicio” y “siguiente”, lo que mantiene el flujo de lectura continuo.	Diseño simple, claro y con buen equilibrio entre texto e imagen. Genera una experiencia muy didáctica.	★★★★☆
Method	Comienza con una portada llamativa y explicativa, que introduce de forma clara el contenido y autores. La lectura es fluida gracias a textos centrados y bien jerarquizados.	Incluye citas destacadas con diseño visual atractivo, lo que enriquece la experiencia textual. La portada y estructura lo hacen acogedor.	Cuenta con botones de navegación “Next” y “Previous” visibles en el header y al avanzar con scroll, haciendo el desplazamiento muy intuitivo.	Su estética combina limpieza visual con organización clara, generando confianza y motivación a seguir explorando el contenido.	★★★★☆

Primeras Propuestas de las ilustraciones

Texturas

Avances de ilustraciones

Categoría	Semana del 18 de agosto	Semana del 1 de septiembre
Redacción	Avance en la redacción del libro PiX, revisión de casos de libros digitales.	Cambios en algunos títulos, ajustes de palabras para mayor claridad (ej. “invaluable” → “importante”).
Ilustraciones	Definición de estilo gráfico: grilla con triángulos rectángulos y pictogramas PiX.	Pruebas de cambios en ilustraciones con pictogramas, coordinación con Javiera Ruiz para ilustraciones digitales.
Diagramación	Trabajo en InDesign: definición de márgenes y estilos de texto (títulos, subtítulos, pies de imagen).	Ajustes de interlineado, variaciones en bold, cambios en márgenes superiores.
Identidad gráfica	Organización inicial de capítulos: Teoría, Casos de uso y Toolkit.	Inclusión de color naranja en subtítulos, elemento contextual en cada página, etiquetas de “País” en presentación de casos.
Citas y referencias	Revisión de citas y pie de imágenes.	Inclusión de citas vinculadas a figuras para reforzar el contexto.

Ilustración, creación de Nuevos Iconos PiX

El proceso de creación de nuevos íconos utilizando el lenguaje PiX se basa en mantener la coherencia visual con las gráficas de los PiXograms, asegurando que cada nuevo símbolo conserve el estilo característico. En este caso, se identificó la ausencia de ciertos íconos esenciales, como un libro y un cuadernillo.

Para diseñar el primer ícono, que representa un libro cerrado, se tomó como referencia el ícono original de "Paste", que consiste en una hoja junto a una carpeta. A partir de esta forma base, se realizaron variaciones que adaptaron la figura hacia un libro cerrado, cuidando de mantener las curvas suaves y el grosor uniforme que caracteriza al lenguaje PiX.

En cuanto al segundo ícono, correspondiente a un cuadernillo, se utilizó como referencia el ícono de "maps". Se respetaron tanto el grosor de las líneas como el tamaño general para asegurar la armonía visual con el resto de los íconos existentes.

De esta manera, se logró ampliar la biblioteca de íconos PiX sin perder la identidad gráfica ni la coherencia estilística que los define.

Etiquetas

En la sección de casos de estudio, se incorporarán etiquetas con un código de color:

morado para grado académico (pregrado, doctorado, área académica)
naranjo para país
gris para caracterizar entre lo público y lo privado

Cuadernillos pedagógicos → Chile (naranjo) · Público (gris)
Diplomado-UXDI → Argentina (naranjo) · Diplomado (morado)
CEPAL – Mapa federal del cuidado → Argentina (naranjo) · Público (gris)
Memento: Realidad aumentada para activar la memoria → Chile (naranjo) · Pregrado (morado)
Proyectos Saldo insoluto – Solicitud del subsidio discapacidad → Chile (naranjo) · Público (gris)
Empresa Cumplo – MVP Sistema de Atención Solicitantes → Chile-México (naranjo) · Privado (gris)
Visualizando el impacto urbano y social de las plataformas de delivery → Chile (naranjo) · Doctorado (morado)

En cuanto a las ilustraciones, se continuará utilizando triángulos con inspiración en el tangrama, combinados con recursos de p5js.org, con el fin de aportar mayor interactividad y trasladar esta experiencia también a la página web.

**Formato editorial del libro**
Aspecto	Inicio	Cambio
Tamaño	Tamaño carta	17,4 × 24,3 cm
Márgenes laterales	4 cm	3 cm
Márgenes superior e inferior	2,5 cm	2,5 cm
Tipografía	Crimson Text	Crimson Text
Ilustraciones	Triángulos con textura	Triángulos con p5js (interactivo)

Significado de los Iconos

Icono	Significado
	Lupa - Descubrimiento: Representa la búsqueda y exploración. Se utiliza cuando es necesario crear o descubrir nuevos elementos dentro de la partitura, invitando a mirar con mayor detalle aquello que está presente.
	Lentes – Énfasis: Señala el enfoque y la observación detallada. Su función es resaltar aspectos específicos de la partitura, llamando la atención sobre un punto clave o un énfasis en particular.
	Nube de pensamiento – Ideas: Simboliza la generación de nuevas ideas. Este ícono marca la incorporación de propuestas frescas o alternativas innovadoras para el uso de la partitura.
	Lápiz - Registro: Indica la acción de dibujar y añadir. Se emplea para complementar la partitura con trazos, esquemas o notas anexas que enriquecen el registro visual.
	Diálogo - Testimonio: Representa la incorporación de citas, testimonios o fragmentos de conversación que se reflejan en la partitura.

Libro Físico: Maquetación y Diseño

El diseño propone una diagramación dinámica con márgenes extendidos que destacan las imágenes y partituras PiX. Se utiliza un sistema tipográfico híbrido que combina Lato Bold en los títulos con Crimson Text para el cuerpo de texto, garantizando contraste y fluidez.

La paleta cromática organiza la navegación:

El naranjo jerarquiza los contenidos principales.
El negro asegura la legibilidad.
El lila aporta una estética digital de apoyo.
El gris claro integra sutilmente las ilustraciones y elementos secundarios.

Diagramación General del Contenido

El diseño editorial se estructura en dos visualizaciones clave, como se muestra a continuación:

Diagrama de la estructura de las páginas de caso.	1. Páginas de Inicio de Caso: La diagramación de las páginas de inicio de cada caso se divide visualmente: En el lado derecho, se ubica un afiche que contiene el título y la información resumida del caso. En el lado izquierdo, se presenta una imagen generada en p5js, acompañada de sus respectivos iconos PiXogramas que representan el caso.

Diagramación horizontal de la sección de partituras.	2. Páginas de Partituras (Doble Página): Las dobles páginas dedicadas a la sección de las partituras se diagraman en formato horizontal (apaisado) para dar el espacio y la continuidad visual necesarios para la lectura y análisis de las partituras complejas.

Mockups

Fundamentos de las Ilustraciones

Ilustración de los triángulos

El estilo visual de las ilustraciones del libro PiX se basa en conjuntos de triángulos rectángulos trabajados en P5js para que la versión web del libro sea más interactiva aún. Estos son pensados como piezas que evocan un rompecabezas en constante armado, inspirados en tangramas, que funcionan de igual manera que las partituras PiX.

Estas formas sugieren un lenguaje abierto que se compone según el contexto de cada proyecto. Su carácter geométrico apunta hacia la claridad estructural que posee PiX como herramienta, mientras que su disposición variable transmite la capacidad de adaptación de las partituras y la variedad de casos de uso que el libro reúne.

Los triángulos dialogan entre sí, cambiando de escala, orientación y ritmo, hasta configurar composiciones únicas. Estas imágenes acompañan y amplifican la lectura, recordando que PiX no es un método cerrado, sino un lenguaje flexible y multifacético, capaz de adaptarse a diferentes realidades. Los colores que conforman estas ilustraciones son la paleta ya establecida de PiX, con el naranjo como color principal y pequeños ajustes en los tonos de los grises y violeta.

Ilustración de la portada con triángulos.

Ilustración en sección de caso, primer momento
Ilustración en sección de caso, segundo momento

Ilustración de trazos, semicírculos y círculos

Las ilustraciones de este libro se construyen a partir de una Unidad discreta, una forma mínima que se repite y varía para generar continuidad visual.

Rectas, semicírculos y círculos conforman los PiXogramas, un lenguaje iconográfico propio de PiX que traduce la interacción en ritmo, estructura y gesto.

Cada trazo es una partitura: una huella del pensamiento visual que sostiene la identidad del sistema.

Ilustración de la portada con trazos.

pruebas con trazos de los iconos PiXograms
pruebas con trazos de los iconos PiXograms

Estudios de Caso: Aplicación de Partituras de Interacción (PiX)

Las Partituras de Interacción (PiX) se aplicaron en diversos contextos, desde políticas públicas y educación, hasta proyectos de tecnología y urbanismo.

Los nombres de los casos de uso

1. Codiseño de Experiencias Formativas en Escuelas Públicas: Foco del Proyecto: Proyecto Integrado en Cuadernillos Pedagógicos.; Colaboración: Escuela de Arquitectura y Diseño (PUCV) y Ministerio de las Culturas, las Artes y el Patrimonio (Chile).; Uso de PiX: Metodología activa para fortalecer la participación estudiantil y diseñar experiencias de aprendizaje interdisciplinarias y colaborativas, permitiendo vincular asignaturas de forma transversal.; Recurso: Cuaderno Pedagógico

2. Visualización Colaborativa de Interacciones en un Marketplace Solidario: Foco del Proyecto: Creación de EcoSolidaria, una plataforma digital para promover economías sociales y solidarias (Argentina).; Contexto: Diplomatura en Diseño de Experiencia de Usuario (UXDI).; Uso de PiX: Herramienta de codiseño para visualizar y estructurar las interacciones entre los actores (productores, consumidores y prosumidores), apoyando el desarrollo de la experiencia de usuario.; Recurso: UXDI

3. Diseño de Flujos Digitales Accesibles para una Política de Cuidado: Foco del Proyecto: Creación de un Mapa Federal del Cuidado (Argentina).; Colaboración: CEPAL y el Ministerio de Mujeres, Géneros y Diversidad (MMGyD).; Uso de PiX: Recurso visual para modelar los flujos del sistema digital de geolocalización, facilitando la comprensión del recorrido del usuario y la representación de funcionalidades complejas y experiencias de uso.; Recurso: Publicación CEPAL

4. Interacciones con Realidad Aumentada para la Estimulación Cognitiva: Foco del Proyecto: Proyecto Memento, aplicación de realidad aumentada como herramienta terapéutica para personas mayores con demencia.; Contexto: Tesis de pregrado de Javiera Ruiz (PUCV).; Uso de PiX: Aplicada en el proceso de diseño y para mapear la navegación del usuario, articulando las interacciones entre espacio físico, recuerdos y realidad aumentada, basándose en el método de los palacios de la memoria.; Recurso (Citar tesis): Ruiz, J. (Año). Memento: Reconstrucción de recuerdos y estimulación cognitiva a través de palacios de la memoria virtuales [Tesis de pregrado]. Escuela de Arquitectura y Diseño, Pontificia Universidad Católica de Valparaíso.

5. Representación Integrada de Flujos de Servicio en Procesos Públicos Complejos: Foco del Proyecto: Definición y documentación del flujo de negocio para la devolución o retiro de fondos remanentes (saldo insoluto) en el servicio ChileAtiende (IPS, Chile).; Contexto: Iniciativa de gestión interna liderada por Andrea Zamora.; Uso de PiX: Permitió elaborar un flujo universal y verificable, integrando las perspectivas de negocio, tecnología y atención ciudadana, representando el nuevo flujo de manera interoperable y centrada en el usuario.

6. Planificación y Alineación Técnica para el Diseño de un MVP en Fintech: Foco del Proyecto: Diseño de un Producto Mínimo Viable (MVP) para el sistema digital de atención a solicitantes en la fintech Cumplo (Chile, México y Perú).; Contexto: Proyecto de sector privado con participación de Camila Alvarado.; Uso de PiX: Aplicación clave para la planificación colaborativa y coordinación técnica, mejorando la alineación entre los equipos de diseño, producto y desarrollo en un entorno ágil.; Recurso: Cumplo

7. Análisis de Sistemas de Plataformas de Delivery: Foco del Proyecto: Investigación doctoral de Rodrigo Vera sobre el impacto urbano y social de las plataformas de delivery.; Uso de PiX: Herramienta para analizar visual y sistémicamente las experiencias de usuarios, repartidores y restaurantes, identificando fenómenos urbanos emergentes (cocinas fantasma, trabajo informal, transformación del espacio público).

Proyecto Final

Las láminas tienen como objetivo visualizar la ruta metodológica del proyecto, desde la investigación inicial hasta la materialización final, y se organizan de la siguiente manera:

1. Partituras de Desarrollo y Descubrimiento: El Formulario y las Entrevistas Esta lámina sintetiza la etapa inicial de investigación y levantamiento de requerimientos.Se centra en:La estructuración del formulario como instrumento para recopilar datos de la interacción.El diseño y la aplicación de las entrevistas a usuarios clave y diseñadores, sirviendo como la primera aplicación de las Partituras de Interacción (PiX) para mapear el proceso de desarrollo del proyecto.

2. Análisis y Mapeo: Los Siete Casos de Estudio Esta lámina expone el corazón de la investigación aplicada. Muestra:La aplicación de las partituras como herramienta de análisis.La comparación sistemática de los siete casos de estudio, utilizando las PiX para visualizar las interacciones, las estructuras y las dinámicas identificadas en cada proyecto (desde la educación hasta las plataformas digitales).

3. Diseño y Maquetación libro físico: Del Concepto al Objeto Esta lámina documenta el proceso de materialización del libro físico.Se detallan los siguientes aspectos:El diseño editorial y la maquetación (grilla, tipografía, jerarquías).La conceptualización gráfica y la selección de materiales para la producción final.

4. Código y Visualización: El Libro Web Esta lámina se enfoca en la implementación digital del proyecto, presentando:El código fuente y la arquitectura de la versión web del libro.El sistema de visualizaciones interactivas desarrollado (por ejemplo, con P5.js o el lenguaje visual empleado para las ilustraciones basadas en triángulos).