Decisiones Editoriales - Manual Interactivo Grupal - Catalina, Javiera, Juan Pablo, Macarena
| Título | Decisiones Editoriales - Manual Interactivo Grupal |
|---|---|
| Asignatura | Taller Diseño de Ediciones Digitales |
| Del Curso | Taller Diseño de Ediciones Digitales 2022 |
| Carreras | Diseñ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. |
| Nº | 8 |
| Alumno(s) | Catalina Riveros, Javiera Ruiz, Juan Pablo Moscoso, Macarena Alonso |
Introducción
Este proyecto se basa principalmente en el Manual de Edición y Autoedición, de José Martínez de Sousa. La edición corresponde a un manual ortotipográfico interactivo pensado para un público objetivo principal que consiste en los estudiantes de primer año de la Escuela de Arquitectura y Diseño de la E[ad].
El manual está diseñado para ser leído en teléfonos móviles, contemplando contenidos que consideramos 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 ámbito del diseño. Este proyecto dispone de tres capítulos principales; Tipografía, Signos y Diagramación.
Desarrollo de la propuesta
Tipografía
En un inicio, se trabaja bajo un contexto de prueba con 3 tipografías (obtenidas desde Google fonts) ya utilizadas anteriormente en algunos trabajos individuales: Popins, Abril Fatface y Montserrat. Estas fuentes se fueron probando en cuanto legibilidad en pantalla, con sus distintos pesos tipográficos.
Paleta de colores
Se realizan diferentes versiones de paletas de color para la edición, con una condición en común, la existencia de una relación de contraste mayor a 4.5 entre los dos colores escogidos, según el sitio web de contraste citado al final de este párrafo, es lo mínimo para establecer condiciones de accesibilidad y legibilidad en un soporte digital. Se decide proponer paletas de color que contengan tonalidades moradas o naranjas para mantener un estándar coherente de trabajo. La comparación de contraste se obtiene del sitio https://app.contrast-finder.org/?lang=es
Formatos de prueba
Se realizan formatos de prueba para establecer una disposición de los distintos elementos gráficos tales como: la tipografía, las distintas cajas tipográficas, la paleta de colores distribuida en cuanto a tamaño, diagramación y grosores. La paleta de color se experimenta con el fin de establecer distingos en cada formato de página, para así resaltar el rasgo de la tipografía y sus características.
Formato tipo: Contrastar el fondo con la letra y sus cajas de texto
Anatomía de la tipografía: Su distingo en el punto y brazo de los caracteres
Índice: Contraste de tamaños y colores fríos con cálidos
Formato tipo: Presentación de la anatomía de la letra dentro de su caja tipográfica
Paleta de colores final
Se presenta la paleta de colores escogida para la edición. Su elección se debe a que el trabajo en soportes digitales permite una mayor flexibilidad que los soportes análogos, a la hora de utilizar colores brillantes y llamativos. Se decide utilizar el color morado oscuro (#240F50) principalmente para fondos, en contraste con el tono celeste (#1BDED6) y lila (#BDB2FF) utilizado en títulos e ilustraciones. Para el texto se ocupa un color cercano al blanco (#FFFBF7), con menor luminosidad, para no exponer al lector a estímulos intensos a la hora de leer.
Por otro lado, los colores seleccionados poseen una relación de contraste superior a 8 puntos (según la fuente de contrastes citada al final del párrafo) al comparar el color #240F50 utilizado como fondo con el resto de los colores seleccionados para texto. La comparación de contraste se obtiene del sitio https://app.contrast-finder.org/?lang=es
Tipografía
Títulos
Utilizamos la tipografía Lucida Bright para los títulos con la intención de generar contraste entre serif y la tipografía palo seco utilizada en los cuerpos y así poder crear un mayor dinamismo visual, a nuestro criterio, en las distintas páginas. Se trabajó con esta tipografía (desde Adobe) en su variante Bold, con el fin de lograr un contraste en grosor y forma (serif) con respecto al resto del texto en la página.
Subtítulos, Cuerpos de texto y citas
Se decide por la tipografía Atkinson Hyperlegible para los subtítulos, los cuerpos de texto y las citas, al haber sido diseñada especialmente para lectores con dificultades en la vista, mejorando la legibilidad de los textos. En cajas de texto se ocupa su variante Regular, a diferencia de los subtítulos en variante Bold. Por su parte, las citas se distinguen en Italic. Lo que la 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.
Pictogramas
Seleccionamos inicialmente 21 pictogramas de Google Fonts que consideramos fundamentales para generar las interacciones, de izquierda a derecha corresponden a:
- Primera línea: home, close, add, expand less, expand more, arrow forward Ios, arrow back Ios, file download
- Segunda línea: add circle, cancel, arrow upward, arrow downward, sync, full screen, zoom out, zoom in
- Tercera línea: swipe right, swipe left, swipe up
Diagramación
Decidimos utilizar dos tipos de diagramación horizontal para las páginas maestras; una de 2 columnas (diagramación 1) y otra de 3 columnas (diagramación 2), ambas diagramaciones disponen de los mismos márgenes externos correspondientes a 100 píxeles en la parte superior, y 75 píxeles en los costados y parte inferior de la página. La primera diagramación de 2 columnas tiene una separación de 100 píxeles entre cada columna y la diagramación de 3 columnas tiene una separación de 65 píxeles entre cada columna.
Formato Tipo
Formato para contenidos
Se consideran 4 temas principales a tratar en la edición. En la página de contenidos, estos temas se acomodan de manera horizontal, con una imagen representativa de cada uno, la cual al ser clickeada (o al cliquear su ícono “+”), aparece en pantalla un menú extendido de todos los subcontenidos del tema principal.
Portadillas
Para las portadillas, se busca diferenciar el tipo de página mediante el fondo, por lo que se considera una gradiente simple acomodada al lado derecho de la pantalla. Esta página considera el título de la temática a tratar en el capítulo de la edición y además cada uno de los subtemas, los cuales son clickeables y permiten navegar de manera directa a su página correspondiente.
Formato sin columnas
Se presenta un formato apaisado, que contiene la descripción del renglón tipográfico, este consiste en un un conjunto de líneas base que delimitan el espacio de un carácter. Se utiliza un fondo llamativo para establecer un contraste con lo que se requiere indicar.
2 Columnas
Se presenta un formato apaisado en dos columnas divididas por los contrastes del color del fondo, para así establecer diferentes contenidos; por un lado, visualizar una breve descripción sobre la anatomía de la letra y por otro, una ilustración de esta descripción.
3 Columnas
Se realiza un formato apaisado de tres columnas, conformado por una de las clasificaciones tipológicas, para así visualizar los rasgos de cada una y poder realizar comparaciones entre ellas dentro de un mismo espacio.
Entrega 12 de septiembre
Contenidos de la edición
Propuesta avance de contenidos de la edición
Parámetros editoriales
Títulos
Lucida Bright (Adobe)
- Estilo: Demibold
- Color: Blanco
- Tamaño letra: 36pt
- Interlinea: 49pt
- Tracking: 20
Subtítulos
Lucida Bright (Adobe)
- Color: lavanda
- Tamaño letra: 30pt
- Interlinea: 49pt
- Tracking: 20
Cuerpo de texto
Atkinson Hyperlegible (Google Fonts)
- Peso y color: Regular blanco
- Tamaño letra: 22pt
- Interlinea: 29pt
- Tracking: 10
