Qué es una grilla modular en diseño gráfico. Diseño de logotipos: ¿es necesaria una grilla modular? La historia de cómo empezó todo.

Rejilla modular es un sistema para organizar objetos en el espacio, basado en filas y columnas de un tamaño determinado y estrictamente especificado. Las celdas pueden contener unidades de contenido: bloques de texto, encabezados, marcos e imágenes.

Las cuadrículas se pueden encontrar no sólo en el diseño de información, sino también en arquitectura, interiores y planificación urbana. En todas estas áreas, las retículas se construyen según principios similares relacionados con el deseo de traer orden y armonía al espacio que se está delineando.

Observe uno de los bocetos de 1807 del desarrollo de Manhattan, que sigue una estricta cuadrícula de calles que van de oeste a este y de norte a sur.

¿Por qué se necesitan mallas?

Inicialmente, la malla se utilizó en el negocio de los periódicos para aumentar la eficiencia. Las hojas de diseño permitieron reducir el costo de mantener tipógrafos a tiempo completo, estandarizar la apariencia de las páginas y ahorrar tiempo a los propios "artistas del diseño". Pronto, las hojas de diseño fueron reemplazadas por cuadrículas modulares más flexibles.

Siguiendo una nueva tendencia, a principios de la década de 1960, el diseñador gráfico Peter Palazzo actualizó el diseño del periódico New York Herald Tribune. En 1966, la editora artística Janet Collins introdujo un nuevo diseño para el Times de Londres. Ambos cambios mostraron a la industria que un estilo de diseño consistente mejora la calidad de la interacción del lector con la publicación. Los editores de periódicos y revistas rápidamente se dieron cuenta de la necesidad de las cuadrículas y comenzaron a aplicarlas en su práctica.

Como en la época de los periódicos, en la era digital, las cuadrículas correctamente aplicadas ayudan a mantener la atención del lector, mejoran la calidad de la percepción del texto y, en general, mejoran la experiencia de su interacción con el material. En el diseño de medios actual, la cuadrícula da orden y coherencia a la información. Es responsable de estructurar el contenido de los artículos individuales y de la publicación en su conjunto.

Joseph Müller-Brockmann en su manual “Sistemas modulares en diseño gráfico” escribe sobre cuadrículas como esta:

“Al estructurar los planos y el espacio mediante una cuadrícula modular, el diseñador es capaz de organizar textos, fotografías e imágenes gráficas según los principios de objetividad y funcionalidad.<…>El diseño organizado lógicamente respalda la credibilidad de la información y atrae al lector hacia ella”.

¿Qué tipos de mallas existen?

Hay muchos tipos y configuraciones de cuadrículas: desde “celdas” primitivas, como en un cuaderno escolar, hasta estructuras complejas con diferentes distancias entre horizontales y verticales.

Hemos recopilado las muestras más comunes y ya "clásicas", cuyo conocimiento le ayudará a comprender mejor el diseño modular:

Cuadrícula cuadrada

La cuadrícula más simple, que formaba la base del sistema modular, estaba formada por cuadrados y parecía una mesa normal. Comenzó a utilizarse a finales del primer cuarto del siglo XX. Los diseñadores tipográficos de Zúrich y Basilea lo perfeccionaron en los años de la posguerra, lo que coincidió con un aumento del interés por la helvética y tipos de letra similares, dando lugar a la escuela de la "tipografía suiza".

Por ejemplo: Robert Büchler, 1914
Fuente: PensamientoForma

Rejillas Max Bill

La primera experiencia con el uso de cuadrículas en libros fue el sistema desarrollado por Max Bill para el libro “Die Neue Architektur”. En este libro, publicado en 1940, Alfred Roth utilizó la división de la página en nueve módulos horizontales. Permitieron organizar ilustraciones libremente y colocarles texto en tres idiomas. Unos años antes, basándose en las ideas de la "nueva tipografía" de la Bauhaus, Bill utilizó una cuadrícula de seis módulos en su famoso cartel "Negerkunst" creado para una exposición de arte rupestre sudafricano en 1931.

No hace mucho, mientras trabajaba en otra lección para el curso “Diseño Gráfico. Basics” (cuyo lanzamiento está previsto para principios de enero), me di cuenta de que el tema del uso y la construcción de redes modulares rara vez se trata.

Hay bastante información sobre qué es una red modular y para qué sirve, pero muy poca sobre cómo construirla y qué reglas seguir. Por eso, decidí que el post de hoy tendrá un enfoque práctico y tratará de cubrir este tema de la forma más clara posible.

Entonces, una cuadrícula modular es un diseño para su trabajo, una forma de sistematizar y alinear elementos. Es la columna vertebral de la solución compositiva y sirve como medio para organizar no solo los componentes de la obra, sino también el espacio libre.

La red puede ayudarnos a resolver nuestros problemas y ser parte de la solución. El ejemplo más llamativo es la interfaz de Windows Phone:

Para aquellos que necesiten una parte teórica más detallada de la pregunta, existe la oportunidad de utilizar la búsqueda o suscribirse al curso y recibir la carta correspondiente, donde esto se describe con suficiente detalle, y pasamos directamente a la práctica.

Primero debemos decidir por qué necesitamos una rejilla modular.¿Estamos creando un sitio web, diseñando una revista, la portada de un libro o algo más? Dependiendo del tipo de actividad, se deben identificar los principales elementos estructurales. A menudo, el tamaño del módulo está determinado por uno de estos elementos, por ejemplo, un logotipo, la posición del menú en el sitio, etc. En diseño, el tamaño mínimo está determinado por el tamaño de fuente que sea legible en una situación particular.

Para mayor claridad, daré un ejemplo de una cuadrícula modular de una publicación periódica impresa. Si estamos maquetando una revista, entonces los elementos estructurales pueden ser título, subtítulo, texto e ilustraciones. Normalmente, las revistas contienen diferentes tipos de artículos, donde el papel de la parte del texto puede cambiar. En tales casos, para hacer la cuadrícula más flexible, utilizo de 5 a 7 módulos (horizontalmente):

La combinación de módulos se puede realizar en casi cualquier formato que le resulte conveniente:

De hecho, cuanto más pequeño sea el módulo de malla, más flexible será sin perder proporcionalidad. Pero a muchos les resulta inconveniente trabajar con rejillas si el tamaño de su módulo tiende al tamaño de la distancia entre los módulos. Una cuadrícula de este tipo deslumbra la vista y es fácil confundirse con ella, especialmente para un principiante:

Las opciones para construir una red modular pueden ser muchas; aquí usted está limitado únicamente por los deseos del cliente y su imaginación. No olvides que las rejillas modulares no tienen por qué ser verticales; también se pueden construir en diagonal, con un determinado ángulo de inclinación, etc.

En el caso de los sitios web, se considera que el número óptimo de columnas es 12, 16 y 24, lo que se debe a las peculiaridades del diseño del sitio web y al uso de las capacidades del framework. Considero que la altura mínima de un módulo para la web es de 20px, lo cual se debe al tamaño de fuente óptimo (12-14pt) y a su legibilidad.

Ahora es el momento de hablar del aspecto técnico del tema.

Creando una grilla modular en

  • La primera y más sencilla forma es activar la cuadrícula del propio editor gráfico (Ctrl+’) y, guiado por ella, configurar las guías. Llevará mucho tiempo y con una alta probabilidad de errores.
  • Instale complementos especiales para Photoshop ( GuíaGuía , Patrón de cuadrícula modular , Creador de cuadrículas 2).
  • Descargue una plantilla ya preparada de uno de los generadores de grid gratuitos, como 960.gs, Golden Grid, 1Kb Grid, Simple Grid. Establezca los parámetros deseados y haga clic en "GENERAR".

De hecho, existe una gran cantidad de servicios para crear redes, incluidos sitios de "caucho". Se pueden encontrar muy fácilmente mediante la búsqueda, por lo que no veo ningún sentido en enumerarlos todos en el artículo. Estos servicios son una excelente ayuda para los principiantes.

Creando una grilla modular en

A diferencia de Photoshop, InDesign tiene sus propias herramientas de creación de cuadrículas modulares. en el menú Disposición necesitas seleccionar un elemento Crear guías e ingrese los parámetros que necesita en el cuadro de diálogo:

Esta herramienta tiene configuraciones bastante flexibles, por lo que crear la estructura deseada no será difícil. La mejor manera de crear una malla es usar Página maestra, para no repetir el procedimiento para cada página.

Creando una grilla modular en

  • El primer método (similar a Photoshop) consiste en activar la cuadrícula del propio editor gráfico y, guiado por ella, configurar las guías. También es posible hacer una guía de cualquier forma, lo que ayudará a organizar una cuadrícula inclinada.
  • Descargue plantillas de cuadrícula listas para usar. Dónde: la búsqueda te lo dirá. Puedes encontrar muchos de ellos en Internet.

Espero que el tema de las rejillas modulares te haya quedado más cerca y más claro. Asegúrate de practicar su construcción. Entiendo perfectamente que se trata de una actividad muy tediosa, pero merece la pena. La construcción de cuadrículas desarrolla su sentido de la proporción y le permite ver mejor cualquier imprecisión de alineación en el futuro.

Todo lo que nos rodea tiene sus propias proporciones. Cuando éramos niños, la caricatura "38 loros" nos enseñó que todo se puede dividir en partes iguales (la longitud de la boa constrictor constaba de 38 loros). También todos sabemos que la altura de una persona es igual a siete de sus cabezas, un centímetro consta de diez milímetros, un metro consta de cien centímetros, etc. Así, un loro de dibujos animados, una cabeza humana, un milímetro y un centímetro son módulos.

De todo esto podemos entender que un módulo es una unidad convencional, un paso en el ritmo de la red. Y la cuadrícula en sí es un sistema de proporciones.

¿Cómo nos ayudará esta rejilla modular? En primer lugar, acelerará el trabajo, porque no tendremos que dedicar mucho tiempo a intentar disponer todos los elementos de forma armoniosa. En segundo lugar, con la ayuda de la cuadrícula podemos entender qué punto necesitamos usar y qué tamaño debe tener cada bloque. En general, una grilla modular es un marco que facilita enormemente la construcción de un sitio web.

Veamos qué son las mallas.

1. El tipo más simple es una cuadrícula de bloques. Es decir, hace marcas aproximadas, dividiendo el área en bloques.


Cuadrícula de bloques

3. La rejilla modular no sólo tiene división vertical, sino también división horizontal. Así, lo que se obtiene en las intersecciones de líneas es el módulo.


4. También hay una cuadrícula jerárquica, cuyos bloques se colocan de forma intuitiva y no siguen ningún patrón.


Entonces, cómo crear una cuadrícula modular.

1. Primero, debemos comprender qué función deberá realizar nuestro sitio, identificar su estructura y composición de páginas. Luego determinamos qué páginas serán las más importantes y comenzaremos a trabajar con ellas. Para ellos, crearemos una lista de funciones y las ordenaremos por prioridad.

Debemos describir cada bloque de funcionalidad y detallarlo hasta el más mínimo detalle. El resultado debería ser una lista en la que los bloques y sus elementos estén listados por nivel. Por lo tanto, ahora tenemos rompecabezas sacados de la caja y todo lo que tenemos que hacer es ensamblarlos hasta obtener una imagen completa.

3. Comenzamos a construir la malla determinando el tamaño del área de trabajo. A continuación necesitamos hacer la cuadrícula de fuentes. Para hacer esto, seleccione la altura de la fila, que debe ser la misma para todo el diseño. En elementos que tengan un tamaño de fuente diferente al tamaño de fuente del texto principal, el interlineado debe ser un múltiplo de nuestra altura de línea.

De esta forma obtenemos la base de nuestra futura malla. Todo el texto se basará en esta base.

4. Ahora debemos decidir qué tan ancho será nuestro módulo. Aquí podemos partir del ancho de cualquier elemento permanente. Si tienes la tarea de colocar algunos elementos idénticos a lo ancho de la página, entonces todo se vuelve aún más fácil, porque ya conoces sus dimensiones.

Por conveniencia, debemos determinar cuál será la distancia entre los módulos. Debe ser igual al menos a la altura de una línea del párrafo anterior.

Hay una advertencia: es necesario elegir los tamaños de módulo correctos, porque si son demasiado grandes, la flexibilidad de la malla desaparecerá, y si son pequeños, la malla simplemente se perderá.

5. La división horizontal es bastante sencilla de hacer. Su altura debe ser múltiplo de la altura de nuestra línea. Y la cantidad de líneas que insertes en una división depende de tu boceto.

Hablemos sobre la mejor manera de organizar los elementos de diseño en la página.

Uno de los errores habituales de los diseñadores novatos es sobresaturar la composición con todo tipo de elementos y colocarlos demasiado cerca unos de otros.

Intentan encajar demasiada información en un espacio pequeño. recuerda que el espacio libre es tu buen amigo. Hace que sea más fácil para su audiencia leer su material. El espacio utilizado correctamente hace que su proyecto sea más elegante y más fácil de entender.

La estrategia de composición básica para tu diseño debe comenzar con el diseño.. Si no desea que su trabajo parezca caótico, debe sistematizar toda la información visual. Aquí es donde viene en nuestra ayuda. rejilla modular o, para decirlo de otra manera, marcado para organizar elementos en una página. En el diseño web, el papel de una cuadrícula modular lo desempeña una mesa.

.

A continuación se muestran algunos ejemplos de rejillas modulares.
Observe lo variados y únicos que pueden ser.

Para demostrar la necesidad de utilizar una rejilla modular, aquí presento tres opciones para la misma operación.
Las dos primeras opciones tienen una rejilla modular claramente diseñada y la última no.


Ejemplo 1


Ejemplo 2


Ejemplo 3


Mire atentamente estos ejemplos y, como dicen, sienta la diferencia. Cuando los elementos de diseño se organizan de acuerdo con una cuadrícula modular, hay una sensación de orden y significado en la composición. Pero en la última versión, sin una cuadrícula modular, los elementos están dispuestos de forma caótica y, en consecuencia, violan los principios de alineación, unidad y correspondencia.

La composición de las dos primeras imágenes utiliza una cuadrícula modular tradicional. En la primera imagen se ubican las líneas. horizontales y verticales a intervalos regulares.

La única diferencia entre la segunda opción es que las líneas están ubicadas oblicuamente. Todos los elementos de la composición están ligados a estas líneas inclinadas.

Pero en el último ejemplo, en general no hay rejilla modular. Los intervalos entre elementos gráficos son completamente aleatorios y por tanto no hay sensación de unidad en la composición.

Mi consejo: Utilice siempre una rejilla modular.¡Para construir una composición hermosa y competente (bueno, por supuesto, si no te dedicas al arte en su forma pura, donde, como sabes, no hay reglas)!

Espero tu pregunta: ¿Tú, Bob, realmente construyes una red modular cada vez antes de empezar a trabajar? ¿Y no eres demasiado vago?

Para ser honesto, no siempre, aunque lo intento. Pero en las etapas iniciales de mi trabajo de diseño, no descuidé esta importante regla y construí concienzudamente una cuadrícula modular. A medida que adquiera experiencia, aprenderá a trabajar con una cuadrícula imaginaria sin tener que dibujarla en la página, y cualquier desviación del diseño previsto será visible a sus ojos.

Sin embargo, durante el trabajo, si es necesario, es posible alterar la estructura de la red modular. Después de todo, no somos matemáticos. Esta disrupción otorga a veces a la obra ligereza y libertad de expresión. Sólo debemos recordar que esta libertad no debe destruir la estructura general de la composición.


Entonces, ¿qué ventajas nos aporta una rejilla modular?


1. La rejilla modular nos ayuda a respetar uno de los principios básicos del diseño: el principio de alineación. Es posible que los elementos individuales no estén unidos a nada, pero es deseable que los elementos de un grupo estén alineados entre sí y que el grupo de elementos esté alineado con otros grupos.

2. La rejilla modular ayuda a mantener un espacio uniforme entre los elementos.

3. La cuadrícula modular ayuda a utilizar racionalmente el espacio libre, lo que facilita la lectura del texto y la percepción de toda la composición.


Ahora un ejemplo de la práctica.


Imagine que su cliente le pide que cree un folleto de 50 páginas. Haces tu trabajo de acuerdo con todas las reglas del buen diseño. Las páginas del folleto tienen una bonita cuadrícula modular, mucho espacio libre y son fáciles y agradables de leer.

Pero el cliente, al no comprender tal estética, solo ve espacio libre y, como no quiere pagar por papel en blanco, pide meter allí otras 10 páginas. ¿Cómo entonces?

Intente explicarle al cliente que las páginas repletas de contenido no son atractivas y difíciles de leer, y que es poco probable que la audiencia quiera dedicar tiempo a leerlas.

Si el cliente no entiende esto, invítelo a mostrar ambas opciones a sus amigos y pedirles su opinión. Si nada puede razonar con él, entonces, por desgracia, no te queda más remedio que satisfacer su deseo. Por cierto, ya hablé de una situación similar en mi artículo ""



En conclusión, te daré algunos consejos.

¡No sobrecargues tu diseño! Los espacios en blanco y los márgenes de una página son importantes y necesarios para la percepción visual. Recuerde que el objetivo de un buen diseño es transmitir rápidamente la información necesaria, por lo que el diseño no debe dificultar, sino facilitar la absorción de esta información.

Si la página está sobrecargada de información y no hay una división clara de los elementos en grupos, al espectador le resultará difícil concentrarse en lo principal y, muy probablemente, no tendrá ganas de comprender toda esta confusión.

Por el contrario, cuando el diseño se basa en un pequeño número de elementos que tienen una estructura compositiva clara, resultará fácil y cómodo para el espectador, que absorberá rápidamente la información necesaria.


¿Sobre qué guardan silencio las imprentas?

domingo 22 de noviembre de 2015 Rejilla modular: una herramienta para el diseño inteligente

¿Qué es una rejilla modular?

Este es el esqueleto invisible de su diseño: un sistema de guías horizontales y verticales (y a veces diagonales y arqueadas) que ayudan a orientar y coordinar los elementos individuales de la composición.

¿De qué sirve?

En primer lugar, una retícula modular aporta orden, integridad y conexión de todas sus partes al diseño. Permite organizar racionalmente cualquier espacio gráfico, ya sea membrete, tarjeta de presentación, cartel, libro, sitio web, interior, manteniendo la unidad de estilo en todos sus elementos.

Y en segundo lugar, acelera notablemente el cumplimiento de los pedidos porque, como ve, trabajar según una plantilla es mucho más fácil que reinventar la rueda cada vez.

El hombre ha intentado durante mucho tiempo comprender la naturaleza de la belleza, "descomponerla" en componentes separados, "verificar la armonía con el álgebra". El ejemplo más antiguo del uso de una cuadrícula modular es el canon medieval, que utilizaban los escribas para marcar las páginas de los libros.

Difusión de un manuscrito latino. 1555

Los constructivistas de los años 20 sentaron las bases del diseño modular moderno.

Portada de revista. Diseño de El Lissitzky. 1922

Póster. Diseño de Herbert Bayer. 1926

Sin embargo, sus construcciones abstractas no fueron inmediatamente reconocidas como un método con su propio sistema de reglas y patrones. No fue hasta 1940 que el diseñador suizo Max Bill utilizó por primera vez una cuadrícula modular en el diseño de libros.

Encuadernación de libros. Diseño de Max Bill. 1944

Póster. Diseño de Max Bill. 1945

En 1961, su compatriota Josef Müller-Brockmann introdujo los primeros términos del enfoque modular del diseño y publicó 28 ejemplos de rejillas que él mismo desarrolló. Fue la escuela suiza de diseño, extremadamente funcional y lapidaria, la que mejoró y presentó al mundo esta herramienta: la retícula modular.

Páginas de cuadrícula y libro. Diseño de Josef Müller-Brockmann

Póster. Diseño de Josef Müller-Brockmann. 1959

Póster. Diseño de Josef Müller-Brockmann. 1972

Hay que decir que los diseñadores rusos no se quedan atrás de sus colegas occidentales en el diseño modular. Ya en la década de 1960, apareció en la Unión Soviética un grupo de personas de ideas afines que utilizaban los principios del diseño estricto de las publicaciones impresas (más tarde Sergei Serov llamó en broma a esta escuela "Suiza soviética"). Los orígenes del enfoque modular doméstico del diseño fueron autoridades hoy reconocidas como Maxim Zhukov, Mikhail Anikst y Arkady Troyanker.

Encuadernación de libros. Diseño de Maxim Zhukov y Arkady Troyanker. 1970

Difusión del libro. Diseño de Mikhail Anikst. 1979

Sobrecubierta. Diseño de Maxim Zhukov. 1977

En tan solo un par de décadas se ha acumulado una experiencia única y se han creado obras maestras del diseño gráfico. A pesar de esto, hoy, como hace 30 o 40 años, la red modular en nuestro país parece ser promovida sólo por entusiastas individuales.

Portada del folleto. Diseño de Evgeny Grigoriev. San Petersburgo, 2009

A continuación se muestran algunos ejemplos de un enfoque modular del diseño del portafolio de nuestra editorial.

Para el catálogo del artista Evgeny Zhurov se eligió el clásico formato de libro en cuarto con una relación de aspecto de 3 a 4. Estas proporciones formaron la base de la cuadrícula modular.

Para orientar las imágenes de las pinturas en la página, se resaltó una línea horizontal, dividiendo la página verticalmente en una proporción de 1 a 3. Durante el diseño, cada imagen se colocó de manera que quedara dividida verticalmente por esta línea en la misma relación.

Esta técnica hizo posible combinar fácil y armoniosamente entre sí pinturas de cualquier formato, tanto panorámicas, alargadas horizontalmente como altas, alargadas verticalmente. Al hojear el catálogo, la pintoresca serie adquiere un ritmo vivo y palpitante.

No hace falta decir que la composición de la portada y los títulos, el conjunto de artículos introductorios y datos de salida, y la posición de los números de columna en los márgenes exteriores de las páginas también se construyeron teniendo en cuenta esta línea horizontal.

Sólo agreguemos que los pies de foto de las pinturas, por el contrario, se hicieron deliberadamente estáticos. Están ubicados en lugares estrictamente definidos y viven como separados, sin distraer la atención del espectador de las imágenes.

La apariencia de nuestro catálogo de calendarios temáticos se inspiró en el propio material. Este catálogo está destinado a esa categoría de clientes que desean encargar un calendario corporativo. Cada tema está representado por 12 imágenes (según el número de meses del año) y se coloca en una página separada. La cuadrícula modular del folleto resultó ser tan simple, clara y abierta que no es necesario presentarla aquí por separado.

El diseño de las postales del conjunto “Dinastía Romanov” (Museos del Kremlin de Moscú), a pesar de la marcada composición asimétrica, se basó enteramente en la división constante del plano según la proporción áurea. La combinación de principios clásicos y probados con tendencias modernas a veces puede conducir a resultados interesantes.

El diseño modular es simplemente insustituible al diseñar publicaciones seriadas. Una cuadrícula una vez construida pero bien pensada facilitará enormemente el trabajo en nuevos números de un libro, revista, folleto o periódico. Al cambiar libremente el texto, las imágenes y el color, puede lograr fácilmente un diseño fácilmente reconocible e identificable con precisión dentro de una serie.

Sin embargo, es necesario recordar que el uso de una red modular no es garantía del 100% de un diseño exitoso. Usando la misma plantilla, puedes crear tanto una obra de arte como una artesanía mediocre. No importa cuán precisa, sutil y versátil sea una herramienta de malla modular, es solo una herramienta que permanecerá muerta sin imaginación y creatividad.

Además, a la hora de iniciarse en el diseño modular, es útil que el diseñador tenga al menos un conocimiento general de proporciones, forma, color, contraste, ritmo…

Pero más sobre esto en nuestros próximos artículos.

Literatura para la autoeducación:
1. Laptev V. Cuadrículas modulares: Diseño de publicaciones multipágina. M.: RIP-holding, 2007.
2. Samara T. Creando y rompiendo la red. M.: RIP-holding, 2005.
3. Hurlbert A. Grid: Un sistema modular para el diseño y producción de periódicos, revistas y libros. M.: Libro, 1984.
4. Bosshard H. R. Der typografische Raster. Zurich: Niggli, 2000.
5. Elam K., Elsener R. Gestaltungsraster: Ordnungssysteme für Schrift. Nueva York: Princeton Architectural Press, 2006.
6. Miller-Brockmann J. Sistemas grid en diseños gráficos. Zúrich: Niggli, 1981.



 Arriba