USO DE LAS RETÍCULAS EN DISEÑO EDITORIAL
1
“La clave del impacto visual”
1. Historia y evolución de la Retícula
1.1 Antecedentes
1.2 Historia e inicios de la retícula
1.3 El caso de Tres Belles Heures de Notre Dmae
1.4 Evolución de la retícula
1.5 Retícula Cartesiana del Renacimiento
1.6 Retícula Moderna
1.7 Retícula Posmoderna
2. Tipos de retículas y sus aplicaciones
2.1 Retícula de manuscrito
2.2 Retícula de columnas
2.3 Retícula de una y dos columnas
2.4 Retícula de múltiples columnas y modular
2.5 Valoración y violación
2.6 Sistema jerárquico
2.9 Retícula de símbolos y logotipos
2.10 Retícula asimétrica
2.11 Retícula simétrica
3. Uso de la retícula en el diseño editorial
3.1 Maquetación
3.2 ¿Para qué sirve la retícula?
3.3 Ventajas de usar retículas
3.4 Beneficios del uso de la retícula
3.5 Uso de retículas en los diferentes medios
4. Aplicación de la retícula en el diseño web y digital
4.1 Retícula Responsive
4.2 CSS Cascadind Style Sheets
4.3. Framework
4.4 Ejemplo de retícula para sitios web
5. Publicaciones de diseñadores donde se implementa el uso d ella retícula
5.1 Tyler Brulé
5.1.1 Otras publicaciones de Tyler Brulé
5.2 Neville Brody
5.2.1 Otras publicaciones de Neville Brody
5.3 David Hillman
5.3.1 Otras publicaciones de David Hillman
5.4 Rodrigo Sánchez
5.4.1 Otras publicaciones de Rodrigo Sánchez
2
05 21 29 38 12
INDICE
CREDITOS
Título:
Uso de la Retícula en el diseño Editorial
De esta edición: 2023 Facultad de Comunicación Social
Calle 15 N-O, Guayaquil 090613
Teléf.: (04)-2937787
Guayaquil - Ecuador
Diseño de Portada: Karen Quirumbay
Maquetación: Daniela Rogel
Roles:
Director: Samantha Alarcón
Director de Arte: Elizabeth Rodriguez
Jefe de Producción: Daniela Rogel
Redactor jefe de Sección: Karen Quirumbay
Director de Fotografía: Ariana Sig-Tú
Digitalizado por: Grupo 4 4A1
Todos los Derechos son Reservados
Impreso en Ecuador / Printed in Ecuador
3
INTRODUCCIÓN
La retícula, esa estructura aparentemente simple compuesta por líneas y puntos, ha sido una herramienta esencial en el diseño y la composición visual a lo largo de la historia. En un mundo cada vez más saturado de información y estímulos visuales, el uso adecuado de la retícula se convierte en un factor crucial para lograr una comunicación clara y efectiva. Este libro tiene como objetivo explorar la importancia del uso de la retícula en diferentes ámbitos, desde el diseño gráfico y editorial hasta la arquitectura y el diseño web.
Nos adentrémonos en el fascinante mundo del diseño gráfico y editorial. Descubriremos cómo la retícula se convierte en una guía estructural que nos permite organizar y equilibrar los elementos visuales en una página. Veremos cómo la retícula es fundamental para la planificación y el diseño de estructuras físicas.
También exploraremos cómo la retícula influye en la relación entre los usuarios y los espacios, generando una sensación de orden y equilibrio que puede impactar en nuestra experiencia cotidiana.
A su vez, exploraremos el mundo digital y el diseño web. La retícula se vuelve aún más crucial en el entorno digital, donde la interacción y la navegación intuitiva son fundamentales. Descubriremos cómo la retícula nos permite estructurar y organizar la información en una página web, facilitando la comprensión y la experiencia del usuario.
Veremos ejemplos de diseños web exitosos que utilizan la retícula de manera efectiva, optimizando la legibilidad, el flujo visual y la usabilidad. A lo largo de este libro, descubriremos cómo el uso adecuado de la retícula puede marcar la diferencia entre una comunicación confusa y una comunicación clara y efectiva.
4
EVOLUCIÓN DE LA RETÍCULA
5
ANTECEDENTES
La retícula, también conocida como rejilla o cuadrícula, es una estructura gráfica compuesta por líneas horizontales y verticales que se utiliza como referencia visual en diversos campos, como el diseño gráfico, la arquitectura, la fotografía y el dibujo. La evolución de la retícula ha sido un proceso gradual a lo largo de la historia, influenciado por avances tecnológicos, cambios estéticos y nuevas necesidades de diseño.
Según, (Lopez Parejo & Carolina, 2006) los cambios por la Revolución Industrial afectaron a todos los aspectos de la sociedad, la economia, la cultura, tras ese contexto aparece la necesidad de un cambio, empieza el interes por la imprenta, se multiplica la produccion de libros, que pasan de ser manuscritos a maquetados y asi cobra vida el interes en las formas asimetricas, proporcionales y rectangulares. Gracias a ella, la composición era una armonía entre tipografía, ilustraciones y demás elementos de la página.
Fue en la arquitectura donde nace el interes por organizar el trabajo de una forma ordenada pero diferente a la estructura clásica griega o tradiciconal. Es alli donde aparece la reticula moderna germano-suiza en un libro de la escuela de la
BAHAUS The imsms of Arts fue el punto de fuerza en el desarrollo de este “ esqueleto de trabajo impreso” mas innovador.
6
Figura 1. Libro The Isms of Art
HISTORIA E INICIOS DE LA RETÍCULA
En sus inicios, las retículas se utilizaban principalmente en la impresión y la tipografía. En el siglo XV, con la invención de la imprenta por Johannes Gutenberg, las retículas comenzaron a utilizarse para alinear y distribuir el texto de manera uniforme en las páginas impresas. Estas primeras retículas eran simples y generalmente consistían en una serie de columnas verticales que dividían la página en secciones. La retícula ha jugado un papel muy importante en el desarrollo y consolidación del movimiento moderno en el siglo veinte en el diseño gráfico. En términos de su impacto los valores que cambian los elementos constructivos de la retícula tienen en el significado de la retícula misma una tipología estructural de la retícula con cuatro sub-formas básicas: a) en coordenada, b) en intersección, c) en módulo y d) en línea (fig. 2) (Williamson, 2013) 1 Aquí definidas como un sistema proporcional de sistemas de coordenadas, intersectadas por un eje vertical y uno horizontal.
Historicamente estas sub-formas se han encontrado en pares y por lo tanto juntas constituyen dos formas mayores. La primera forma mayor se referirá a la basada en punto e incluirá de las sub-formas mencionadas a la de en coordenada y a la de en intersección. La segunda forma mayor se referirá a la basada en campo e incluirá las sub-formas en módulo y en línea.
7
Figura 2. Gutengerg, el inventor de la imprenta
Figura 3. Tipología de la retícula: las cuatro sub-formas
Estas líneas verticales y horizontales controlaban tanto el posicionamiento y la composición pictórica de gráficos y tipografía. Esta función es evidente en el diagrama de una página de esta época de la obra Book of Hours de principios del siglo XV, en donde la esquina izquierda del atril desde donde San Antonio predica, coincide con la parte interna de la columna del margen del texto.
Esta integración del texto y de la imagen sugiere fuertemente que tanto la disposición de la página como la composición pictórica fueron planeadas y ejecutadas por el mismo diseñador. Tal uso de líneas verticales y horizontales para posicionar texto e imágenes no difiere tanto de la retícula modernista del siglo XX, que actúa como una estructura para controlar la estructura de la página.
pictóricas, abre la posibilidad de que la línea retícula pueda también ser utilizada para fines representativos o simbólicos. Por otra parte se tiene otro ejemplo de la aplicación de la retícula en sus inicios por artistas quienes tenían en consideración que las retículas también regulan composiciones pictóricas, abre la posibilidad de que la línea retícula pueda también ser utilizada para fines representativos o simbólicos.
8
Figura 4. Manuscrito de principios del siglo XV, Libro de Hours.
Figura5. Donald Byrne, “Reticulado para Manuscrito y Diseño Pictórico en el trabajo de Limbourgs.
EL CASO DE TRES BELLES
HEURES DE NOTRE DAME
El caso de los manuscritos del siglo XV Tres Belles Heures de Notre Dame, el cual representa en la parte de arriba el nacimiento de Juan el Bautista y el bautismo de Juan de Cristo en la parte inferior. Tras observar estas figuras un análisis visual de la composición pictórica revela que estas líneas tienen un propósito representativo y simbólico más que de alineación y mero efecto estético. Por ejemplo, Juan, el niño recién nacido en la escena en el interior está en perfecta alineación con el adulto Juan Bautista que se encuentra en el paisaje inferior.
La retícula del manuscrito de Tres Belles Heurs es mucho más que un mero dispositivo de composición. Simboliza el plan del diseño de Dios para el mundo y el hombre, debido a que las coordenadas donde las uniones son símbolos especiales y los eventos son localizados (el nacimiento de Juan, el bautismo de Cristo, la roca y la cruz) significan esos puntos donde el plan de Dios o su voluntad se ha afirmado sobre una realidad física y tiempo histórico. La retícula del manuscrito de Tres Belles Heurs es mucho más que un mero dispositivo de composición.
9
Figura 6. a
Figura 7. b
Figura 8. c
EVOLUCIÓN DE LA RETÍCULA Retícula Cartesiana del Renacimiento
Las retículas de campo fueron utilizadas para enfatizar el potencial expansivo del módulo repetido o las líneas individuales de los ejes en extensiones continuas o casi continuas. La ganancia en el estatus de los ejes y de las relaciones horizontales que caracterizaron la retícula de base en campo en el mismo siglo, fue acompañada por la expansión de grandes logros de historiadores exploradores y descubridores; la retícula funcionó en ambos casos como campo de ambos módulos o ejes.
A medida que uno va del Renacimiento hacia el siglo XX, existe un cambio gradual que va desde el énfasis de la apariencia física al énfasis de la estructura, acompañando el rápido crecimiento de la ciencia natural. El Discourse on Method de Descartes (1637) sirvió como fuente principal no sólo informando acerca del uso y del significado de la retícula en este periodo. La retícula por lo tanto no solamente viene a representar las leyes y principios estructurales detrás de la apariencia física, sino el mismo proceso de razonamiento mental.
10
Figura 9.
Figura 5. El Discourse on Method de Descartes (1637)
Figura 10. La retícula en sus inicios en la arquitectura. Urbanismo renacentista
Retícula Moderna
La tradición Cartesiana continuó actuando en Francia como el mayor estímulo para la retícula ya que asumió su reencarnación modernista. Por razones prácticas, se dirá que el proceso se inició con Paul Cézanne, lejos del ilusionismo del Renacimiento, hacia la abstracción y geometrización de la naturaleza y de un énfasis en el campo de la pintura (Williamson, 2013, pág. 10) Pero a pesar de que el concepto moderno de retícula no fue muy diferente en su significado general al de la retícula cartesiana del siglo XVIII, su significado específico estaba muy atado a los eventos e ideas de principios del siglo XX los cuales dieron información a la retícula y más tarde a la retícula posmoderna.
Retícula Posmoderna
La retícula moderna suiza estuvo en todo de su apogeo durante la década de los sesentas. Pero durante los setentas un número de diseñadores gráficos comenzaron a echar para abajo las convenciones de los gráficos modernistas y comenzaron a utilizar la retícula para nuevos fines. La retícula posmodernista ya no actuó más como una lógica invisible “detrás” de la composición, sino que fue más bien expuesta y utilizada como un elemento decorativo subordinado. La retícula fue a veces titulada y hecha para expresar antiracionalidad y aleatoriedad, como se puede apreciar en el trabajo representativo del instructor gráfico de Yale Dan Friedman.
11
Figura 11. Paul Cézanne
Figura 12. Dan Friedman, tarjeta para cambio de dirección, 1976.
TIPOS DE RETÍCULA Y SUS APLICACIONES
12
RETÍCULA DE MANUSCRITO
Una retícula tipo manuscrito es uno de los modelos más sencillos y simples que se pueden usar. Es grande y rectangular lo que permite colocar bloques de textos voluminosos dentro de su estructura primaria. En su estructura secundaria admite situar notas de pie de página, número de página, entre otros. Es muy común usarla en el diseño editorial de libros. A pesar de su simplicidad puede generar problemas si no se toman las decisiones correctas al diseñar con la retícula manuscrito. Por eso se recomienda usar márgenes anchos y al elegir el espacio, la tipografía y el interlineado permite una lectura favorable. Es una simple retícula de una columna, que se puede utilizar para diseñar un libro o un manuscrito. Los únicos aspectos que se pueden cambiar en esta retícula son el tamaño de los márgenes y el ancho de la columna. (Jose, 2022)
La retícula tipo manuscrito está diseñada para textos largos, como los que se encuentran en un libro. Tiene una estructura básica compuesta por el bloque de texto y los márgenes. También cuenta con una estructura secundaria donde se colocan elementos como la numeración de páginas, títulos de capítulos y notas al pie. Aunque parece simple, es crucial tomar decisiones adecuadas para asegurar una lectura cómoda en cada página. Para mantener el interés visual y evitar la fatiga visual, se recomienda utilizar márgenes generosos que permitan que el enfoque se centre en el texto. Además, es importante seleccionar un tamaño de fuente adecuado, un interlineado apropiado y un espaciado entre palabras adecuado para facilitar la lectura.
13
RETÍCULA DE COLUMNAS
En este tipo retícula se usan para distribuir la información sea de modo dependiente o independiente, aun así, siendo equitativo. Se suele usar dos o tres columnas al bosquejar una composición. Se puede encontrar este tipo de red en el diseño editorial de periódicos y revistas, ya que permite tanto texto e imágenes por igual.Las retículas de columnas son útiles cuando se presenta información discontinua. Esta se dispone en columnas verticales con la intención de separar los tipos de información. No obstante las columnas pueden depender unas de las otras o bien cruzarse para generar columnas más anchas. Debemos proporcionar un ancho en el que entren todos los caracteres posibles siempre que la lectura resulte cómoda. De esta manera evitamos que existan demasiadas particiones de palabras que dificultarán la lectura en el caso de columnas estrechas y en columnas demasiado anchas al lector le costará más trabajo encontrar el principio de las líneas consecutivas. (Piñeiro, 2019)
Probablemente, la retícula de columna es el tipo de retícula que más se utiliza. Dependiendo de cómo organices las retículas, la página puede tener un aspecto totalmente distinto. Por ejemplo, si estás trabajando con un documento A5, probablemente preferirás no dividir la página en más de 2 o 3 columnas. Si añadieses más, las líneas de texto serían demasiado cortas y difíciles de leer. Una longitud de línea de texto óptima para la lectura sería de 50-60 caracteres por línea. Por supuesto, puedes usar líneas con más o menos caracteres; pero, si te pasas, el texto será difícil de leer. Los periódicos utilizan retículas de columna puesto que les permite incluir más texto en una misma zona. Cuantas más columnas haya, más texto se puede incluir. Sin embargo, si las columnas son demasiado pequeñas, el texto se leerá con dificultad. El tamaño que tengan los márgenes y los medianiles de la página marcará la diferencia entre una página que tenga un aspecto ligero y amplio, o una que esté atiborrada de texto.
14
RETÍCULA DE 1 Y 2 COLUMNAS
Retícula de 1 columna Retícula de 2 columnas
Esta estructura presenta una única hilera de información, esto para dar una continuidad y aprovechar al máximo el espacio en textos largos y persistentes. Posee márgenes amplios y evita que se pierda el punto de lectura, transmite calma y tranquilidad. Los libros o informes utilizan este tipo de retícula. (Rafael, 2014)
Este tipo de retícula organiza la información en dos columnas, lo cual se realiza con la intención de presentar datos subsecuentes en un formato enfrentado o textos con información separada. Las dimensiones de las columnas pueden ser iguales en tamaño o, si se requiere, una columna puede ser el doble de ancha que la otra. Esta configuración de dos columnas se utiliza con frecuencia en diccionarios u otros textos que contienen definiciones, ya que permite una presentación clara y concisa de la información. Al dividir el contenido en dos columnas, se facilita la comparación y comprensión de los datos o definiciones proporcionados. Además, esta retícula ofrece flexibilidad para ajustar el tamaño y la distribución de los elementos gráficos y textuales
15
RETÍCULA DE MULTIPLES COLUMNAS
Y MODULAR Múltiples columnas Retícula modular
Este sistema es uno de las más utilizados, ofrece una flexibilidad y versatilidad amplia, puesto que se puede combinar e intercalar texto con imágenes u otros cuerpos, el número de columnas puede variar dependiendo, pero usualmente se mantiene en tres o cuatro, las cuales deben ser proporcionales. (Marcela, 2021)
Esta estructura muestra módulos del mismo tamaño abarcados en todo el espacio, es más compleja, pero gracias a su menor división del espacio permite dar más flexibilidad, movilidad y creatividad a los contenidos. Se puede ver en los diseños de anuncios, carteles o folletos cortos. este formato cuenta con líneas y divisiones establecidas uniformemente y que deben ser capaces de funcionar en todas las páginas a imprimir. La intención de esta retícula no es hacer que la maquetación de las páginas tenga una sola división o proporción cuadriculada, sino más bien que el usuario puede ver que existe un margen imaginario evidente pero que no necesariamente debe ser cuadrado o exacto. (Sanchez, 2017)
16
Figura 13 Retícula de multimples columnas en revistas.
Sistema jerarquico
Esta estructura presenta una única hilera de información, esto para dar una continuidad y aprovechar al máximo el espacio en textos largos y persistentes. Posee márgenes amplios y evita que se pierda el punto de lectura, transmite calma y tranquilidad. Los libros o informes utilizan este tipo de retícula. (Rafael, 2014)
VALORACIÓN Y VIOLACIÓN
Una vez elaborada la retícula, uno de los mayores peligros es caer en cierta monotonía que dé como resultado un producto gráfico lineal y aburrido. Para otorgar dinamismo a tu proyecto, es importante sacar el rendimiento oportuno a la capacidad de variación compositiva que posee tu retícula. A continuación, te presentamos un ejemplo de dobles páginas en las que los módulos azules representan los bloques de texto y los magentas las imágenes.
Una vez que se ha puesto en su lugar la retícula, es conveniente ordenar todo el contenido del proyecto, doble página por doble página, para ver que aparece en cada una de ellas.
17
Figura 14 Ejemplo del sistema jerárquico con sus partes. su objetivo es lograr un orden de entrada y salida para el análisis de la información contenida en la pieza.
RETÍCULAS DE SÍMBOLOS Y LOGOTIPOS
A la hora de abordar un trabajo de diseño de marca, podemos empezar a trabajar sobre una rejilla que nos ayude a distribuir y obtener las formas que deseamos. Gracias a esta manera de proceder, las relaciones de aspecto y tamaño de los elementos de diseño guardarán unos valores fijos que nos permitirán mantener la integridad de nuestra pieza. Hasta cierto punto, se trata de garantizar las condiciones de reproducción del producto gráfico más allá de la arbitrariedad del gesto. (Pereira, 2018)
Las retículas son una herramienta común que han sido usadas en varios aspectos del diseño web por el mismo tiempo en que los diseñadores han creado arte para proyectos impresos y digitales. Existen conceptos de retícula nuevos y algunos probados con el tiempo, al igual que opciones más modernas y personalizadas. Algunos de los sistemas de retícula más comunes son cosas en las que puedes pensar inconscientemente, pero usas a diario, como la regla de tercios, que es una herramienta de fotografía común, el número áureo o solo una columna y una retícula de madianil.
18
Figura 15 Ángulos de retículas para diferentes símbolos y logotipos
RETÍCULA DE COLUMNA ASIMÉTRICA
La retícula asimétrica es un enfoque de diseño tipográfico que se caracteriza por romper con la simetría tradicional y buscar una composición más dinámica y visualmente interesante. A diferencia de las retículas simétricas, que se basan en una distribución equilibrada y regular, la retícula asimétrica utiliza un arreglo irregular de elementos. Esta técnica permite jugar con la posición y el tamaño de los elementos en la página, creando un diseño único y llamativo. En la retícula asimétrica, los elementos se colocan de forma no uniforme, creando una sensación de movimiento y fluidez en la composición. Los espacios en blanco se utilizan estratégicamente para equilibrar visualmente los elementos y mantener una estructura completa
Una retícula asimétrica es una estructura de diseño que se caracteriza por la falta de simetría en su disposición. A diferencia de las retículas simétricas tradicionales, donde los elementos se organizan en una cuadrícula regular y equidistante, la retícula asimétrica busca romper con esa uniformidad y crear una composición más dinámica y visualmente interesante.
19
Figura 16 Reticula asimetricas para textos con imagenes. es importante buscar siempre el equilibrio cuando se utiliza un diseño asimétrico.
RETÍCULA DE COLUMNA SIMÉTRICA
La retícula simétrica es una estructura de diseño que se caracteriza por su disposición regular y equilibrada. Consiste en organizar los elementos de diseño en una cuadrícula uniforme, donde los espacios y las proporciones se mantienen consistentes. Esta retícula proporciona una base estable y ordenada para la disposición de contenido, ya sea en diseño gráfico, diseño web o diseño editorial. La retícula simétrica permite una distribución armoniosa de textos, imágenes y otros elementos visuales, facilitando la legibilidad y la comprensión del diseño. Su enfoque equilibrado y estructurado aporta una sensación de orden y coherencia al diseño, brindando una experiencia visual clara y organizada para el espectador.
Esta técnica busca crear una armonía visual a través de una disposición ordenada y consistente de elementos, como textos, imágenes y espacios en blanco. La retícula simétrica se fundamenta en la noción de que la simetría y el equilibrio son elementos esenciales para lograr un diseño coherente y atractivo.
20
Figura 17 Reticulas simetricas para textos con imagenes La pagina derecha e izquierda son un relejo exacto que de como resultado una composicion equilibrada.
USO DE LA RETÍCULA EN EL DISEÑO EDITORIAL
21
Es un tema que tiene relación con los principios del diseño. Compositivamente hablando, está ligado a las proporciones de los elementos de la página, el orden que se le da a los pesos visuales, la jerarquía con la que se ubican los elementos primero, después, adelante o atrás, arriba o abajo, full color, blanco y negro, claro, oscuro o resaltado, etc.
MAQUETACIÓN ¿PARA QUÉ SIRVE LA RETÍCULA?
Con la retícula se facilita corregir y mejorar la distribución de los elementos gráficos para dar una mejor organización, además la retícula proporciona un orden visual a los elementos que se desarrollan en los medios impresos y dispositivos de comunicación electrónicos.
Chacón, F. (2015) cita a Lidwell, W. (2011) con la siguente mención: “Los elementos de un diseño deben estar alineados entre sí. De este modo se logra transmitir unidad y cohesión, lo que lo que contribuye a la estética del diseño y a la estabilidad percibida.” (pág. 3)
Fotografía N° 18. Cada grupo de bancas representa un párrafo de texto y cada banca un reglón, los espacios entre las bancas y a los lados representan los espacios negativos. Fotografía tomada por José Dimitrakis en la Catedral Católica Metropolitana de Guayaquil.
Esta herramienta es un recurso sencillo, pero a la vez complejo, ya que, el uso incorrecto se ve reflejado en el espacio que se utilizó. Para la realización de una retícula, es importante y necesario conocer que elementos gráficos se van a utilizar; esto, con el fin de otorgar los espacios para los mismos, para que cada uno disponga de un espacio y comunique su significado. El sistema reticular establece no solo un orden, sino un ritmo, una estructura de lectura y por lo tanto una jerarquía que orienta al lector dentro de la publicación. La legibilidad de una diagramación radica en la cantidad de elementos a diseñar en su retícula, para que estos se vean ordenados y legibles en su espacio.
22
Canga, J. (1994) citado por Chacón, F. (2015) menciona que: “Las columnas tienen como fin primordial la organización del material tipográfico de forma coherente sobre la página”. (pág. 10)
VENTAJAS DE USAR RETÍCULA
• Economizan tiempo de producción.
• Son eficaces al momento de resolver problemas compositivos.
• Facilitan claramente la organización del contenido, así como la comprensión de este.
• Permite que más de una persona trabaje en el diseño sin que se vea afectado el estilo gráfico.
• A través de la jerarquización de los componentes, da prioridad al punto focal de la composición.
Discriminar los recursos gráficos es importante en toda edición editorial, para seleccionar y comunicar por medio de ellos, de forma directa, la intencionalidad que se pretende. En este proceso, una vez seleccionados los elementos gráficos y las posibles distribuciones de las fotografías y se diseña la retícula de acuerdo con lo que se desea comunicar.
BENEFICIOS DEL USO DE LA RETÍCULA
Jerarquía
Ayuda a organizar y priorizar los elementos dentro del diseño. Hace más fácil juzgar cuál es el más destacado. Guía a la vista para una mejor navegación visual.
Balance
Da equilibrio y constancia a la composición. Ofrece equilibrio al diseño de forma simétrica o asimétrica, pero siempre consistente.
Estética
Aporta belleza al diseño. Esta claridad se traduce en una experiencia agradable para el ojo. Da al diseño estética y elegancia visual. Estas características son apreciadas por el público o los espectadores del diseño.
Eficiencia
Facilita el trabajo del diseñador gráfico. El uso de la retícula acelera el proceso de diseño. De hecho, hace que el trabajo sea más rápido, más fácil y mejor. Ayuda a ahorrar tiempo al ser una guía para colocar cada tipo
23
de contenido en su lugar correspondiente. Los diseñadores toman miles de decisiones sobre el concepto, los materiales, el estilo, las formas, la tipografía, las dimensiones, el color, la colocación, la proporción y el tamaño. Cuando la retícula está definida de antemano, el diseñador puede dedicar tiempo a las demás partes del proyecto.
Percepción
Previsualiza los espacios para cada elemento. Es fácil distinguir los lugares y espacios que ocupará cada elemento de la composición, incluidos los espacios negativos. La retícula ayuda a visualizar qué zonas pueden servir de espacios en blanco o negativos para dar aire al diseño y dirección a la vista
USO DE RETÍCULAS
EN LOS DIFERENTES MEDIOS
Los libros poseen características diferentes al de la revista. Además, suelen tener mayor cantidad de páginas y una portada más robusta, que permita protegerlo de la manipulación por parte del lector.
Secciones del libro
La sección interna del libro es la que nos permite distribuir los textos en las páginas y clasificarlos de manera ordenada, estas abarcan desde el principio que es la guarda hasta el final que encontramos el colofón, en algunos casos no se suele utilizar este último.
Fotografía N° 19. Los espacios blancos o negativos son recursos que ofrecen elegancia, dirección y legibilidad al diseño. Fotografía de Estudio de diseño independiente de Copenhague.
24
Guarda
Hoja de cortesía • Página de créditos • Dedicatoria • Agradecimientos • Prólogos • Índice • Introducción • Epígrafe • Listado de abreviatura • Apéndice o Anexo • Bibliografía • Glosario • Colofón Libro
Estas secciones son: •
•
El uso de retícula a emplear varia del contenido que se quiera integrar, pero por lo general siempre debe componerse de títulos, subtítulos, contenido e imágenes. Tanto como en la maquetación de portada y contenido.
Revista
Las revistas están compuestas de elementos únicos y característicos propios de la publicación, esto permite diferenciarlos fácilmente del libro mediante su estética y diseño, no todos los elementos son iguales, y en caso de serlo funcionan de manera diferente, su uso depende en gran medida del público objetivo.
Estas secciones son:
• Portada
• Cabecera
• Datos referenciales
• Títulos secundarios
• Pestaña
• Lomo
• Páginas centrales
• Contraportada
• Inserto
25
Fotografía N° 20. Partes de un libro
Fotografía N° 20.2. Retícula de contenido de libro
Fotografía N° 21. Los principales elementos de una portada
Fotografía N° 20.3. Retícula de portada y contraportada de libro.
Fotografía N° 20.1. Partes de un libro.
El uso de retícula a emplear varia del formato y contenido que se quiera integrar, pero por lo general siempre debe componerse de títulos, subtítulos, destacados, publicidad, fotografías y pie de ilustración o foto. Tanto como en la maquetación de portada y contenido varia su retícula.
ficos que, aplicados coherentemente, faciliten la visualización de una determinada identidad corporativa. Se recoge en un manual de aplicación, donde además de las pautas correspondientes se incluyen ejemplos para otros profesionales.
Todos los elementos son definidos a partir del significado que se supone que se puede obtener con su aplicación y de modo que una vez que se aplican todos en conjunto, se perciba un mensaje ordenado y jerarquizado, de contenido más rico y complejo que si todos los elementos transmitiesen un mismo valor.
Generalmente se provee una serie de plantillas que facilitan el desarrollo de futuras aplicaciones, y que constituyen la aplicación cerrada de las retículas definidas en el manual, de tal modo que lo único que debe hacer su usuario es actualizar una serie de campos.
Imagen Corporativa
Fotografía N° 21.1 Formatos de publicidad. El desarrollo de una imagen gráfica corporativa persigue la obtención y normalización de una serie de recursos grá-
Las marcas se diseñan en base a la necesidad que se necesite satisfacer y por ende la retícula cambia dependiendo el diseño que conlleva la misma.
26
Fotografía N° 22. Imagen Corporativa diseñada a base de retícula.
Fotografía N° 22.1 Imagen Corporativa diseñada a base de proporción Aurea
Marketing y Publicidad
El diseño de campañas promocionales plantea la dificultad añadida de que es necesario desarrollar retículas de aplicación de los elementos gráficos para soportes tan variados como anuncios en prensa, cartelería, vallas publicitarias, folletos, o anuncios en televisión.
Al tratarse de una colección de soportes tan variados, es difícil definir una cuadrícula base que sirva para cada caso, o, en su defecto, una serie de modelos de cuadrícula que sean a la vez diferentes de la competencia, pero similares entre sí.
Multimedia
Cada vez es mayor el número de aplicaciones gráficas en soporte multimedia. La información gráfica y la comunicación de mensajes se produce ya mayoritariamente a través de páginas web, que requieren de
27
Fotografía N° 23 Retícula en poster de película.
Fotografía N° 23.1 Retícula en publicidad.
un adecuado desarrollo gráfico para su correcta interpretación por parte del usuario.
zación de edificios o establecimientos, propiedad de la empresa u organización.
Son muy numerosas las páginas web construidas sin ningún tipo de orden o jerarquía de contenidos, cuyo funcionamiento se ve afectado por la ausencia de un proyecto adecuado de desarrollo previo de retículas graficas.
Es necesaria una interpretación inmediata del significado de la composición gráfica, se suele prescindir de los recursos lingüísticos o tipográficos, y se suele confiar en el empleo de pictogramas muy básicos y descriptivos.
Un proyecto multimedia o web tiene los mismos condicionantes que cualquier otro proyecto gráfico, y debe ser diseñado con el mismo cuidado.
Señaléticas
El desarrollo de señalética forma muchas veces parte de un programa amplio de diseño de imagen corporativa. Se define, entonces, el modo en que dicha imagen se debe aplicar en la señali-
28
Fotografía N° 25 Retícula de construcción de señaléticas.
Fotografía N° 25.1 Retícula de construcción de pictogramas.
Fotografía N° 24 Retícula en el ámbito del diseño web.
RETÍCULA EN EL DISEÑO WEB Y DIGITAL
29
APLICACIÓN DE LA RETÍCULA EN EL DISEÑO WEB Y DIGITAL
La retícula es una herramienta compositiva que tiene como finalidad ajustar la posición de los diferentes elementos que componen la página que estás diseñando. Gracias a su uso, dotarás a tus diseños de una estructura interna armónica y visualmente agradable. (Creativate Marketing Digital, 2023) Sin embargo, el uso de la retícula tiene otra propiedad aun más importante que mejorar la estética. Es un medio de comunicación con el desarrollador que tendrá que ocuparse de programar la web que estás diseñando.
Gracias a ella, el encargado de desarrollo web podrá plasmar una versión interactiva y navegable lo más fiel posible desde un punto de vista visual a la maqueta que has diseñado. En el diseño editorial digital la comunicación visual es muy importante, por ende, el uso de las retículas para este tipo de medios debe ser un diseño atractivo y con buena usabilidad, considerando que actualmente el diseño se ha adaptado a diferentes dispositivos móviles y las visitas a las páginas web se realizan a través de una Tablet, Laptop o Smartphone.
30
RETÍCULA RESPONSIVE
Para este tipo de diseños como sitios web y medios digitales existe el diseño web responsive o también llamado Retícula responsive aparece con la llegada de los smartphones y tablets. El diseño web adaptativo son un tipo de tendencia a la hora de diseñar páginas web.
Cuando abrimos algún contenido en un dispositivo móvil, este automáticamente exige el cambio de la estructura del diseño que posee la web este cambio es conocido como Break point. Se refiere a la forma en la se comporta una web en los distintos dispositivos y se centra en la forma con la que diseñamos la estructura de nuestra web, es una técnica muy simple que consiste en que todos los elementos se adaptan al ancho de la pantalla, lo que facilita la lectura y asimilación de las páginas web en teléfonos móviles y tablets. (Nordic, 2016)
31
Figura 26. Retícula responsive para diseño web.
CSS (Cascading Style Sheets)
Según el sitio web de Nordic, se explica que para ello usamos los media queries que se fundamentan en el y que nos sirven para dar variables a los distintos elementos de la página. Para ello se definen distintos anchos de pantalla en el css y dentro de cada tamaño se especifica cómo se va a comportar dicho elemento en ese ancho de pantalla (dispositivo). (Nordic, 2016)
Como señala, cada dispositivo posee un formato y estructura diferente, por lo tanto, su formato más grande se encontraría en 12 columnas, es decir para un, dispositivo como una computadora o laptop. Una estructura de 6 columnas para una Tablet y finalmente una de 3 columnas para teléfonos móviles.
32
“Lenguaje que maneja el diseño y presentación de las páginas web, es decir, cómo lucen cuando un usuario las visita.”
33
Figura 27. Estructura diseño web responsive de 12 columnas
Figura 27.1 Estructura diseño web responsive de 6 columnas.
Figura 27.2 Estructura diseño web responsive de 3 columnas.
La adaptación a los diferentes dispositivos ya no sólo es una recomendación para facilitar a tus lectores la utilización de tu web, sino que puede afectar a tu posicionamiento o aparición en Google, para ello existe el uso de framework o herramienta para maquetación web es en algunos casos más que una cuadrícula adaptable. Algunos ofrecen estilos de diseño, iconos y elementos gráficos. (Herrero, 2015)
A continuación se mostrará algunos Framework para Diseño Web Responsive con retículas.
34
“Conjunto de recursos y herramientas para desarrolladores de software y administración de aplicaciones o sitios web”
FRAMEWORK
960 Grid System
Es un esfuerzo por agilizar el flujo de trabajo de desarrollo web proporcionando dimensiones de uso común, basadas en un ancho de 960 píxeles. Hay dos variantes: 12 y 16 columnas, que se pueden utilizar por separado o en tándem.
CSS Wizardry-Grid
El enfoque de este sistema de cuadrícula sensible es diseñar diseños web primero para dispositivos móviles. Se pueden utilizar hasta máximo 6 columnas.
35
Figura 28 Grid Responsive 960 Grid System
Figura 28.1 Grid Responsive CSS WIZARDRY
Dead Simple-Grid
Es el más ligero de todos. Ultrasimple y sólo pesa 250 bytes. Pocas opciones e infinidad de usos. Para todos los navegadores. Este sirve igual para dispositivos móviles.
Wrdgrid
Está relacionado con 960 Grid System por lo que, si está familiarizado con este, entonces rdwgrid es una excelente alternativa, utiliza una cuadrícula CSS receptiva que utiliza la sintaxis y la filosofía de 960 Grid System.
Simple Grid
Si eres un amante de lo minimalista, entonces Simple Grid es un sistema adecuado para ti, ya que tiene como objetivo brindarte lo mínimo que necesitas para crear un diseño de cuadrícula básica. Además, 1140 px es el ancho base de Simple Grid. Con columnas fluidas, Simple Grid funciona para los dispositivos móviles.
36
Figura 28.3 Grid Responsive Wrdgrid
Figura 28.4 Grid Responsive Simple Grid
Figura 28.2 Grid Responsive Dead Simple Grid
960 GRID SYSTEM EJEMPLOS EN SITIOS WEB
Demostración de diseño de sitio web fue realizado en 960 Grid System, se utilizó un total de 12 columnas.
37
Figura 29 Diseño de sitio web Black Estate Vineyard.
Figura 29.1 Uso de retículas en diseño de sitio web Black Estate Vineyard.
Publicaciones de diseñadores donde se implementa el uso de la retícula
38
TYLER BRULÉ
ST. MORITZ
La revista decidió experimentar con la nueva publicación ST.MORIZR cuyo contenido y concepto provienen del equipo creativo del editor en jefe Tyler Brulé.
ST. MORITZ se publica una vez al año y se distribuye en varios países como Milán, Londres, Berlín, Zurich, Los Angeles, Toronto y Londres. Fue la editorial Egandin St. MoritzTourismus AG quien desarrollo el concepto general de la publicación junto con Zúrich Winkreative cuyo fundador es Tyler Brulé. Esta publicación cuenta con un diseño creado únicamente para la revista. Presenta extravagancia, artículos refrescantes e imágenes elegante, temas de la vida exclusiva, eventos en St. Moritz, actividades culturales y deportivas de la ciudad apiha. Además, la revista también presenta un recorrido por la residencia del Artista Rolf Sachs y una entrevista con la relacionista pública Karla Otto. (Freitag, 2023)
39
Figura 30 Publicación de Tyler Brulé en la revista St Moritz
Otras publicaciones de Tyler Brulé
40
Figura 30.1Portada de la revista Monocle dirigida por Tyler Brulé
Figura 30.2 Portada de la revista Wallpaper dirigida por Tyler brulé
NEVILLE BRODY
THE FACE
Una de las publicaciones más famosas de la revista The Face dirigida por Neville Brody. Este proyecto sirvió como plataforma del lanzamiento de su carrera, Brody catapulto rápidamente su carrera gracias al trabajo para Face Magazine ya que exhibía plenamente su estilo.
Las publicaciones cubrían aspectos de la cultura popular como la música y la moda, Brody logro ofrecer su filosofía y estética del diseño. Se usaron para la creación del diseño la retícula, tipos de contraste, formar y tamaños de colores para demostrar su identidad. Sin embargo, Brody no quería seguir con los ideales del diseño de las revistas con un texto estático y aburrido, es por eso que ofreció un gran contraste, proporción de jerarquía y movimiento. De aluna manera las publicaciones de Brody siempre resaltan del resto. (Anderson, 2018)
41
Figura 31 Una de las publicaciones más importantes para el editor Neville Brody en la revista The Face
Otras publicaciones de Neville Brody
42
Figura 31.1Portada de la revista The Face dirigida por Neville Brody
Figura 31.2 Portada de la revista The Face dirigida por Neville Brody
DAVID HILLMAN
The Gaurdian
El periódico The Guardian recibió un cambio drástico por el diseñador David Hillman, es posible recordar sus dos últimos rediseños ya que ejercieron gran influencia sobrepasando otras publicaciones. El primer cambio se produjo en el año 1988, agregando una nueva cabecera
alejada de las manchetas góticas (Alonso, 2018). Hillman propuso una identidad nueva basada en la modernidad de la letra Helvética bold logrando si un contraste con la refinada y clásica Garamond italic, sin mencionar el adecuado uso de las retículas que le agregan al diseño armonía.
43
Figura 32 Periódico The guardian rediseñado por David Hillman
Otras publicaciones de David Hillman
44
Figura 32.1 Publicaciones diseñadas por David Hillman
Figura 32.2 Publicaciones diseñadas por David Hillman
RODRIGO SÁNCHEZ
Metropoli
Rodrigo Sánchez comenzó en Metrópoli en el 2004 ya que el director de arte del mundo estaba muy ocupado en otros proyectos. Metrópoli llevaba cinco años en el mercado es por ello que El mundo cumplió una etapa gráfica y fue Sánchez quien se encargó en rediseñarlo (Baruch, 2011)
Rodrigo Sánchez salió a relucir aquellos posts, llegando así a realizar increíbles portadas y a obtener grandes logros.
45
Figura 33 Portada de Metropoli diseñada por Rodrigo Sánchez
Otras publicaciones de Rodrigo Sánchez
46
Figura 33.1 Portada de Metropoli diseñada por Rodrigo Sánchez
Figura 33.2 Portada de Metropoli diseñada por Rodrigo Sánchez
Jose Müller-Brockmanm
47
“El sistema de retícula es una ayuda, no una garantía”
REFERENCIAS
Arno. (12 de 12 de 2019). neetwork. Obtenido de neetwork: https://neetwork.com/quees-una-reticula-en-diseno-grafico-y-cuales-son-sus-tipos/
Desconocido. (26 de 10 de 2022). CEI. Obtenido de CEI: https://cei.es/que-es-una-reticula-en-diseno-grafico/
Eguaras, M. (12 de 07 de 2018). mariana eguaras. Obtenido de mariana eguaras: https://marianaeguaras.com/reticula-organizativa-caracteristicas-de-una-maquetacion-a-dos-columnas/
Elam, K. (16 de 08 de 2006). clickprinting. Obtenido de clickprinting: https://content. click2printsolutions.com/editor/5e9b637e-d1c7-44f3-b43e-7d92ae4029a8file.png
Escalante, P. (26 de 10 de 2018). Ruta. Obtenido de Ruta: https://3.bp.blogspot. com/-e9IlvHbdDyE/WbHNJFVVvCI/AAAAAAAAHJs/EfzcBhMC3F0vYHkRW_RIQjpSxeqT5kvGwCLcBGAs/s640/1358223815_revista-sub-subte-diseno-editorial00-22. jpg
Hernández, A. (10 de 11 de 2020). Issuu. Obtenido de Issuu: https://issuu.com/arelich99/docs/revista_20de_20dise_c3_b1o_20editor_3b3e4bf9f822aa/s/11293146
Perea, I. (04 de 05 de 2019). Ikaperea. Obtenido de Ikaperea: https://ilkaperea.com/ wp-content/uploads/2021/09/reticula-simetrica-asimetrica.jpg
Pereira, K. (26 de 11 de 2018). Citimini. Obtenido de Citimini: https://www.clickprinting.es/blog/la-ret-cula-en-el-dise-o-gr-fico-definici-n-y-usos
Alonso, R. L. (19 de Enero de 2018). Nuevo diseño del periódico The Guardian. https://periodistas-es.com/rediseno-del-periodico-the-guardian-97517.
48
Anderson, A. (06 de Abril de 2018). NC Estate University. Obtenido de https://go.distance.ncsu.edu/gd203/?p=25181
Baruch, N. (14 de Enero de 2011). Obtenido de http://visualmente.blogspot. com/2011/01/lo-mejor-del-2010-hablamos-con-el-genio.html
Desconocido. (2003). ideasondesing. Obtenido de http://ideasondesign.net/speakers/ speakers/david-hillman/
Desconocido. (22 de Junio de 2012). Gráffica. Obtenido de https://graffica.info/neville-brody/
Desconocido. (2018). sleepydays. Obtenido de https://www.sleepydays.es/2016/04/directores-arte-diseno-editorial.html
Freitag. (2 de Junio de 2023). CPmonitor. Obtenido de https://www.cpmonitor.de/news/ detail.php?rubric=News&nr=53948
Chacón, F. R. (2015). La retícula en el diseño editorial como medio de comunicación gráfica. Revista Estudios, (31), 380-393. . https://dialnet.unirioja.es/servlet/articulo?codigo=5466898
Ghinaglia, D. (2010). Taller de diseño editorial. Actas de Diseño, (8). https://ilkaperea. com/es/2019/05/04/importancia-de-la-reticula-en-diseno-grafico/ Guerrero, L. (2016). El diseño editorial. Guía para la realización de libros y revistas. Madrid: El Diseño Editorial. https://eprints.ucm.es/id/eprint/39751/1/TFM%20-%20 autor%20Leonardo%20Guerrero%20Reyes.pdf
49
@_kedsa_editorial
0934567896
kedsaeditorial@hotmail.com
50
Diseño
de Guayaquil CONTÁCTANOS
Proyecto
Editorial Universidad