T12: Proyecto final Autoedición TDED - Kathia Cofré

De Casiopea



TítuloTarea 12: Primera propuesta -Proyecto final - Kathia Cofré
AsignaturaTaller Diseño de Ediciones Digitales
Del CursoTaller Diseño de Ediciones Digitales 2022
CarrerasDiseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Diseño Industrial"Diseño Industrial" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
12
Alumno(s)Kathia Cofre

Proyecto Final

Se realiza una edición digital con los contenidos desarrollados en la wiki personal, los cuales abarcan los temas expuestos durante las clases del taller. Esta edición contempla como público objetivo los estudiantes de este taller, los cuales requieren una edición con los contenidos más detallados, en donde incluirán ejemplos interactivos para ejemplificar la realización de una edición digital, entre otros aspectos. Finalmente esta edición debe pertenecer a una editorial, la cual representara visión de la propuesta de la edición


Primera propuesta

Primera propuesta|10.11.22

Primeramente se realiza la recopilación de información para los contenidos de la edición, en donde se indaga sobre los temas faltantes no recopilados en la wiki personal. Luego se establece la tabla de contenidos o índice, la cual contendrá la edición a ejecutar, en esta se contemplan tres temas principales: publicaciones digitales, ediciones digitales y programas. Finalmente se comienza con las primeras páginas tipo, aquellas determinaran la composición y las interacciones implementadas a lo largo de toda la edición digital.

Tabla de contenidos

  • Publicaciones digitales
    • Historia del libro
    • Soporte y plataformas
    • Contenido editorial
    • Proceso editorial
    • Derechos editoriales
  • Edición digital
    • Contenido edición
    • Tipos de publicación
    • Soporte y dispositivos
    • Software y formatos
    • Flujo editorial
  • Programas
    • Word
      • Índice
      • Anclaje de imágenes
      • Word a indesign
    • PDF interactivo
      • Pop up
      • Galerías

Propuesta editorial

  • Para el desarrollo de este proyecto se utilizó el tamaño IPhone 8/7/6 (750 x 1334) con una disposición apasaida, para una mejor lecturabilidad al momento de contrastar dos elementos y para la utilización de pop-up.
  • Las familias tipográficas utilizadas son la Ubuntu para los títulos y subtítulos, en Medium y Bold y la Lato en Regular. Ambas obtenidas de google fonts.


Tipografía

Primera propuesta edición editorial - Kathia Cofré 2.png


Paleta de colores

Primera propuesta de paleta de colores.

PDF y video

ePUB




Avances y cambios

Segunda propuesta|14.11.22

Se realiza las pertinentes correcciones mencionadas en la clase anterior sobre el índice para seguir ajustando los títulos para una mayor exactitud y la continuidad entre los contenidos de las páginas. Además se ejecutaron los cambios en cuanto a distribución de los número indicativos de los temas, el cambio del color amarillo para el tema 3 y la continuación de los siguientes capítulos en base a las 4 plantillas presentadas para la composición total de la edición. Por último se realiza el diseño del imagotipo de la editorial.


Propuesta tabla de contenidos

  • Ediciones análogas y digitales
    • Evolución del libro
    • Soporte y plataformas
    • Comparativa
      • Elementos de la edición
      • Flujo editorial
    • Derechos editoriales
  • Edición digital
    • Contenido edición
    • Tipos de publicación
    • Soporte y dispositivos
    • Software y formatos
  • Tutoriales
    • Word
      • Plantilla (Espacio anterior, estilo de párrafo, control de cambios)
      • ePub Chekers
    • InDesign
      • Sincronización estilos de párrafo
      • Tabla de contenidos
      • Anclaje de imágenes
      • Documento Libro
    • PDF interactivo InDesign
      • Pop up
      • Galerías


Confección Editorial

Proyecto final TDED- Kathia Cofré 12-04.png

Forma es una editorial digital chilena que surgió en 2022 con las publicaciones de libros informativos y educacionales, los cuales tienen como principal objetivo orientar y guiar el auto aprendizaje de cada lector de manera lúdica y sencilla. Su línea gráfica busca hacer de cada título una pieza única, pero que visualmente se complemente con otras ediciones para la realización de una colección de la editoral, a través del uso de formas geométricas para cada libro, vinculando a todos los libros confeccionados por la editorial Forma.


Corrección paleta de colores

Los colores RGB implementados en el tema 2 y 3 se cambiaron para una mayor adaptación del usuario en la lecturabilidad. El capítulo 2 se implemento una paleta de colores azules modificando el color verde secundario y en el capítulo 3 se cambio el color base por naranja y color secundario el amarillo.


Segunda propuesta de paleta de colores.



Páginas tipo

Página tipo Nº1: utilización de imágenes y textos - Interatividad: galería
Página tipo Nº2: utilización de textos cortos ocultos - Interatividad: galería
Página tipo Nº3: utilización de contenido comparativo o con elementos con mucha información - Interatividad: pop-up
Página tipo Nº4: utilización de contenido informativo extenso - Interatividad: pop-up

PDF

Carpeta ePUB




Editorial y avances en la edición

Tercera propuesta|17.11.22

Se comienza con la realización de tutoriales informativos para poder guiar al lector de manera practica lo aprendido, para esto se propone una nueva plantilla para proyectar las páginas con mayor información y para los vídeos tutoriales, debido a que el usuario necesita una mayor detención en estas páginas.Estas plantillas tienen relación con la temática tratado a lo largo de la edición, en la cual se diseña un ventana de la plataforma Youtube y Adobe Digital Editions para poder de manera mucho más dinámica e interactiva, entender el contenido expuesto.

Video tutorial

PDF

Carpeta ePUB


De lo análogo a lo digital Ediciones Editoriales


Editorial

Tipografía Ubuntu diseñada por Dalton Maag

Forma es una editorial digital chilena que surgió en 2022 con las publicaciones de libros interactivos y educacionales, los cuales tienen como principal objetivo orientar y guiar el autoaprendizaje de cada lector de manera lúdica, acentuada y sencilla. Su línea gráfica busca hacer de cada título una pieza única, pero que visualmente se complemente con otras ediciones de la editorial, a través del uso de formas geométricas, para general un colección de libros digitales interactivos educativos. La palabra "forma" hace referencia a las propiedades, orden, unidad, identidad e información sobre los objetos y el conocimiento aprendido como base fundamental del desarrollo humano.

Edición

Portada de la edición digital "De lo análogo a lo digital"



La edición digital interactiva "De lo análogo a lo digital" publicada por la Editorial Forma, tiene como principal objetivo profundizar y guiar los contenidos académicos para la producción de distintas ediciones digitales. Posee tres capítulos los cuales abarcan desde la evolución del libro y los derechos de autor hasta las instrucciones básicas para una correcta creación de un PDF Interactivo o EPUB para su salida en distintos dispositivos. Se expone una lectura detallada y segmentada para abarcar de distintas maneras todos los contenidos expuestos.



Contenido autoeditado

Se autoedito el contenido aprendido durante las clases expuesto en la wiki, para la realización de una edición digital interactiva con un aprendizaje a profundidad y con un publico objetivo de lo mismo estudiantes del Taller Diseño de Ediciones Digitales 2022.


Tabla de contenido

Se desarrollo un aprendizaje desde lo general a lo particular, debido a que se planteo confeccionar una tabla de contenido con tres temas a profundizar. El primero con un enfoque comparativo entre las ediciones análogas y digitales, el segundo una profundización de los componentes de una edición digital y el tercero un instructivo básico de la realización de interacciones, plantillas, entre otros.

Se expone la tabla de contenidos empleada y una tabla de contenido con las interacciones utilizadas para el desarrollo de la edición.

Propuesta gráfica

Diagramación

Proyecto final TDED- Kathia Cofré Indice-044-077-07.png


La línea gráfica predominante en toda la edición se destaca por la utilización de la figura geometría hexagonal, por lo cual las diagramaciones de las páginas maestras son en base a la implementación de este elemento dispuesto en la lámina, además de ser planteadas desde las interacciones a presentar para el usuario. De esta manera encontramos cuatro diagramaciones distintas:

  • Ocho cuadrantes: esta diagramación se emplea en las páginas de comparar información y las portadas de los capítulos. Su mayor enfoque es posicionar los hexágonos entre la mitad de los cuadrantes entre distancias oinformación centrada.

Tres tercios: esta diagramación se emplea en las páginas con explicación de dos conceptos o distribución de hexágonos más dispersos, para que así estén contenido dentro de los tercios. El margen empleado para ambas diagramaciones es de 36 px.





Diseño de salida

Página tipo Nº1: utilización de imágenes y textos - Interatividad: galería
Página tipo Nº2: utilización de textos cortos ocultos - Interatividad: galería
Página tipo Nº3: utilización de contenido comparativo o con elementos con mucha información - Interatividad: pop-up
Página tipo Nº4: utilización de contenido informativo extenso - Interatividad: pop-up



Interacciones empleadas

Se ejecuta dos interacciones para proporcionar dinamismo a la edición, de manera que encontramos la galería, para poder desplazar imágenes, elementos y/o texto y el pop up de dos formas, la primera para textos cortos ocultos y la segunda para la utilización de información comparativa.

Se proporciona un botón de regreso a la página de indice, para facilitar la navegación en la edición. Este se conforma por la misma figura representativa de la edición, encontrada en la portada. Los botones incorporados varían el color según el capítulo en donde se encuentre, a manera excepcional el botón de home no cambia en ninguna página.

De lo analogo a lo digital- Formatos de Salida 1- Kathia Cofre 1.gif


De lo analogo a lo digital- Formatos de Salida 1- Kathia Cofre 3.gif


De lo analogo a lo digital- Formatos de Salida 1- Kathia Cofre 2.gif

Botones

Proyecto final TDED- Kathia Cofré Indice-11 Mesa de trabajo 1-09.png

Paleta de colores

La paleta de colores ejecutado logra plasmar colores pasteles en contraste con colores intensos dentro de una misma gama. Para los textos no se implementa el negro puro, debido a que no se recomienda su uso para la lectura en pantalla, por lo cual se utiliza en un 80 % del matiz. La paleta está dividida en 3 colores base que tienen un alto nivel de contraste con el color más oscuro y con los colores más saturados de la gama. Se ejecuto un análisis de contraste realizada en la página https://webaim.org de la universidad estatal de Utah basados en las pautas de accesibilidad web WCAG, para valorar si la paleta de colores implementada es optima para su legibilidad.


Paleta de colores implementada.


Análisis de contraste realizado en la página web Webaim.

Tipografía

Las familias tipográficas utilizadas son la Ubuntu para los títulos y subtítulos, en Medium y Bold en tamaño 58 pt para titulares y 40-25 pt para subtítulos, y Lato en estilo Regular en tamaño 20 y 18 pt para el cuerpo de texto. Ambas tipografías fueron obtenidas de google fonts.

Títulos y Subtítulos

Se emplea la tipografía Ubuntu Medium, la cual pertenece a una familia tipográfica OpenType, diseñada con un estilo sans-serif humanístico. Principalmente dentro de la edición se utiliza en los título y subtítulos de cada página, para generar un dinamismo diferente, como en la interfaz del sistema operativo Ubuntu.

Cuerpo de texto

Se utiliza la tipografía Lato Regular, la cual es una tipografía sans-serif humanista que es implementada en más de 9,6 millones de sitios web. Principalmente se utiliza en párrafos de texto de contenido, en donde existe una mayor cantidad de texto.


Implementación de las tipografías con los contrastes de la paleta de colores.
Referencia tipográfica extraída de el sitio web wikipedia.

Parámetros del diseño

  • Las palabras dentro de los textos de contenido de la edición, no se separaran en un salto de línea dentro de un párrafo. Solamente en la propuesta de visualización de pantalla que propone voltear el hexágono para mostrar la información, será con alineado a la izquierda con justificación y separación de palabras.
  • La propuesta de visualización de pantalla que propone subdivisiones del contenido presentada en pop up se dictamino que cada burbuja de dialogo sería de dos a tres líneas de diez a quince palabras como máximo. En el caso de que necesite más precisión sobre el tema se explayara en otra página.

Visualización

PDF Interactivo

Se presenta la demostración y registro del contenido total de la edición, a través del PDF Interactivo. Sin embargo, se recomienda no visualizar e interactuar el formato Interactivo para PDF, ya que puede contener fallas en su uso.

Carpeta empaquetado e EPUB

Este proyecto está planificado en formato de salida de EPUB y PDF Interactivo de InDesign,por lo cual para poder visualizar el contenido se recomienda descargar Adobe Digital Editions, la aplicación Lithium o en su defecto otro lector de EPUB para el dispositivo empleado. Se recomienda no visibilizar el formato Interactivo para PDF, ya que puede contener fallas en su uso.


Clic Carpeta empaquetado e EPUB

Video comparativo entre Adobe Digital Editions y Lithium

Se puede visualizar que el lector de EPUB Adobe Digital Editions para PC, es más dificultoso el uso para el lector, debido a que al momento de interactuar con los botones y posteriormente seguir con la siguiente página, esta se devuelve a la página de índice,causando una lectura más lenta. Sin embargo, la mesa de trabajo interactivo para PDF de InDesign otorga más variedad de personalización en los botones al momento de posicionarse sobre este.

En cuanto a la aplicación para dispositivos móviles Lithium, otorga una mayor interacción y facilidad de navegación al usuario,pudiendo cambiar de página a través del scroll del propio celular o por medio del botón Home, pero este lector de EPUB posee un fallo al momento de la hacer clic en algún lado de la página, debido a que se realiza un zoom al elemento presionado, ocasionando que el lector se salga de la lectura.

Fuentes