T9: Entrega Final Grupo 3

De Casiopea



TítuloT9: Entrega Final Grupo 3
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.
9
Alumno(s)Macarena Alonso, Catalina Riveros, Javiera Ruiz, Juan Pablo Moscoso

Presentación


PortadaTDED.png



Basados principalmente en el Manual de Edición y Autoedición, de José Martinez de Sousa realizamos esta edición que corresponde a un manual ortotipográfico interactivo pensado para un público objetivo principal que son los estudiantes de primer año de la Escuela de Arquitectura y Diseño. Este manual, diseñado especialmente para ser leído en teléfonos móviles, condensa los contenidos que nosotros consideremos esenciales para que un alumno con poca experiencia en ortotipografía pueda desenvolverse con mayor facilidad al momento de enfrentarse a situaciones recurrentes en el diseño y arquitectura como lo es, por ejemplo, la construcción de una lámina, y los dividimos en tres capítulos principales; Tipografía, Signos y Diagramación.

Experimentación Previa

Previo a las decisiones editoriales finales que tomamos atravesamos un proceso de experimentación en cuanto a temas de tipografías, selección de colores y opciones distintas de visualización de contenidos.

Tipografía

Tipografíagrupal2.png Tipografiaicons Mesa de trabajo 1.png

Paleta de colores

Asgfhalkgh.jpg Asgfhalkgh2.jpg Asgfhalkgh3.jpg Asgfhalkgh4.jpg Paletadecolores80922.jpg


Páginas de prueba

Pruebas1crt.jpg Pruebapginas2.jpg Paginaprueba4.jpg Paginaprueba5.jpg

Decisiones Editoriales

Después de todo el proceso de experimentación gráfica logramos tomar las siguientes decisiones editoriales finales:

Paleta de Colores

Seleccionamos finalmente la siguiente paleta de colores porque los consideramos colores llamativos y cómodos para ser utilizados aprovechando el brillo de las pantallas y así captar la atención del lector alternando entre los distintos contrastes que se pueden obtener entre sí.

PaletadecoloresFinal1.png

Tipografía y Tamaño

Optamos por utilizar la tipografía Atkinson Hyperlegible (disponible en Google Fonts) para los subtítulos, cuerpos de texto y pie de página porque es una tipografía diseñada especialmente para lectores con dificultades en la vista. Lo que lo diferencia del diseño de tipografía tradicional es que se centra en la distinción de la forma de las letras para aumentar el reconocimiento de los caracteres y, en última instancia, mejorar la legibilidad, además utilizamos la tipografía Lucida Bright (Adobe) en su variante bold para los títulos para generar un contraste de formas con respecto a la tipografía Atkinson Hyperlegible y así poder crear un mayor dinamismo visual en las distintas páginas.

TipografiasTamaño.png
Tipografiaselec.png

Iconos

De una selección principal de 21 iconos finalmente optamos por escoger 2 iconos principales para la creación de botones de interacción para el lector.

Iconosss.png

Diagramación

DiagramacionFinal.png

Contenidos


1letrass.png 2signos.png 3diagramacion.png


Decidimos dividir el manual en 3 grandes aspectos que consideramos los más imprescindibles para un nuevo estudiante; Letras, Signos y Diagramación. Cada tema se divide en distintos subtemas que exponen gráficamente y de manera concisa y condensada la información que creemos necesaria para aprender estos aspectos esenciales del diseño, las explicaciones son breves y precisas y siempre acompañada de una o más ilustraciones que ejemplifican y demuestran de manera práctica lo que queremos explicar.

1. Letras

   1.1 Tipología y tipografía
   1.2 Anatomía de la letra
   1.3 Clasificaciones Tipológicas
   1.4 Atributos tipográficos
      1.4.1 Proporción
      1.4.2 Peso
      1.4.3 Inclinación

2. Signos y caracteres especiales

   2.1 Signos ortográficos
   2.2 Otros signos

3. Diagramación

   3.1. ¿Qué es la diagramación?
   3.2 Formatos principales de impresión
   3.3 Retícula: diseño y planificación de la página
   3.4 Composición del párrafo
      3.4.1 Anchura de columna y longitud de línea
      3.4.2 Alineación de texto


Interacciones y animaciones

Navegación

Navegacion1509.gif

Para la navegación se realizó un menú de contenidos principal que incluye los títulos "Letras, signos y diagramación", desde este menú se puede navegar a la portadilla de cada uno de los temas antes mencionados, en las cuales se encuentran los subtemas en orden de aparición. Cada tema y subtema es clickeable y lleva directamente a la página en la que se encuentra la información. Las páginas poseen un ícono "home" con el cual se puede volver a la página del índice principal.

Scroll

Scroll1509.gif

El scroll se utilizó como una solución para páginas que perderían la continuidad si se separaban debido a la excesiva cantidad de contenido. Resultó ser un recurso dinámico y atractivo que permite ritmo y continuidad en la lectura de la página, acotando además la extensión final de la edición debido a que permite concentrar 2 o 3 posibles páginas en 1 sola.

Pop Up

Pop up.gif

Los pop up se utilizaron para presentar información o datos "extra", además de funcionar como recurso de optimización del espacio de la página. Permite diferenciar y jerarquizar de manera eficiente el tipo de información que se muestra, ya que es el lector quien decide accionarlos y hasta que punto lo realiza.


Animación Anatomía de la letra

Anatogif.gif

Visualización

Link Epub

https://drive.google.com/file/d/1lqNU_LcSLQ5tNaTxM9cIdFZjuuvb9QVD/view?usp=sharing

Video

PDF Estático