T8: Manual Interactivo Grupo 2

De Casiopea


TítuloManual Interactivo Grupo 2
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.
8
Alumno(s)Javiera Veliz, Anaís Johnson, Valentina Cofré, Alejandra Witto Royo
PDFFile:Contenido-PropuestaGrupal-VAAJ.pdf
URLhttps://youtu.be/KR6g-NObSLQ

Introducción

La siguiente página muestra los avances respectivos al desarrollo de la propuesta grupal de un pdf interactivo pensado para el estudiante de primer año de diseño. Para esto se realizó una re-edición del capítulo ("Los grafismos") del libro de Manual de Edición y Autoedición escrito por José Martínez de Sousa. A continuación se encuentran diversas decisiones editoriales realizadas y consideradas por el grupo editorial de trabajo, desde la parte gráfica hasta los contenidos decididos a tratar en esta edición, junto con las primeras propuestas tentativas.

Recopilación de propuestas individuales

Comprendiendo que este trabajo nace desde una producción editorial personal, se expusieron los trabajos a raíz de rescatar los fuertes de cada uno de la mejor manera. Se determino que para el tipo de propuesta editorial que buscábamos proponer, era una edición con información de carácter fácil de comprender y con una mayor predominancia visual para comunicar ejemplos y lecciones. A partir de esta decisión decidimos que el formato vertical, debido a que la cantidad de contenido de lectura seria el mínimo para comprender los conceptos de manera básica. Se tomo la paleta de colores propuesta por el trabajo de Valentina, y se ajusto de acuerdo a una decisión grupal, por otra parte las mayorías de las decisiones gráficas fueron tomadas una vez producido el contenido trabajado de manera colectiva. Se tomaron en general las consideraciones y aprendizajes de cada individuo en el proceso creativo individual, pero por lo general la mayoría de la imagen gráfica fue iniciada tras el comienzo del proceso grupal.

Propuesta 1: Valentina Cofré

Esta propuesta visual se basa en portada y proyección de índice tentativo, en la cual se trabaja una paleta de colores, colocando el azul de fondo para generar un gran contraste con la información.

Propuesta portada.png Contenidos Indice.png


Propuesta 2: Anaís Johnson

La edición fue proyectada pensando en una gran cantidad de contenido tomando la información del libro de Sousa. En base a esa característica se propuso un formato horizontal, con una interacción de pop up los cuales generarían distingos en el color para atraer la atención. Se propuso una paleta de colores en un verde calmo, a base de que no se saturara en pantalla.

 Manual de Edición y Autoedición1.jpg Manual de Edición y Autoedición2.jpg Manual de Edición y Autoedición3.jpg

(Deslice la barra de navegación para ver más contenido)


Propuesta 3: Javiera Véliz

La edición será visualizada en un móvil, por lo que esta propuesta presenta un formato vertical para generar la edición, en sentido de las medidas de un dispositivo iphone, modelo 8, el cuál es uno de los ejemplos más estándar.

La paleta de colores se elige por una mayor cantidad de juegos de contraste entre estos colores al momento de presentar la información. También son escogidos debido a lo que transmiten, que en su totalidad sería; seguridad, calma confianza, intelecto, comunicación, felicidad y optimismo. Esta transmisión de emociones es clave ya que al ser una edición educativa y para principiantes, lo ideal es que ellos se sientan cómodos, entretenidos y dispuestos a conocer y aprender, aludiendo a una edición lúdica y dinámica al momento de enfrentarse a esta.

La propuesta de navegación es que sea dinámica, que tenga redirecciones y pueda generar hipervínculos al momento de la lectura.

Propuesta2-talleredicionesdigitales-javieraveliz-segundosemestre-22-03.png Propuesta2-talleredicionesdigitales-javieraveliz-segundosemestre-22-02.png


Propuesta 4: Alejandra Witto

En esta propuesta se muestra un formato apaisado, de las medidas promedio de un Iphone 8. Incluye un fondo de color oscuro y cuerpo de texto blanco, acompañados de titulos en amarillo. Junto al cuerpo de texto se agregan líneas naranjas que acompañan y guían la vista del cuerpo de texto correspondiente.

La propuesta apaisada fue descartada debido a que el uso de un celular en lo cotidiano siempre recae en un uso vertical. Se toma en consideración la paleta de colores.

Edición prototipo 2.png Edición prototipo 22.png

Primeras propuestas grupales

Lectura

En nuestra publicación digital, queremos aprovechar la navegación en zig-zag para poder navegar mejor entre los contenidos de la publicación.

Lecturas .jpg

Paleta de colores

La paleta de colores fue escogida luego de un estudio entre las propuestas de cada integrante, logrando una fusión entre dos paletas generando esta última que fue elegida para usar en la edición. Esta se compone de 4 colores: Russian Violet, Majorelle Blue, Amber y Dutch White. Se hicieron pruebas de estos colores en las pantallas telefónicas con el fin de escoger un color balanceado, que potenciará la lectura, pero que a su vez no se saturara el color debido al brillo de las pantallas.

Paleta Colores Grupazo.png


Color sobre fondos


Wiki T8 Grupo AAVJ 1-02.png

Tipografías

La familia tipográfica escogida fue la Hk Grotesk, la cual es una tipografía sin-serif, lo que la hace ideal para trabajarla en sitios web y dispositivos móviles. Es una fuente legible y distinguible hasta en el texto más pequeño por lo que para esta edición era ideal debido a que se usaría en celulares.

Correccion img tipografias grupo 2- Entrega 29-09.png

Tamaño tipográfico

Finalmente se escogieron dos tipografías para la edición, una para títulos y otra para el cuerpo de texto. Para títulos de escogió HK Grotesk y para el cuerpo de texto Alegreya Sans Esto debido a que se buscaba generar un dinamismo en la lectura, se probaron las tipografías expuestas anteriormente, en pruebas digitales para ver su resolución y lectura en pantalla. Determinando que Alegreya Sans era la más legible. Por otro lado se hizo el mismo ejercicio para escoger la tipografía en títulos, HK Grotesk fue escogida por la dimensión de su caja y su cualidad sans serif, comprendía una buena lectura. En su conjunto lograban un estilo coherente con pesos diferentes lo que lograba identificar de manera eficaz la escritura del texto.

Pictogramas

Pensamos usar ciertos iconos interactivos, para poder guiar al lector que se enfrenta a una publicación digital interactiva por primera vez, sin tener la necesidad de explicar como se navega por la misma publicación. Hay otros elementos que, claro, no son necesarios que tengan animación, ya que al no ser monocromáticos, el mismo color secundario da énfasis a la acción del icono.

Click 1.gif

Slide 3.png Zoom 2.png Move 8.png Down-arrow 5.png Right-arrow 6.png Sound 4.png Boton-agregar 7.png

Índice

Tablacontenidoeditado.png

Avances 12 de Septiembre del 2022

Corrección índice en clases

Luego de un segundo análisis del índice, se disminuye la cantidad contenidos, con el fin de específicar más los temas abordados que un alumno de primer año necesita en lo concreto. Como por ejemplo se saca grabados, tema que no se ve en dicha sección de estudio.



Tabladecapitulosctt.png

Parámetros

Márgenes y guías

Se genera un tipo de márgenes y guías estándar, para que se trabaje en el mismo sentido de disposición de contenido, tanto para capítulos como índice. El tamaño del diseño de formato de salida es de 750 píxeles por 1334 píxeles, el tamaño de visualización de un celular IPhone 6,7 y 8. Junto con esto lo acompaña un margen dibujado con línea punteada de 36 píxeles por 36 píxeles, margen que sirve de guía para la composición del contenido (todo el contenido se encuentra dentro de ese margen).

Corrección página tipo grupo2-Entrega 29-09.png

Aplicación de paleta de color y reglas gráficas

La paleta de colores se compone de 5 colores, se tomaron 3 como protagonistas un azul rey, amarillo y un beige. Como colores complementarios se dejaron un azul marino y un calipso para generar distingos a lo largo de la edición. Se hicieron pruebas de estos colores en las pantallas telefónicas con el fin de escoger un color balanceado, que potenciará la lectura, pero que a su vez no se saturara el color debido al brillo de las pantallas. La aplicación del color a través de la edición fue una decisión clase para otorgarle dinamismo pero a su vez ayudará a englobar cada capítulo de forma individual. Tomando los principales como fondos, se le otorgó a cada uno sus colores complementarios para títulos y elementos de importancia.

Correción Imagen grupo 2-Entrega 29-09.png


Recopilación imagenes grupo 2-Entrega 29-09.jpg

Visualización de Contenido

En esta visualización se puede observar la edición en PDF, la cual se encuentra sin las interacciones que contiene, pero se logra visualizar el contenido principal de esta: a parte de la portada e índice se acer el primer acercamiento de lo que son las diagramación, composición y redacción de los contenidos, acompañado de las ilustraciones originales creadas para cada una de estas.

Video de visualización del contenido y sus interacciones

En este video se puede observar las diversas animaciones e interacciones aplicadas en el proyecto. Para esto se grabó la pantalla de un celular en el cual una persona navegaba la página de contenidos. En el vídeo se muestra desde la portada hasta la primera página de contenido del proyecto, visualizando así las animaciones de la portada e índice, al igual que interacciones como la gráfica de “Principios de la Composición” donde se muestra la imagen interactiva.

En esta presentación se encuentran todas las decisiones editoriales que se tomaron para poder realizar la edición “3 cosas que me hubiera gustado saber en primer años de la edad”.