Trabajo Final de Grado.

Proyecto de diseño

Carrera: Licenciatura En Diseño Gráfico

Título: Cátedra de Audioperceptiva II: diseño de libro interactivo.

Audioperceptive II chair: interactive book design.

Línea temática estratégica: Diseño adaptado al usuario

Alumna: Luciana Mariatti

DNI: 43230971

Legajo: DGR01907

Lugar y fecha: Córdoba, Domingo 13 de noviembre de 2022.

Docente: Rosa Esther Palamary

 2

Índice de contenidos

Resumen ....................................................................................................................................................... 6

Abstract ........................................................................................................................................................ 7

Problema De Diseño..................................................................................................................................... 8

Objetivos ................................................................................................................................. 11
Objetivo General ................................................................................................................. 11
Preguntas Especificas: ......................................................................................................... 11
Objetivos Específicos ........................................................................................................... 12
Justificación ......................................................................................................................... 12
Marco Teórico ............................................................................................................................................ 13

Audioperceptiva ...................................................................................................................... 13
Proceso De Cognición .............................................................................................................. 14
Diseño De Experiencia De Usuario .......................................................................................... 15
Libros Digitales Interactivos .................................................................................................... 16
Retículas .................................................................................................................................. 17
Maquetación ........................................................................................................................... 19
Formato De Archivo ................................................................................................................ 19
Hipertexto ............................................................................................................................... 20
Multimedia .............................................................................................................................. 21
Metodología de diseño ............................................................................................................................... 22

Metodología De Referencia .................................................................................................... 22

Metodología Propia................................................................................................................. 25
Fase analítica ....................................................................................................................... 26
Diseño.................................................................................................................................. 26
Ejecución ............................................................................................................................. 27
Antecedentes .......................................................................................................................... 27
Recolección y diseño de datos ................................................................................................ 28
Caso N° 2: Material de curso online: crea tu propio jornal ................................................. 31
Caso N° 3: La lucha de los derechos humanos. Presentación realizada en Genially........... 32
Conclusión de los casos de estudio ......................................................................................... 34
 3

Programa de Diseño ................................................................................................................................... 35

Concepto de Diseño ................................................................................................................................... 40

Cronograma de trabajo ............................................................................................................................... 41

Generación de la propuesta de Diseño, Desarrollo de la propuesta final, Definición Técnica ................... 42

Búsqueda tipográfica .............................................................................................................. 43

Bocetos exploratorios ............................................................................................................. 43
Búsqueda cromática ................................................................................................................ 47
Arquitectura de la información ............................................................................................... 48
Primeros bocetos del libro digital e interactivo ...................................................................... 50
Definición técnica .................................................................................................................... 54
Sistema de retículas ................................................................................................................ 54
Paleta cromática...................................................................................................................... 55
Sistema iconográfico ............................................................................................................... 56
Estilos tipográficos / Estilos de texto ...................................................................................... 58
Botones e interactividad ......................................................................................................... 60
Maqueta/Prototipo ...................................................................................................................................... 62

Análisis de costos ....................................................................................................................................... 66

Conclusiones .............................................................................................................................................. 68

ANEXOS ................................................................................................................................................... 70

Anexo N° 1:.............................................................................................................................. 71
Anexo N° 2:.............................................................................................................................. 74
Anexo N° 3:.............................................................................................................................. 77
Anexo N° 4:.............................................................................................................................. 78
Anexo N° 5:.............................................................................................................................. 81
Anexo N° 6:.............................................................................................................................. 82
Referencias ................................................................................................................................................. 83
 4

Índice de tablas
Tabla 1. Elaboración propia. (2022) ........................................................................................... 24
Tabla 2. Elaboración propia. (2022)........................................................................................... 25
Tabla 3. Elaboración propia. (2022)............................................................................................ 25
Tabla 4. Caso de Estudio Canvas. Universidad Siglo 21. Fuente: Elaboración propia (2022) ... 30
Tabla 5. Caso de Estudio Crea Tu Propio Journal. Fuente: Elaboración propia (2022) ............. 32
Tabla 6. Caso de Estudio Genially. Universidad Siglo 21. Fuente: Elaboración propia (2022) . 33
Tabla 7. Condicionantes, requerimientos y premisas. Fuente: Elaboración propia (2022) ......... 39
 5

Índice de figuras
Figura 1. Caso de Estudio Canvas. Fuente: Elaboración propia (2022) ...................................... 28
Figura 2. Caso de Estudio Crea Tu Propio Journal. Universidad Siglo 21. Fuente: Elaboración
propia. (2022) .............................................................................................................................. 31
Figura 3. Caso de Estudio Genially. Universidad Siglo 21. Fuente: Elaboración propia (2022).32
Figura 4. Cronograma de trabajo. Elaboración propia. (2022) ................................................... 41
Figura 5. Moodboard. Elaboración propia. (2022) ...................................................................... 42
Figura 6.Exporación de tipografías. Elaboración propia. (2022) ................................................ 43
Figura 7. Bocetos exploratorios 1. Elaboración propia. (2022) .................................................. 44
Figura 8. Bocetos exploratorios 2. Elaboración propia. (2022) .................................................. 45
Figura 9. Bocetos exploratorios 3. Elaboración propia. (2022) .................................................. 46
Figura 10. Bocetos exploratorios 4. Elaboración propia. (2022) ................................................ 46
Figura 11. Exploración iconográfica. Elaboración propia. (2022) .............................................. 47
Figura 12. Exploración cromática. Elaboración propia. (2022) .................................................. 47
Figura 13. Mapa de sitio. Elaboración propia. (2022)................................................................. 49
Figura 14. Bocetado de maquetación 1. Elaboración propia. (2022) .......................................... 50
Figura 15. Bocetado de maquetación 2. Elaboración propia. (2022) .......................................... 51
Figura 16. Bocetado de maquetación 3. Elaboración propia. (2022) .......................................... 52
Figura 17. Bocetado de maquetación 4. Elaboración propia. (2022) .......................................... 52
Figura 18. Bocetado de maquetación 5. Elaboración propia. (2022) .......................................... 53
Figura 19. Exploración de retículas. Elaboración propia. (2022)................................................ 53
Figura 20. Definición de retícula. Elaboración propia. (2022).................................................... 55
Figura 21. Definición cromática. Elaboración propia. (2022)..................................................... 56
Figura 22. Íconos, retícula y grilla constructiva. Elaboración propia. (2022) ............................. 57
Figura 23. Íconos, grilla constructiva. Elaboración propia. (2022) ............................................. 57
Figura 24. Íconos. Elaboración propia. (2022)............................................................................ 58
Figura 25. Definición tipográfica. Elaboración propia. (2022) ................................................... 59
Figura 26. Definición tipográfica 2. Elaboración propia. (2022) ................................................ 60
Figura 27. Botones. Elaboración propia. (2022) ......................................................................... 61
Figura 28. Botonera. Elaboración propia. (2022) ........................................................................ 62
Figura 29. Layout 1. Elaboración propia. (2022) ........................................................................ 63
Figura 30. Layout 2. Elaboración propia. (2022) ........................................................................ 63
Figura 31. Layout 3. Elaboración propia. (2022) ........................................................................ 64
Figura 32. Layout 4. Elaboración propia. (2022) ........................................................................ 64
Figura 33. Layout 6 . Elaboración propia. (2022) ....................................................................... 65
Figura 34. Layout 5. Elaboración propia. (2022) ........................................................................ 65
Figura 35. Layout 6 . Elaboración propia. (2022 ........................................................................ 66
 6

Resumen

En el presente trabajo se desarrolló un libro digital e interactivo para la cátedra de

Audioperceptiva II de la Facultas de artes de la Universidad Nacional de Córdoba.

Actualmente, el mundo está en constante evolución y debe la educación adecuarse al

mismo, es por eso que instituciones educativas y Universidades deben plantear un camino

en el cual los estudiantes puedan aprender de acuerdo a las nuevas tecnologías

disponibles. Es, por tanto, que se propuso crear un libro digital e interactivo, aplicando el

diseño de experiencia de usuario, para facilitar el estudio y aprendizaje de los contenidos

dictados en dicha cátedra. Para llevar a cabo el producto, se diseñó un método de diseño

propio, que amalgama partes del método de diseño de Gui Bonsiepe y de Bruno Munari.

Es importante destacar que, el contenido que utiliza este libro es de compleja compresión,

es por eso que se decidió llevarlo a un libro interactivo que permita ejemplificar y

vivenciar los contenidos de una manera más personal, involucrando al usuario y

posicionándolo en el centro de la escena.

Palabras claves: Libro interactivo, Ux, Audioperceptiva, Educación, Hipertexto.

 7

Abstract

In the present work, a digital and interactive book was developed for the Audioperceptive

II class of the Faculty of Arts of the National University of Córdoba. Currently, the world

is constantly evolving place and education must adapt to it, that is why educational

institutions and universities must propose a path in which students can learn according to

the new technologies available. It is, therefore, that it was proposed to create a digital and

interactive book, applying user experience design, to facilitate the study and learning of

the contents dictated in the mentioned class. To carry out the product, a proprietary design

method was created, which amalgamates parts of the design method of Gui Bonsiepe and

Bruno Munari. It is important to point out that the content used in this book is of complex

compression, which is why it was decided to turn it into an interactive book that allows

exemplifying and experiencing the contents in a more personal way, involving the user

and placing them at the center of the scene.

Keywords: Interactive book, Ux, Audioperceptive, Education, Hypertext.

 8

Problema De Diseño

A lo largo del tiempo han existido diferentes formas de transmitir la información

y el conocimiento, entre ellas se pueden mencionar la transmisión oral como también la

escrita. Este proyecto hará hincapié en la última mencionada.

Como plantea Escolar (1986), el soporte (en el cual se transmite la información y

el conocimiento) se ha ido adaptando a las características de las nuevas sociedades, sus

diversas necesidades y los materiales con los que contaban. Dichos soportes comenzaron

siendo objetos elementales como piedra, huesos, cerámicos, que luego evolucionaron a

pieles animales y hojas.

Los libros como material de cultura y propagación de la información han sido de

gran importancia, ya que:

“El libro ha facilitado al hombre un aumento considerable de la capacidad

de su memoria, (...) Gracias a él, los hombres superaron las barreras del tiempo y

del espacio en la recepción de los mensajes, y gracias también a él fue posible

mejorar el intercambio de información sobre lo útil y provechoso y que los

individuos, agrupados en sociedades, compartieran una misma concepción de la

vida y tuvieran iguales comportamientos. El libro, además, les ayudó a acrecentar

su bagaje intelectual, a percibir las relaciones de unas cosas con otras, a encontrar

las causas de determinados hechos y fenómenos, a pensar, en una palabra, y

consecuentemente a potenciar su facultad discursiva, de la que ha partido su

dominio y explotación de la naturaleza.” (Escolar, 1986, p 1.).

 9

En 2022, la sociedad se encuentra en plena era de la transformación digital, en

donde mucha de la información ha tomado forma de videos, podcast, imágenes y libros

digitales como alternativa del libro en papel. En consecuencia, las universidades y

docentes, en pos de beneficiar el aprendizaje, han tenido que adaptarse a este mundo

digital, incorporando plataformas online y material multimedia, entre ellos los libros

electrónicos.

“(…) Si tomamos como referencia el panorama de unos años atrás,

podemos comprobar cómo tanto la producción de libros electrónicos como de

lectores en digital ha ido en aumento. Este incremento ha estado auspiciado, sin

duda, por la ruptura con el campo editorial tradicional, así como con las prácticas

de lectura convencionales, expandiendo hacia escenarios nuevos las actividades

vinculadas con ambos elementos. Nuevos formatos, nuevos géneros, nuevos

comportamientos frente al texto han favorecido la generación de una cultura que,

sin romper todavía el cordón umbilical con el entorno impreso, se va adentrando

en territorios cada vez más alejados de este. Nos encontramos ante escenarios con

un alto grado de experimentalidad, en el que los tiempos de supervivencia de las

propuestas son efímeros y a veces imperceptibles, pero en el que se van

consolidando tendencias exclusivas del nuevo entorno, con movimientos que

beben de la tradición, pero desde una perspectiva completamente renovada… “

(Cordón García, 2018, pp 1-2).

En otras palabras, hoy en día, la transmisión de la información y el conocimiento

sigue mutando en su forma de ser contenida y difundida; el libro de papel, si bien perdura,

ya no es el medio principal por el cual se puede acceder al conocimiento.

 10

Debe señalarse, que los libros digitales/electrónicos no pueden quedarse

simplemente en una experiencia de lectura lineal, ya que se caería en libros que son

meramente una copia digital de los libros impresos, desaprovechando la hipertexualidad

que los medios digitales ofrecen. Según la Real Academia Española (RAE), se entiende

por hipertextualidad a un conjunto estructurado de textos, gráficos, etc., unidos entre sí

por enlaces y conexiones lógicas. (https://dle.rae.es/hipertexto)

Parafraseando a Cordón García (2018), se comprende, que la era digital ha traído

consigo no solo una nueva forma de maquetar y distribuir los contenidos, sino además a

un nuevo lector, que con el pasar de los años, busca y espera cada vez más de sus

experiencias de lectura. Visto de esta forma, el lector, al igual que los libros digitales, no

presuponen una lectura de secuencia lineal. (p. 170)

Se concluye, entonces, que los mal llamados “libros digitales”, que se encuentran

escasos de maquetación, hipertextualidad, interacción y contenidos multimedia, fallan en

la misión de captar la atención del lector. Así sucede en el material didáctico de la cátedra

de Audioperceptiva II de la Facultas de Artes de la Universidad Nacional de Córdoba.

Actualmente, el material de estudio de dicha cátedra, en primer lugar, consiste en

un archivo digital en formato .PDF que no posee diseño alguno, es decir, no está

reticulado y solo se encuentra el contenido presentado. En el mismo orden de ideas, es un

archivo que no aprovecha ninguna de las cualidades de los medios digitales y no cuenta

con diseño adaptado al usuario. En tercer lugar, dicho apunte es utilizado por alumnos de

segundo año de las carreras del Departamento de Música de la Facultad de Artes de la

Universidad Nacional de Córdoba (UNC), y posee un contenido por demás complejo, por

lo cual es necesario que los conceptos expuestos sean fácilmente comprendidos.

 11

Como afirma Gabriel Rusinek (2004), el aprendizaje musical es un proceso

sumamente complejo, que exige el desarrollo de habilidades específicas: auditivas, de

ejecución y de creación. La ausencia del material en su formato adecuado resuelve en un

gran conflicto para los alumnos que, a la hora de estudiar, no cuentan con recursos que

les facilite dicho aprendizaje.

En atención a la problemática expuesta, se podría diseñar un libro interactivo, en

el cual el alumno encuentre no solo textos con información y conceptos, sino también

audios que ayuden a la compresión de los signos musicales escritos y audios que sirvan

como ejercitación. Además, podrían incluirse videos, links a sitios útiles, entre otros.

Objetivos

Sobre la base de la problemática expuesta, a lo largo de este proyecto se

desarrollarán los siguientes objetivos:

Interrogante General

¿Existe una solución de diseño que pueda mejorar la experiencia de aprendizaje

de los alumnos de la catedra Audioperceptiva II?

Objetivo General

• Crear un libro digital e interactivo, aplicando el diseño de experiencia de

usuario, para facilitar el estudio y aprendizaje de los contenidos dictados en la Cátedra

Audioperceptiva II de la Facultad de Artes de la Universidad Nacional de Córdoba

(UNC).

Preguntas Especificas:

1. ¿A qué tipo de público estará dirigido este libro interactivo?

 12

2. ¿Cuáles serán las acciones previas y que elementos se necesitarán previo al

desarrollo del libro?

3. ¿De qué manera se podrá materializar el libro digital interactivo?

Objetivos Específicos

1. Analizar las necesidades y motivaciones del público objetivo para establecer

parámetros acordes a las mismas.

2. Recopilar, ordenar y clasificar el material multimedia necesario para

complementar el contenido ya existente.

3. Maquetar y diagramar los contenidos, mediante el uso de software de diseño

editorial, retículas y páginas maestras.

Justificación

Este proyecto será un aporte al Diseño gráfico, ya que se resolverá un problema

de usabilidad de los contenidos del material de la cátedra Audioperceptiva II, y a la vez

servirá para visibilizar la incorporación de dicho contenido no solo en cátedras que

requieran indispensablemente el uso de los medios digitales para el aprendizaje, sino

también en aquellas que deseen convertir el aprendizaje en un proceso que acompañe las

circunstancias y la contemporaneidad del público al que va dirigido.

Es por esto, que aquellos alumnos, que puedan acceder a este material, se verán

beneficiados al poder escuchar y practicar el contenido mismo de la cátedra, facilitando

su aprendizaje y haciendo que el mismo sea más flexible y entretenido.

Teniendo en cuenta que hoy se encuentran varios softwares de maquetación que

permiten la diagramación de otras secuencias de lecturas más allá de la lineal y posibilitan

 13

la incorporación de archivos multimedia, este proyecto es factible, por tanto, se sepan

utilizar dichas herramientas.

Marco Teórico

A continuación, se desarrollarán los conceptos más relevantes para poder llevar

a cabo este proyecto. Se pretende que las explicaciones sean claras y precisas para

colaborar a la compresión del lector.

Audioperceptiva

Favio Shifres y Pilar Holguín Tovar (2015) exponen en su libro El desarrollo de

las habilidades auditivas de los músicos que

“Tener un buen oído musical es una capacidad ampliamente demandada y

concomitantemente valorada en los músicos. Su posesión es algo que ningún

músico deja de estimar, pero que muy pocos pueden definir claramente. En

principio se lo vincula a la capacidad del músico para hacer ajustes en su

ejecución. Así, el músico tiene buen oído cuando puede producir un sonido que

previamente ha imaginado de manera ajustada al contexto de la ejecución. (Mc

Pherson y Gabrielsson, 2002)” (p. 11)

Por su parte, Martínez y Valles (2016), plantean que “Las experiencias de audición

y análisis y las actividades de reflexión en y acerca de la acción que tienen lugar durante

las prácticas audioperceptivas conducirán al desarrollo de los diversos modos de conocer,

sentir y comprender la música.” (p. 5)

 14

Por lo expuesto, se concluye que el desarrollo del oído musical para los músicos

o estudiantes tiene una gran relevancia no solo a la hora de ejecutar música, sino también

a la hora de sentirla y entenderla.

Proceso De Cognición

Cuando del proceso de cognición se habla, entendemos que hay ciertos factores

que favorecen el mismo.

“El proceso de aprendizaje es más efectivo cuando se estimulan los

sentidos, y menos útil cuando se intenta comprender la realidad a través de un

texto plano. Por ello, la educación debe avanzar a la par con la tecnología, y

aprovechar los elementos que esta le ofrece para acercar al hombre a una realidad

similar en la que habita, logrando con ello una mejor comprensión en el sujeto

cognoscente y en algunos casos una transformación e interpretación del mismo.”

(Rodríguez, 2013, p. 106).

El autor Calichs (2006), explica cómo

“El proceso de enseñanza aprendizaje en la Educación Superior necesita,

cada vez más, reducir los espacios latentes que aún existen entre la academia y las

necesidades, cada vez más crecientes, de la sociedad (la práctica). Es por ello que

este proceso demanda nuevas y renovadoras maneras de ser más eficiente “.

Menciona también que el desarrollo de la creatividad en los estudiantes juega un

papel esencial, ya que garantiza un pensamiento lateral capaz de resolver problemas en

diferentes situaciones y contextos. Calichs cita a Pérez De Cuéllar (1996), diciendo:

 15

“Este momento realmente extraordinario de la historia requiere soluciones

de excepción... Se necesita imaginación, capacidad de innovación, visión y

creatividad. Nuevas alianzas a nivel global son un elemento indispensable para

resolver creativamente los problemas, una cualidad que requiere que estemos

dispuestos a plantear preguntas audaces en lugar de remitirnos a las respuestas

convencionales”.

Por todo lo dicho, concluimos en que, enseñar desde, para y mediante la

creatividad, es un factor determinante y necesario para interpelar a los estudiantes; así

como también, estimular sensorialmente a los mismos para que la experiencia de

aprendizaje no sea meramente una experiencia lineal, sino que traspase los límites de lo

convencional.

Diseño De Experiencia De Usuario

En el último tiempo, el concepto de Diseño de Experiencia de Usuario (UX) ha

cobrado gran relevancia, debido a que los diseñadores han tomado conciencia de que cada

persona es única, pero a la vez representativa de un grupo.

Como dice Huerta, (2014), los diseñadores de experiencia se deberían encargar de

definir los medios, procesos y formas en que las personas interactúan con los objetos. En

otras palabras, definir qué, cuándo, dónde, por qué y cómo una persona usa un objeto,

producto, o accede a un servicio. En definitiva, el UX Design se encarga de todo lo que

afecta a la interacción de una persona con/en un sistema.

De la misma manera, Ramírez-Acosta (2017) plantea que

 16

“además de ser el punto de partida para una nueva experiencia, las

necesidades de los usuarios pueden también servir de base para un look &

feel estéticamente agradable por medio de tipografía, colores y elementos

gráficos, de manera que el usuario sea guiado en cada tarea, la experiencia

mejore y a su vez, la interfaz logre captar su atención, logrando ese balance

esencial para el éxito de una herramienta. Pensar en el usuario y sus

necesidades, va a permitir determinar las acciones, funciones y elementos

necesarios dentro del diseño.” (p.51)

Por lo tanto, el Diseño de Experiencia de Usuario abarca el profundo

conocimiento del público al cual se le diseña, no sólo en cuanto a características,

necesidades y comportamientos, sino también a preferencias estéticas. En este caso en

particular, el diseño Ux deberá considerar factores tales como la navegabilidad y

accesibilidad del usuario, siendo este el recorrido que el usuario pueda llegar a realizar, y

la manera por la cual el contenido llegará a él.

Libros Digitales Interactivos

Como se ha dicho anteriormente, los libros electrónicos son aquellos que se

distribuyen de manera digital y que poseen hipertextualidad, interacción y contenidos

multimedia. En este sentido,

“No cabe duda que los libros digitales suponen una nueva forma de acceder

a la información y al conocimiento a través de una interfaz sencilla e interactiva

que posee un gran atractivo para los estudiantes, se caracterizan por la

presentación de contenidos hipertextuales interactivos. Estos permiten sacar el

máximo las nuevas posibilidades nuevas tecnológicas, pero requieren de una serie
 17

de habilidades digitales básicas para su utilización. Su integración en las aulas está

generando un cambio metodológico en el proceso de enseñanza aprendizaje,

exigiendo al alumnado la asunción de un mayor protagonismo y compromiso y al

profesorado, un ajuste a los requerimientos que este nuevo contexto mediado por

los libros electrónicos genera. Esto se consigue combinando escenarios mixtos

donde se mezcla la presencialidad con la virtualidad.” (Sanz, 2017, p 40).

Karsenti (2017), estableció 25 ventajas de los libros electrónicos para el segmento

juvenil de la población. Entre las ventajas cognitivas se cuentan: el acceso, refiriéndose a

que el tiempo y el lugar son variables inexistentes en el entorno digital, ya que se puede

acceder a los contenidos independientemente de la hora y el lugar. Aprendizaje, puesto

que la combinación de herramientas de diversa naturaleza en una sola obra favorece los

procesos de aprendizaje. Y entre las ventajas afectivas, la más destacada es la multimedia,

debido a que la integración de contenidos de sonido, imagen y texto favorece el efecto de

gamificación y de interacción con los mismos.

Basándonos en lo expuesto por ambos autores, podemos concluir que los libros

digitales e interactivos, gozan de hipertextualidad, interacción y multimedia, lo cual

presenta ventajas significativas para los usuarios.

Retículas

“El uso de una retícula aporta consistencia al libro, así como coherencia a

la forma global. Los diseñadores que utilizan retículas consideran que esta

coherencia visual permite al lector centrarse en el contenido y no en la forma.

Cada uno de los elementos de la página, ya sean texto o imagen, tiene una relación
 18

visual con el resto: la retícula proporciona un mecanismo de formalización de

estas relaciones.” (Haslam, 2007, p 53).

Manchado-Pérez y Berges-Muro (2013), afirman que las retículas son

especificaciones previas a la composición de páginas y textos que condicionan las

características definitivas de las páginas. No se trata solo de una cuadrícula que guía la

composición de elementos, sino también se relaciona con la funcionalidad

comunicacional del producto final.

En definitiva, la retícula tiene un papel muy importante a la hora de componer

páginas, tanto en la distribución del contenido como en la función de dicha distribución.

No debemos pensar a la retícula como un elemento limitante de la composición, sino

como un sin fin de posibilidades. Se pueden nombrar algunos tipos de retículas tales

como:

• Retículas de estructura simple geométrica: el modo más sencillo de

crear una zona de impresión simétrica consiste en definir márgenes en

toda la página, formando así un marco sencillo. Se crea trazando dos

diagonales sobre la página y obtener un nuevo rectángulo en las

esquinas que crucen las diagonales. Una página vertical diseñada de

este modo posee un margen superior e inferior de la misma

profundidad y márgenes laterales más estrechos.

• Retícula modular: el diseñador deberá hacer una línea base, luego

establecerá cuantas líneas, incluido el interlineado, encajaran en cada

módulo y en cada columna. Dice Müller-Brockman “En un sistema de

retícula sofisticada, no solo las líneas de texto se alinean con las

 19

imágenes, sino también leyendas, las letras destacadas, los títulos y los

subtítulos.”

Maquetación

La RAE define a la maquetación como “la acción y efecto de maquetar”, es decir

“hacer un boceto previo de la composición de un texto que se va a publicar, usado para

determinar sus características definitivas”.

Como expone Guerrero Reyes, (2016) “Las publicaciones dependen de ciertas

características para componer la diagramación y maquetación. No es simplemente

acomodar elementos por donde se quiera, todo debe llevar una armonía que se debe

respetar para que sea entendible.” (p 42) Las características mencionadas por Reyes

contemplan el formato, la tipografía, el tamaño de fuente, el interlineado e interletrado,

la jerarquización de la información, elementos multimediales, entre otros.

Definimos entonces, que la maquetación es una herramienta útil e indispensable

para la diagramación y disposición de los elementos en la pieza que se esté diseñando.

Dicha herramienta permite ordenar y clasificar la información, las imágenes, videos,

sonidos y botones teniendo en cuenta los contenidos y el orden jerárquico que se le haya

asignado, tipo de contenido y porque no, ayuda también a realizar un recorrido de lectura

óptimo para la experiencia de usuario.

Formato De Archivo

Cuando hablamos del formato de libros para la distribución digital, en la mayoría

de los casos nos encontramos con los dos más utilizados: EPUB y PDF.
 20

“El PDF es ahora un estándar abierto, reconocido por la Organización

Internacional para la Estandarización (ISO). Los documentos PDF pueden contener

vínculos y botones, campos de formulario, audio, vídeo y lógica empresarial. Se pueden

firmar electrónicamente y puedes ver con facilidad los archivos PDF en Windows o Mac

OS utilizando el software gratuito Acrobat Reader.” (Adobe, 2022, ¿Que es el PDF?,

recuperado de https://adobe.ly/3BtWhno).

Explican Ramírez Vega & Abarca Fedullo, (2017) que EPUB es un formato

redimensionable de código abierto para leer textos e imágenes, que puede incluir

elementos tales como audio, video e interacción, se adapta a los diferentes tamaños de

pantalla y fuentes, redimensiona el contenido dinámicamente. (pp. 3; 5)

Como resultado de lo expuesto anteriormente, podemos dimensionar cuáles son

los dos tipos de formato de archivo más utilizados a la hora de distribuir libros digitales,

cada uno con sus respectivas ventajas competitivas.

Hipertexto

“El hipertexto o hipermedio electrónico es una forma de comunicación propia de

nuestra sociedad “multimedial”. Si bien se pone énfasis en el recorrido de lectura no lineal

quizás lo más original (que a la vez incluye esa no linealidad), sea la construcción de

sentido a partir de la interacción profunda de los diversos lenguajes que lo componen.

Así, como toda síntesis interdisciplinar, la “escritura hipermedial” se puede configurar de

muy diversas formas dando lugar a la composición de nuevas modalidades discursivas

posibles de ser analizadas y teorizadas.” San Martín, P. S. (2003).

Parafraseando a Adelaide Bianchini (1999), el hipertexto ha sido definido como

un enfoque para manejar y organizar información, en el cual los datos se almacenan en

 21

una red de nodos conectados por enlaces. Los nodos contienen textos y si contienen

además gráficos, imágenes, audio, animaciones y video, así como código ejecutable u

otra forma de datos se les da el nombre de hipermedio, es decir, una generalización de

hipertexto.

Concluimos entonces que el hipertexto es, por un lado, una estructura que presenta

la información de manera no lineal y le permite al lector leer y comprender de los

contenidos de igual forma, dotándolo de un atractivo particular. Por otra parte,

comprendemos también al hipertexto como la relación que tienen los contenidos entre sí

y sus diversas formas de presentación, tales como video, imágenes, sonidos, etc.

Multimedia

Como cita Andrade-Lotero, Luis Alejandro (2012) en la Revista Internacional de

Investigación en Educación, Mayer (2005, p. 2) define el término multimedia como: “la

presentación de material verbal y pictórico; en donde el material verbal se refiere a las

palabras, como texto impreso o texto hablado y el material pictórico que abarca imágenes

estáticas (ilustraciones, gráficas, diagramas, mapas, fotografías) y también imágenes

dinámicas (animaciones, simulaciones o video)”.

Asimismo, la Rae lo define como un adjetivo que utiliza conjunta y

simultáneamente diversos medios, como imágenes, sonidos y texto, en la transmisión de

una información.

En otras palabras, todos aquellos elementos que se puedan incluir en los medios

digitales y puedan ser utilizados para contener y trasmitir información, serán considerados

como recursos multimedia. Es este el caso de imágenes, videos, sonidos, podcast, entre

otros.
 22

Metodología de diseño

Parafraseando a Tzonis en el libro de Bernhard E. Bürdek, Diseño: historia, teoría

y práctica del diseño industrial, antes se suponía que el estudio de la metodología del

diseño era el desarrollo de un método unitario y estricto. Al decir esto, se ignoraba que

encargos diferentes requerían de métodos diferentes. Es por eso por lo que a continuación

se expondrán diferentes metodologías que servirán de ayuda y referencia para abordar el

problema planteado en este proyecto.

Metodología De Referencia

A continuación, se presentarán dos modelos de metodologías de diseño que serán

de referencia para la creación de la metodología a desarrollar y utilizar en este trabajo.

Por un lado, el modelo de metodología de Gui Bonsiepe, se eligió por, como él

mismo dice, lo metodológico contribuye al desglosamiento de la complejidad del diseño,

dividiendo un problema en subproblemas jerarquizados. Esta aproximación científica a

la proyección adquiere su validez en tanto es capaz de organizar los conocimientos gracias

a los cuales se hace posible la incidencia concreta en las etapas de diseño. Una

organización adecuada permite captar objetiva y no intuitivamente la naturaleza del

proceso proyectual.

“A pesar de que por momentos esta metodología se inclina hacia el diseño

industrial, su autor aclara que la misma no se rige por pasos secuénciales y

terminales, al contrario, el proceso de diseño se reformula de cuando en cuando.

Es por eso que se adecua al quehacer de diseño gráfico frente al proceso de diseño

y todo lo que involucra su desarrollo” Munari, B., Nelson, G., & Papanek, V.

(2008).
 23

Seguidamente, se escogió el Método de Diseño según Bruno Munari, ya que

plantea un método proyectual basado en la resolución de problemas. Esta metodología

evita el inventar la rueda con cada proyecto y plantea sistematizar la resolución de

problemas.

En contraposición con lo que plantea este autor, en este trabajo si se realizará una

metodología propia diseñada específicamente para la resolución de libros digitales e

interactivos; sin embargo, se considera que los pasos planteados por Munari podrían ser

útiles a la hora de crear y nutrir un nuevo método.

Método de Diseño según Gui Bonsiepe (2008)

1.1.-Localización de una necesidad

1.2.- Valoración de la necesidad. Comparar la necesidad

con otras respecto a su
compatibilidad y prioridad.

1.3.- Análisis del problema proyectual respecto a su

justificación.

1. Estructuración del 1.4.- Definición del problema proyectual en términos

problema generales.

1.5.- Decisión del problema proyectual

1.6.- Subdivisión de problemas en subproblemas

1.7.- Jerarquización de los problemas

1.8.- Análisis de soluciones existentes

2.1.- Desarrollo de alternativas o ideas básicas

2. Diseño 2.2.- Examen de alternativas

2.3.- Selección de mejores alternativas

 24

2.4.- Desarrollar alternativa seleccionada

2.5.- Construcción del logotipo

2.6.- Evaluación del prototipo

2.7.- Introducir modificaciones eventuales

2.8.- Construcción del prototipo modificado

2.9.- Validación del prototipo modificado

2.10.- Preparación de planos técnicos definitivos para la

fabricación

3.1.- Fabricación de pre-serie

3.2.- Elaboración de estudios de costos

3.3.- Adaptación del diseño a las condiciones específicas

3. Realización del productor

3.4.- Productos en serie

3.5.- Valoración del producto después de un tiempo

determinado de uso

Tabla 1. Elaboración propia. (2022)

Método de Diseño según Bruno Munari (2002)

Problema

Elementos del Problema

Definición del Problema

Recopilación de Datos

Análisis de Datos

Material. Tecnología
 25

Solución Problema

Modelos

Verificación

Dibujos Constructivos

Solución

Tabla 2. Elaboración propia. (2022)

Metodología Propia

Metodología propia

Definición del problema

Fase analítica Recopilación de datos

Análisis de la información

Elección de medios tecnológicos

Diseño
Desarrollo de alternativa

Elaboración

Ejecución Modificaciones eventuales

Validación

Tabla 3. Elaboración propia. (2022)

Atendiendo a lo previamente expuesto, la metodología tiene como fin último ser

lo más útil y preciso a la hora de abordar un problema. La misma debe adaptarse a la

 26

disciplina y al problema en cuestión. Como resultado de lo expuesto anteriormente y de

las metodologías propuestas por los distintos autores, se desarrolló una metodología

propia, con el fin de que guie el desarrollo del presente proyecto de la mejor manera.

Como resultado se pueden identificar tres momentos clave en este método.

Fase analítica

El proceso comienza con una fase analítica en donde se define el problema a

resolver y los objetivos que se desean alcanzar, como es en este caso, el diseño del

material de estudio de la cátedra Audioperceptiva II, lo que es lo mismo que decir que se

establecerán las bases y pilares para que el proyecto se ejecute.

Así mismo, en esta fase, se realiza una recolección exhaustiva de datos para

identificar, y comprender al público al que va dirigido, sus respectivas necesidades y las

opciones similares de producto que se encuentran disponibles en el mercado.

Para finalizar, todos los datos recabados deberán ser analizados rigurosamente. Es

importante aclarar que aquí, no solo se debe estudiar los datos, sino que, también, deben

ser filtrados y seleccionados según la relevancia que presenten para el proyecto.

Diseño

La segunda fase de este método corresponde al diseño. En este punto se definen

los medios tecnológicos que van a ser necesarios para desarrollar el proyecto, y a partir

de allí se comienza a buscar una solución al problema planteado, en otras palabras, se

crean y exponen las ideas que luego corresponderán a diferentes alternativas de resolución

de este. Dichas ideas pueden surgir de diversas herramientas y/o técnicas que estimulen

la creatividad, como brainstorming o asociación de ideas, pero al mismo tiempo, deben

 27

obligatoriamente, tomar en consideración la información analizada previamente, para que

la solución encontrada sea la más acorde y precisa según los objetivos planteados en la

etapa anterior.

Ejecución

Para concluir con la metodología, se debe pasar a la acción. La ejecución es el

último paso antes de completar este proceso. Aquí se comienza a materializar la idea, por

lo cual, cobrara vida todo lo analizado e ideado en función de los objetivos planteados en

la primera instancia. Siendo conscientes de que en esta etapa del proceso pueden surgir

complicaciones o mínimas ideas de mejora, con un criterio muy riguroso y excepcional,

se brinda la posibilidad de cambios mínimos en pos de un mejor producto.

Por último, una vez terminado el producto, el procedimiento finalmente se valida

corroborando que cumple con su cometido.

Antecedentes

A continuación, se presentarán tres casos de estudio que serán necesarios para

indagar e investigar las posibles soluciones del problema de diseño planteado. Si bien los

tres casos comparten la característica de ser materiales educativos digitales, los mismos

son, entre sí, muy disímiles.

El caso número 1, se asienta sobre la plataforma Canva, la cual posee material

educativo interactivo en cada una de las cátedras universitarias a la que el usuario de la

misma se encuentra inscripto. Ha sido considerada para este proyecto, ya que se considera

que el uso de la hipertextualidad está muy bien logrado.

 28

El segundo de los casos es el material de estudio de un curso de jounaling. Dicho

caso fue incluido en esta investigación principalmente por el formato en el que es

distribuido (PDF).

Las presentaciones realizadas en el sitio web Genially, específicamente la llamada

“La lucha de los derechos humanos” (https://url24.top/piEjG) es el último caso de

investigación que se analizara. Si bien su formato coincide con lo que se exhibe en una

presentación y no en un libro, este sitio web y este tipo de presentación del material,

revela gran contenido interactivo y multimedia que se corresponden al hipertexto y así

también al objetivo que se busca lograr. Se considera que este caso, podría traer a la mesa

otra alternativa de solución y a la vez dotar de otros recursos que no habían sido

considerados con anterioridad al diseño del producto final, como puede ser, que, al pasar

el cursor de mouse por encima de un objeto o texto, se despliegue un cuadro de texto con

información adicional.

Recolección y diseño de datos

Caso N° 1: Canvas

Figura 1. Caso de Estudio Canvas. Fuente: Elaboración propia (2022)

Ver anexo N°1

 29

Caso de Libro digital dentro de la plataforma Canva. Tomaremos como ejemplo

estudio N.º 1: el material utilizado para la cátedra de Gestión ambiental.

Diseño Formato y Este libro se encuentra en formato HTML, alojado

accesibilidad dentro del sitio web https://siglo21.instructure.com
. Para poder acceder al mismo, el usuario debe
formar parte de la universidad UES21, tener su
usuario en la plataforma Canva y estar inscripto a
la materia. Es necesario contar con acceso a internet
para poder hacer uso de este material.

Archivos Este libro digital presenta archivos en formato

multimedia multimedia tanto como, imágenes, videos alojados
en el sitio y videos alojados en YouTube, audios
que permiten que el material sea estudiado en
forma de audiolibro, links a otros sitios.

Interactividad y En cuanto a botones, se encuentra variedad de

botones estos. Se exhiben hipervínculos, botones que
permiten tildar opciones al estilo de check-list y
botones que simulan ser tarjetas las cuales se
voltean y contiene información ampliatoria de un
determinado concepto.

Estética y En cuanto a la estética, se podría decir que es muy

recursos gráficos limpia y en cierto punto “minimalista”, ya que el
recurso más utilizado es el color y el mismo se
presenta de una forma, sencillamente pulcra, que
limita su uso en pos de la funcionalidad del
contenido.

Maquetación y Debido a la gran cantidad de contenido e

disposición de interacción que posee este material, maquetar y
elementos reticular los contenidos ha de ser imprescindible.
Dicho orden es evidente, así como también es
visible que los elementos no interactivos e
interactivos no han sido exhibidos adrede, sino con
el fin de apoyar y nutrir, tanto el contenido mismo
como la experiencia del lector.

Experiencia Navegabilidad Respecto a la navegabilidad deben ser analizadas

de usuario dos situaciones. Por un lado, la navegabilidad del
sitio en donde se encuentra contenido este material,
es decir, el sitio web, que es en gran parte fácil de
usar y hasta bastante intuitivo, presenta un esquema
de navegación jerarquizado, debido a que, en orden
de acceder a una pestaña determinada hay
 30

pasos/botones previos que deben ser cliqueados

para llegar al deseado; y en contraparte, la
navegabilidad del sitio en sí, la cual no presenta
complicaciones y la distribución del contenido es
precisa. El esquema de navegación en este último
es mixto, puesto que presenta linealidad en cuanto
al orden del contenido para su correcta compresión,
pero a la vez posee elementos multimedia que
corresponden a un esquema no lineal, ya que el
usuario puede moverse por los contenidos sin que
haya una obligación de acceso por medio de una
secuencia prefijada.

Hipertextualidad La hipertextualidad está presente en cuanto el texto

se nutre y relaciona con los archivos multimedia,
tales como, imágenes, videos y audios ya la vez con
los diferentes botones interactivos exhibidos.

Tabla 4. Caso de Estudio Canvas. Universidad Siglo 21. Fuente: Elaboración propia (2022)

En síntesis, este caso muestra cómo es posible obtener un libro interactivo dentro

de un sitio web y aprovechar las herramientas que el mundo digital ofrece. Desde la paleta

cromática y la pulcritud de su utilización, hasta la correcta maquetación y disposición de

todos los elementos, en especial de aquellos que son interactivos, este caso expone un

resultado muy bien logrado de lo que sería el diseño del producto al cual nos referimos

anteriormente.
 31

Caso N° 2: Material de curso online: crea tu propio jornal

Figura 2. Caso de Estudio Crea Tu Propio Journal. Universidad Siglo 21. Fuente: Elaboración propia. (2022)

Ver anexo N°2

Caso de Material de curso online: crea tu propio jornal, realizado por quien utiliza
estudio N.º como nombre “El amante volador”.
2:

Diseño Formato y Dicho material se encuentra en formato PDF, tamaño

accesibilidad de hoja A4. Debido a que es un formato de documento
portátil, no es necesario estar conectado a la red de
internet para acceder al mismo, basta con tenerlo
descargado en la computadora, tablet o dispositivo
por el cual se vaya a leer.

Archivos Si bien presenta contenido multimedia, el mismo es

multimedia escaso. Contiene texto y fotografía, que si bien
ayudan a la compresión de los contenidos no son
suficientes.

Interactividad y En cuanto a interactividad, se pueden observar

botones hipervínculos que redirigen al usuario a sitios web
tales como YouTube, en donde se encuentran videos
explicativos de cada módulo del curso.

Estética y A nivel estético, si bien es criterioso a la hora de

recursos emplear tipografías, no presenta recursos gráficos o
gráficos una estética bien definida.

Maquetación y La maquetación es pobre teniendo en cuenta que lo

disposición de recomendable para hojas tamaño A4 es la disposición
elementos del texto y de los elementos en dos columnas, o en
caso de que se resuelva en una sola, los márgenes han
de tener mayor tamaño. Asimismo, se puede observar
 32

una cierta regularidad en la colocación de las

imágenes del lado derecho de la hoja.

Experiencia Navegabilidad Sigue un esquema de navegación lineal,

de usuario prácticamente igual al que se utiliza en una narración
tradicional. Debido a esta linealidad, no presenta
dificultades a la hora de comprender cuál es el
recorrido que debe realizarse.

Hipertextualidad Al igual que la maquetación, la hipertextualidad que

presenta es pobre, si bien existe el uso de imágenes,
hipervínculos y algunos pocos botones, no alcanza
para cubrir las demandas que los lectores de la era
digital reclaman.

Tabla 5. Caso de Estudio Crea Tu Propio Journal. Fuente: Elaboración propia (2022)

Por todo lo expuesto anteriormente, este caso está falto de investigación y diseño

de experiencia de usuario, pero no se puede negar que se presenta en un formato muy

cómodo para la mayoría de los usuarios, teniendo en cuenta que el formato PDF, es fácil

de trasportar y no requiere de conexión a internet para ser visualizado. La escasa

maquetación produce aburrimiento y no despierta interés en los lectores, así como

también “desacomoda” el contenido.

Caso N° 3: La lucha de los derechos humanos. Presentación realizada en

Genially.

Figura 3. Caso de Estudio Genially. Universidad Siglo 21. Fuente: Elaboración propia (2022).
 33

Ver anexo N°3

Caso de La lucha de los derechos humanos. Presentación realizada en

estudio N.º 3: Genially. Sin bien, este caso no es exactamente un libro digital, sino
una presentación realizada en un sitio web (Genially.com), exhibe
gran cantidad de recursos interactivos que podrían ser contemplados
a la hora de buscar la solución al problema de diseño planteado.

Diseño Formato y Esta presentación se encuentra alojada en el sitio

accesibilidad web Genially por lo cual se requiere de conexión
a internet para acceder, su formato es, como en el
primero de los casos, HTML.

Archivos Cuenta con archivos multimedia tales como

multimedia imágenes y videos, aunque escasea de audios.

Interactividad y Ocurren gran cantidad de interacciones y se

botones ubican muchos botones en este producto. Gran
parte de los botones ofrecen un recorrido dentro
de la misma presentación y a modo de destacar
una virtud, existe un botón específico que, al
cliquearlo, muestra exactamente en qué parte del
contenido se puede realizar una interacción.

Estética y En este caso la estética es clara y se observa

recursos gráficos continuidad en la misma, de la misma forma que
los recursos gráficos como imagen, tipografía y
color son claramente reconocibles y funcionales.

Maquetación y En cuanto a la maquetación, se percibe un orden

disposición de en la disposición de los contenidos, por lo cual se
elementos puede pensar que existe una retícula que los esté
ordenado.

Experiencia de Navegabilidad Por tanto, a la disposición de las páginas, sigue un

usuario esquema lineal, pero luego dentro de las mismas
y debido a la interactividad ese esquema se rompe
para volverse no lineal y darle la posibilidad al
usuario de explorar los botones libremente.

Hipertextualidad Los recursos multimediales están correctamente

utilizados, sumado a que la interactividad entre los
botones y el texto cooperan en el desafiar del
lector.

Tabla 6. Caso de Estudio Genially. Universidad Siglo 21. Fuente: Elaboración propia (2022)
 34

En última instancia, del caso de Genially, se puede rescatar una correcta

maquetación en un formato poco convencional para la realización de un libro digital y,

por otro lado, las diferentes formas de interactividad que pueden generar los diferentes

botones. También cabe mencionar, que la estética, que deviene del constructivismo, juega

un gran papel en el impacto que genera en el usuario.

Conclusión de los casos de estudio

Al comparar los tres casos, podemos encontrar semejanzas como el uso de

imágenes, hipervínculos y botones. Sin embargo, el caso 1 y 3, son los que presentan una

maquetación, reticulación, estética y mayor grado de compromiso con la interactividad y

en el usuario, en contraposición con el caso de estudio 2. Este último, también difiere en

su formato de presentación y de traslado, ya que, a diferencia de los otros dos casos, este

se presenta en formato PDF.

Los casos estudiados brindan un pantallazo de las posibilidades que

existen para obtener resultados símiles, así también invitan a reflexionar sobre en qué

situaciones sería mejor la aplicación de uno u otro, el grado de interactividad requerido

para mejorar el aprendizaje y a que publico están dirigidos.

 35

Programa de Diseño

Condicionantes Requerimientos Premisas

Libro digital e Formato de archivo Formato de archivo

interactivo
Los dos formatos de Teniendo en cuenta que el
archivo más utilizados para libro interactivo planteado
la distribución de archivos será utilizado por alumnos
digitales son PDF y Epub. de la Universidad Nacional
de Córdoba, siendo esta de
De acuerdo con Adobe
carácter pública y gratuita,
(2022) el PDF es un
se decide utilizar el
archivo de estándar abierto,
formato PDF, ya que
pueden contener vínculos y
presenta un método ágil de
botones, campos de
distribución, se puede abrir
formulario, audio, vídeo y
en todos los dispositivos
lógica empresarial.
electrónicos, no se necesita
licencia ni software
específicos para abrir el
mismo y cuenta con la
posibilidad de agregar una
gran cantidad de
interacciones al contenido.
Diseño de experiencia de Diseño de experiencia de Diseño de experiencia de
usuario usuario usuario

Ramírez-Acosta (2017) Se busca alcanzar una

plantea que las necesidades estética limpia y
de los usuarios pueden tecnología, aprovechando
también servir de base para que el usuario está
un look & feel familiarizado con los
estéticamente agradable recursos que se utilizan en
por medio de tipografía,
 36

colores y elementos páginas web y aplicaciones

gráficos, de manera que el móviles.
usuario sea guiado en cada
Los parámetros que se
tarea. Pensar en el usuario
tendrán en cuenta para
y sus necesidades, va a
diseñar la estética de este
permitir determinar las
libro son, la utilización de
acciones, funciones y
una paleta de colores
elementos necesarios
vibrantes y tipografías de
dentro del diseño.
palo seco. Asimismo, se
desarrollará un sistema de
iconos que permitan
identificar fácilmente que
tipo de contenido se
encuentra en esa y página y
también resaltar cuán
importante es.

Sin restarle importancia a

un recorrido no lineal en el
cual el usuario puede elegir
si deseas leer el texto
primero o relacionarse con
los archivos multimedia
como punto de partida de
su lectura.

Motivaciones del público Proceso de aprendizaje Proceso de aprendizaje

Afirma Rodríguez (2013) Debido a que la educación

que el proceso de requiere cada vez más la
aprendizaje es más efectivo utilización de los medios
cuando se estimulan los digitales emergentes y en
 37

sentidos, y menos útil uso, se incorporarán

cuando se intenta interacciones, no
comprender la realidad a solamente audiovisuales,
través de un texto plano. sino aquellas que
interpelen y sitúe al
estudiante como
protagonista en su propio
aprendizaje, tales como
links a formularios y
encuestas para poner a
prueba lo estudiado hasta el
momento.
Diseño editorial Retículas Retículas

Manchado-Pérez y Berges- Debido a que la retícula

Muro (2013), afirman que modular es de las más
las retículas son flexible y versátil en cuanto
especificaciones previas a a disposición, tipos y
la composición de páginas cantidad de contenidos que
y textos que condicionan se pueden ordenar, será la
las características utilizada en este proyecto.
definitivas de las páginas.
No se trata solo de una
cuadrícula que guía la
composición de elementos,
sino también se relaciona
con la funcionalidad
comunicacional del
producto final.
Maquetación Maquetación

Como expone Guerrero El formato elegido para

Reyes, (2016) “Las esta publicación será
 38

publicaciones dependen de apaisado (horizontal), con

ciertas características para una tipografía de texto
componer la diagramación entre el tamaño 20 y 25,
y maquetación. No es siendo está de palo seco
simplemente acomodar como la familia tipográfica
elementos por donde se Roboto, Barlow,
quiera, todo debe llevar una Quicksans o Merriweather
armonía que se debe sans, contemplando allí no
respetar para que sea solo el tamaño de la tipo en
entendible.” (p 42) Las párrafos, sino también en
características títulos, subtítulos,
mencionadas por Reyes epígrafes y descripciones
contemplan el formato, la del contenido. Se intentará
tipografía, el tamaño de que cada página contenga
fuente, el interlineado e un contenido del tipo
interletrado, la multimedia.
jerarquización de la
información, elementos
multimediales, entre otros.

Hipertexto y contenido Hipertexto y contenido Hipertexto y contenido

multimedia multimedia multimedia

“El hipertexto o El proyecto a realizar

hipermedio electrónico es contará de gran contenido
la construcción de sentido a multimedia, como
partir de la interacción imágenes, videos, audios y
profunda de los diversos links que permitirán no
lenguajes que lo solo una lectura no lineal
componen.” San Martín, P. del contenido, sino una
S. (2003). Como cita construcción del sentido
Andrade-Lotero, Luis
 39

Alejandro (2012) en la desde donde el usuario

Revista Internacional de considere más útil.
Investigación en
Educación, define el
término multimedia como:
“la presentación de
material verbal y pictórico”
(Mayer, 2005, p. 2)

Tabla 7. Condicionantes, requerimientos y premisas. Fuente: Elaboración propia (2022)

 40

Concepto de Diseño

El libro interactivo estará orientado a mejorar, facilitar y motivar el aprendizaje

de estudiantes de música y a actualizar el material de estudio utilizado. Se intenta

incorporar recursos digitales y eficientes para afrontar las nuevas necesidades de las

nuevas generaciones a la hora de aprender. Es por esto, que, desde las universidades y

espacios educativos, es extremadamente necesaria la reflexión y la toma de acción para

repensar la educación en este nuevo siglo.

Dentro de los recursos digitales mencionados anteriormente, se pueden nombrar

imágenes, videos, audios y sobre todo la posibilidad de testear el conocimiento adquirido

mediante formularios evaluativos que le sirvan al alumno como parámetro para medir su

aprendizaje.

Tratándose de una generación de, en su mayoría, nativos digitales, se apela a la

estética tecnología, utilizada en sitios web y aplicaciones móviles, con la cual se plantea

una analogía a lo que este público está familiarizado. El objetivo es empatizar con el

público mediate recursos gráficos que ya hayan visto y utilizado con anterioridad.

Se entiende que el contenido de este libro, en cierto punto, tiene un amplio grado

de abstracción, ya que requiere un aprendizaje mayoritariamente auditivo, como resultado

el material deberá ser extremadamente explicativo y claro, por lo cual la meta es clarificar

la información mediante la integración de contenido multimedia e interactivo.

 41

Cronograma de trabajo

Figura 4. Cronograma de trabajo. Elaboración propia. (2022)

 42

Generación de la propuesta de Diseño, Desarrollo de la propuesta

final, Definición Técnica

Figura 5. Moodboard. Elaboración propia. (2022)

 43

Búsqueda tipográfica

Se realizó una búsqueda exhaustiva de tipografías que pudieran, por un lado,

acompañar a la iconografía y referir al dinamismo, y por otro, facilitar la lectura del

material de estudio.

Las prioridades en torno a su elección estuvieron enfocadas principalmente en que

posea una alta legibilidad en pantalla y que no fatigue al ojo, además de que presenten

una familia tipográfica amplia. Para ello se relevaron combinaciones de tipografías, tanto

de cuerpo de texto como de titulares, para garantizar su complementación a la hora de

utilizarlas y para que se pudiera cumplir con el cometido mencionado al comienzo de este

párrafo.

Figura 6.Exporación de tipografías. Elaboración propia. (2022)

Bocetos exploratorios

A partir del moodboard expuesto, se comienza la búsqueda de bocetos que

vinculen el mundo gráfico con la educación. Se elige adoptar una estética web que apele
 44

a elementos que el usuario conoce previamente y trazos que otorguen dinamismo. A partir

de estas premisas, del análisis de sus características y de su conjunción, se realizarán una

serie de bocetos exploratorios que darán pie a la estética y elementos gráficos que

acompañarán el diseño del libro.

En primer lugar, se exploran las diferentes posibilidades de botones e iconos con

los cuales el usuario podrá identificar los diversos elementos que componen el libro, así

también una botonera que le permitirá navegar dentro del documento.

Luego del boceto inicial se digitalizaron aquellos iconos que poseen mayor

potencial de ser utilizados.

Figura 7. Bocetos exploratorios 1. Elaboración propia. (2022)

 45

Figura 8. Bocetos exploratorios 2. Elaboración propia. (2022)

 46

Figura 9. Bocetos exploratorios 3. Elaboración propia. (2022)

Figura 10. Bocetos exploratorios 4. Elaboración propia. (2022)

 47

Figura 11. Exploración iconográfica. Elaboración propia. (2022)

Búsqueda cromática

En cuanto a la paleta cromática, se decidió experimentar con colores vibrantes,

que permiten atraer la atención del usuario y resaltar elementos importantes en las

diferentes páginas y a su vez probar cómo se relacionan y funcionan paletas de mayor o

menor amplitud.

Figura 12. Exploración cromática. Elaboración propia. (2022)

 48

Arquitectura de la información

Concluida la primera búsqueda gráfica relacionada con la estética del libro

interactivo digital, se prosiguió con la esquematización del mapa de la arquitectura de la

información de su sitio web. La construcción del mismo se basará en la combinación de

estructuras de tipo jerárquicas e hipertextuales. Al poseer una botonera en la mayoría de

las páginas, le permitirá al usuario navegar libremente y en el orden que desee por los

contenidos expuestos. Esta jerarquía permitirá generar una experiencia de usuario

intuitiva cuando este tenga que recorrer el libro, con el fin de evitar que se pierda o no

encuentre la información pertinente.

Se pretende encarar de manera simple, para que el proceso de estudio y

aprendizaje sea provechoso y ágil para el estudiante.

 49

Figura 13. Mapa de sitio. Elaboración propia. (2022)

 50

Primeros bocetos del libro digital e interactivo

Una vez finalizada la esquematización de la información, se continuó con el

boceto de las primeras ideas gráficas del libro digital e interactivo. Dado a que el libro

fue pensado para utilizarse por sobre todo en pantalla de computadora, los bocetos y

diagramaciones corresponderá al formato 16:9, siendo 1920 el ancho de píxeles y 1080

píxeles de alto. Por medio de una serie de bocetos manuales se establecen las primeras

ideas de maquetación del documento, así luego se desarrollarán retículas para diagramar

los contenidos, tanto textuales como multimediales.

Figura 14. Bocetado de maquetación 1. Elaboración propia. (2022)

 51

Figura 15. Bocetado de maquetación 2. Elaboración propia. (2022)

 52

Figura 16. Bocetado de maquetación 3. Elaboración propia. (2022)

Figura 17. Bocetado de maquetación 4. Elaboración propia. (2022)

 53

Figura 19. Exploración de retículas. Elaboración propia. (2022)

Figura 18. Bocetado de maquetación 5. Elaboración propia. (2022)

 54

Propuesta final de diseño: definición técnica (memoria descriptiva)

Definición técnica

En los apartados a continuación, se describe de manera técnica la construcción y

aplicación del sistema de retículas y sistema iconográfico. De la misma manera se muestra

la correcta utilización de las familias tipográficas mediante la creación de estilos

correspondientes a las necesidades del libro digital e interactivo.

Sistema de retículas

Como afirman Manchado-Pérez y Berges-Muro (2013), “No se trata solo de una

cuadrícula que guía la composición de elementos, sino también se relaciona con la

funcionalidad comunicacional del producto final” ; Por lo cual se crearon márgenes

laterales, superiores e inferiores de 35 píxeles cada uno y una primera retícula de 6

columnas para dividir el formato de una macroforma y por encima de esta, se creó una

retícula modular de 24 columnas x 24 filas con un medianil de 10 píxeles y una retícula

tipográfica de 22 puntos.

Se debe señalar que el sistema de retículas ha sido confeccionado sobre el formato

16:9 (horizontal) y que corresponde a la medida de 1920x1080 píxeles, dado a que es el

formato predeterminado de desktop.

Siguiendo la línea que se planteó en la sección anterior, este libro digital e

interactivo, busca acercarse a una estética web, por lo cual los textos serán distribuidos

en la parte central de la página, en una sola columna de texto.

 55

Figura 20. Definición de retícula. Elaboración propia. (2022)

Paleta cromática

Luego del análisis de las paletas de colores presentadas en la sección anterior, se

optó por la paleta más extensa. Dicha paleta cuenta no solo con colores vibrantes como

se planteó en un principio, sino que admite colores neutros como el gris en sus varias

tonalidades y el negro. Si bien los iconos de cada sección utilizan más de un color, esta

paleta permite utilizar un color por capítulo teórico del libro, lo cual contribuye y apela a

la memoria visual del estudiante a la hora de recordar la ubicación de los diferentes temas

abordados.
 56

Figura 21. Definición cromática. Elaboración propia. (2022)

Sistema iconográfico

Debido a que el libro digital e interactivo posee varios capítulos y secciones, se

decidió diseñar botones que contengan los iconos que representan a cada una de ellas.

Dicha iconografía dispone de trazos gruesos y puntas redondeadas, gracias a sus esquinas

curvas y la gestualidad de trazos es posible decir que cuenta con rasgos actuales y

tecnológicos, que a la vez son dinámicos.

 57

En consecuencia, serán expuestos en sus respectivas grillas constructivas y con el

nombre al capítulo o sección al cual pertenecen.

Figura 22. Íconos, retícula y grilla constructiva. Elaboración propia. (2022)

Figura 23. Íconos, grilla constructiva. Elaboración propia. (2022)

 58

Figura 24. Íconos. Elaboración propia. (2022)

Estilos tipográficos / Estilos de texto

Se escogieron dos familias tipográficas para la realización de este proyecto, ambas

con el objetivo de optimizar y priorizar la legibilidad. En primer lugar, Quicksand, que

será utilizada para títulos, índices y botones. Se aplicará en su versión bold y se considera

que debido a sus trazos gruesos y curvos se vincula muy bien con la iconografía planteada

y contrasta con la tipografía que se utilizará en el texto. Al mismo tiempo, la claridad de

sus caracteres y la consistencia de su diseño mejoran la legibilidad, lo que es esencial para

la comodidad de lectura en dispositivos electrónicos. Por otro lado, tiene un diseño

amigable y contemporáneo que puede ser atractivo para lectores de diferentes edades.

La familia tipográfica que dará vida al estilo de texto será Merriweather Sans, una

fuente diseñada específicamente para pantallas digitales, lo que significa que su

legibilidad es óptima en diferentes tamaños y resoluciones de pantalla, lo cual es crucial

para la comodidad de lectura en dispositivos electrónicos. Del mismo modo, su diseño

limpio y moderno hace que sea agradable a la vista durante largos períodos de lectura,

evitando la fatiga ocular. Así mismo, ofrece diferentes pesos y estilos (regular, bold, light,
 59

etc.), lo que permite jugar con la jerarquía visual en el libro, destacando títulos, subtítulos

y cuerpos de texto de manera clara y consistente. Se crearon estilos de textos para ser

utilizados en cuanto sea necesario.

Con lo que respecta a la alineación de los textos, se definió la utilización de

bandera derecha, en otras palabras, que el texto esté alineado a la izquierda para que el

mismo no sea percibido con un bloque macizo de texto y agobie al lector. Dicha

alineación crea un borde recto en el lado izquierdo del texto, lo que facilita la transición

visual de una línea a la siguiente. Esto ayuda a los lectores a seguir el flujo del texto de

manera más natural y cómoda. Por otro lado, es la forma tradicional de presentar texto en

muchos idiomas occidentales, lo que hace que sea más familiar para la mayoría de los

lectores. Esto contribuye a una mejor legibilidad, ya que las personas están acostumbradas

a este estilo de lectura. Por último, este tipo de alineación facilita la distribución del

espacio en blanco entre palabras y líneas, lo que contribuye a una apariencia más ordenada

y organizada del texto en la página digital.

Figura 25. Definición tipográfica. Elaboración propia. (2022)

 60

Figura 26. Definición tipográfica 2. Elaboración propia. (2022)

Botones e interactividad

Uno de los componentes más importantes de este proyecto es la interactividad, la

cual estará dada por una botonera y archivos multimedia, que permitirán mayor

comprensión de los contenidos expuestos en el libro digital e interactivo, así también

permitirán la navegación del documento.

Los botones que contengan archivos de audio están representados por el ícono de

reproducción seguido del nombre de la obra o el concepto a ejemplificar, contenido en un

rectángulo gris de bordes redondeados.

Aquellos botones que redirigen a ejemplos sean estáticos (fotográficos) o

videográficos, también serán contenidos en un rectángulo gris de bordes redondeados.

 61

Cabe aclarar que, de no ser necesario un botón que redirige a las fotografías o videos, los

mismos se encontrarán ocupando gran parte de la “página”.

Figura 27. Botones. Elaboración propia. (2022)

 62

Figura 28. Botonera. Elaboración propia. (2022)

Maqueta/Prototipo

Se da comienzo a la maquetación y prototipado del libro digital e interactivo. A

continuación, se exponen layouts que denotan la maquetación y el uso de los elementos

gráficos planteados en la etapa anterior. Al tratarse de un prototipo, para su correcto

funcionamiento y distribución, se requerirá de un programador que convierta el prototipo

en un archivo PDF interactivo, por lo cual, a continuación, se expondrá el enlace por el

cual visualizar dicho prototipo.

 63

Enlace al prototipo interactivo: https://xd.adobe.com/view/c387afa5-8bd3-4805-

ab4b-30f6a976ee22-96d4/?fullscreen&hints=off

Figura 29. Layout 1. Elaboración propia. (2022)

Figura 30. Layout 2. Elaboración propia. (2022)

 64

Figura 31. Layout 3. Elaboración propia. (2022)

Figura 32. Layout 4. Elaboración propia. (2022)

 65

Figura 34. Layout 5. Elaboración propia. (2022)

Figura 33. Layout 6 . Elaboración propia. (2022)

 66

Figura 35. Layout 6 . Elaboración propia. (2022

Análisis de costos

A continuación, se detallan los costos de producción del proyecto en cuestión,

teniendo en cuenta la cantidad de horas que se deberían invertir en el mismo. Se exponen

los costos que el diseñador presenta en su vida cotidiana para asignarle un valor a las

horas de trabajo y luego se calculan las horas necesarias para realizar el producto final.

Análisis de costos

Costos fijos Costos variables

Sueldo $80.000

Servicios $20.000

Alquiler $40.000

Expensas $5.000
 67

Municipalidad $4.000

Rentas $3.500

Seguros $3.000 Actualiz. Tecnología $15.000

Celular $3.000 Imprevistos $7.000

Obra social $8.000 Software $3.500

Subtotal $136.500 Subtotal $25.500

Total: $ 192.000

Horas Laborales Mensuales 200

Precio por Hora $960

Tabla 8 Análisis de costos. Elaboración propia. (2022)

Costos de producción

Etapas Horas estimadas Precio

Definición del problema 20 horas $19.200

Recopilación de datos 20 horas $19.200

Análisis de la información 20 horas $19.200

Elección de medios 2 horas $1.20

tecnológicos

Desarrollo de alternativa 30 horas $28.800

Elaboración 40 horas $38.400

Modificaciones eventuales 10 horas $9.600

Validación 5 horas $4.800

Total del proyecto 147 horas $141.120

Tabla 9. Costos de producción. Elaboración propia. (2022)

 68

Conclusiones

Como se ha mencionado a lo largo de este trabajo, la tecnología evoluciona

constantemente y las intuiciones educativas se ven obligadas a adaptarse a las mismas,

los estudiantes e interesados en el aprendizaje demandan actualizaciones y materiales de

estudio cada vez más didácticos y modernos.

Es por eso que a la hora de comenzar el desarrollo de este proyecto se propuso

analizar las necesidades y motivaciones de dicho público para poder establecer

parámetros que determinen como debería ser el nuevo material de estudio. Dichas

necesidades consisten en tener acceso a materiales súmante explicativos debido a la

complejidad de los contenidos a estudiar, por lo cual se propuso la incorporación de

material audiovisual que permita ejemplificar los conceptos.

Por consiguiente, fue necesario recaudar, ordenar y clasificar el material

audiovisual que se utilizó para el diseño de este libro. Fue necesario conectarse con el

autor, para que él proveyera y añadiera ejemplos acordes al tipo de contenido que todavía

no estaban presentes.

Se empezó a bocetar y ordenar los contenidos en un diagrama, se realizaron

pruebas de retículas, tipografías y paletas de colores, también se diseñaron diversos

iconos que permitieron tener mayor entendimiento y ubicar más rápido la información

que se está buscando.

Como resultado, se confeccionó un libro interactivo digital, que le permiten al

usuario mejorar su proceso de aprendizaje utilizando medios digitales.

 69

Se considera que este libro es un gran aporte, no solo para los estudiantes que

tendrán acceso al mismo, sino también para la Universidad Nacional de Córdoba, ya que

la incorporación de este tipo de material en una cátedra particular sirve como incentivo

para replantearse los medios tradicionales y tecnológicos que se utilizan para educar en

todas las áreas de la institución. Es de suma importancia que las Universidades comiencen

e intensifiquen la investigación en nuevas tecnologías y los aportes que estas pueden tener

en la educación.
 70

ANEXOS
 71

Anexo N° 1:

Título: Encuesta realizada a estudiantes universitarios de carreras musicales.

72
73
 74

Anexo N° 2:

Título: Caso N° 1: Canvas

Imágenes de referencia:
75
76
 77

Anexo N° 3:

Título: Caso N° 2: Material de curso online: crea tu propio jornal

Imágenes de referencia:
 78

Anexo N° 4:

Título: Caso N° 3: La lucha de los derechos humanos. Presentación realizada en

Genially

Imágenes de referencia:
79
80
 81

Anexo N° 5:

Título: Enlace a Google Drive en donde se aloja el material con el cual se debía realizar

el libro interactivo: https://drive.google.com/drive/u/0/folders/1asg3kdxCQ94CCM6ib-

HG9uhxH87ojBfH
 82

Anexo N° 6:

Título: Enlace en el cual se aloja el prototipo de libro interactivo:

https://xd.adobe.com/view/c387afa5-8bd3-4805-ab4b-30f6a976ee22-

96d4/?fullscreen&hints=off
 83

Referencias

Adobe, 2022, ¿Que es el PDF?, recuperado de https://adobe.ly/3BtWhno

Andrade-Lotero, Luis Alejandro (2012). Teoría de la carga cognitiva, diseño

multimedia y aprendizaje: un estado del arte. Magis. Revista Internacional de

Investigación en Educación, 5(10),75-92.Disponible en:

https://www.redalyc.org/articulo.oa?id=281024896005

Calichs, E. L. (2006). El proceso de formación de las competencias creativas.

Una necesidad para hacer más eficiente el aprendizaje de los estudiantes universitarios.

Revista Iberoamericana de Educación, 40(3), 6.

Cordón García, J. A. (2018). Libros electrónicos y lectura digital: los escenarios

del cambio. Palabra clave, 7(2), 1-2.

Escolar, H. (1986). Historia del libro. Áreas. Revista Internacional de Ciencias

Sociales, (6), 123-125.

Favio Shifres y Pilar Holguín Tovar (2015). El Desarrollo de las Habilidades

Auditivas de los Músicos. Teoría e Investigación. La Plata: GITeV - Grupo de

Investigaciones en Técnica Vocal.

Guerrero Reyes, L. (2016). El Diseño Editorial. Guía para la realización de libros

y revistas.

Haslam, A. (2007). Creación, diseño y producción de libros. Editorial Blume,

1°Edición, Barcelona España.

Huerta, E. (2014). Introducción al diseño de Experiencia de Usuario. Recuperado

de:https://suriweb.com.ar/wp/dds/wpcontent/uploads/sites/4/2019/03/Introducci%C3B3

n-al-Dise%C3%B1o-de-Experiencia-de-Usuario-Eduardo-Huerta.pdf
 84

Manchado-Pérez, E., & Berges-Muro, L. (2013). Sistemas de retículas: Un

método para diseñar nuevos conceptos de producto hacia el usuario. Dyna, 80(181), 16-

24. Recuperado de: http://www.scielo.org.co/scielo.php?script=sci_arttext&pid=S0012-

73532013000500002

Martínez, I. C., & Valles, M. L. (2016). Audición musical en acción y

pensamiento. Series: Libros de Cátedra.

Munari, B., Nelson, G., & Papanek, V. (2008) Metodología de diseño.

Ramírez-Acosta, K. (2017). Interfaz y experiencia de usuario: parámetros

importantes para un diseño efectivo. Revista Tecnología en Marcha, 30, 49-54.

Ramírez Vega, A., & Abarca Fedullo, F. (2017). Publicación científica de revistas

electrónicas en formato EPUB. In VII Conferencia Internacional sobre Bibliotecas y

Repositorios Digitales de América Latina (BIREDIAL-ISTEC’17) y XII Simposio

Internacional de Biblioteca Digitales (SIBD’17)(La Plata, 2017).

Real Academia Española. (s.f.) Real Academia Española: Diccionario de la

lengua española, 23.ª ed., [versión 23.5 en línea]. Recuperado el día 11/09/2022 de:

https://bit.ly/3B5hJO1

Real Academia Española. (s.f.) Real Academia Española: Diccionario de la

lengua española, 23.ª ed., [versión 23.5 en línea]. Recuperado el día 11/09/2022 de:

https://dle.rae.es/hipertexto

Rodríguez, A. M., Marín, C., & Molina, R. A. M. (2013). El papel de la

interactividad en el desarrollo de los procesos cognitivos. Revista Educación y

Desarrollo Social, 7(2), 98-107.

Rusinek, G. (2004). Aprendizaje musical significativo. Revista electrónica

complutense de investigación en educación musical, 1, 1.

 85

San Martín, P. S. (2003). Hipertexto: Seis propuestas para este milenio. La Crujía.

Sanz, J. (2017). Percepciones y valoraciones de la utilización de los libros

digitales en Educación Superior. Campus Virtuales, 6(1), 39-50.

Shifres, F. y Holguín Tovar, P., (2015). El desarrollo de las habilidades auditivas

de los músicos.

Silvana Moroni (2008) -Modulo Taller de Diseño y Creación Instituto AIEP –

UNAB Primer Semestre 2008