Las retículas ofrecen a los diseñadores un método intuitivo de organización. Desde la regla de los tercios, que guía la composición en fotografía, hasta las filas de productos en un sitio de comercio electrónico como Amazon, las retículas proporcionan una lógica visual que nos ayuda a entender rápida y fácilmente lo que vemos. Acompáñanos a repasar la historia de las retículas, desde sus primeras encarnaciones hasta sus aplicaciones modernas en la web.
Las retículas son los bloques de construcción del orden
No hace falta mirar más allá de nuestro entorno cotidiano para ver la belleza y el equilibrio que aportan las retículas. Desde los archivadores de la oficina hasta los pasillos de un supermercado, las retículas facilitan la navegación por nuestro mundo.
Las retículas funcionan como una especie de magia geométrica que guía a los elementos visuales para que se ajusten a líneas verticales y horizontales. Los diseñadores son los magos que las manejan, aportando orden y organización a lo que de otro modo sería un caos. La alineación, el espaciado y la proporción son ingredientes fundamentales para crear una sensación visual de armonía.
Las retículas actúan como el marco oculto que guía el diseño, desde los rollos de tinta y papiro de la historia antigua hasta los píxeles del mundo cada vez más digital de hoy.
Las manos de los primeros diseñadores gráficos estaban guiadas por nociones de lo divino
Como ocurre con tantas obras culturales tempranas, las primeras obras publicadas (que se conservan) solían ser religiosas. Dibujar, escribir y encuadernar estos libros requería mucho tiempo, así que ¿por qué desperdiciar estos esfuerzos en algo que no fuera de origen divino? Las novelas románticas y los libros de autoayuda tendrían que esperar cientos de años, cuando el listón de la publicación fuera mucho, mucho más bajo.
Los protodiseñadores gráficos que producían estos textos no tenían una formación formal, pero su trabajo muestra una atención increíble a la armonía visual y una profunda conciencia del poder de las imágenes para comunicarse con un público mayoritariamente analfabeto.
En el ejemplo del Libro de Kells que aparece a continuación, creado alrededor del año 800 d.C. y que contiene los cuatro Evangelios del Nuevo Testamento, vemos tanto simetría como equilibrio. Las retículas son intuitivas a la hora de organizar la información, y estos primeros estudiosos religiosos tenían la sensibilidad innata para disponer estos textos sagrados siguiendo la gracia de estas directrices invisibles.
Podemos remontarnos aún más atrás. Los antiguos egipcios seguían lo que llamamos el Canon de las Proporciones. Las figuras representadas en sus tallas y pinturas seguían esta regla de retícula. Los egipcios basaban su canon de proporciones en el puño humano, midiendo 18 puños desde el suelo hasta la frente de una figura de pie. Sus jeroglíficos también muestran una clara disposición en retícula. ¡Imagínate lo que estos primeros creadores que trabajaban en piedra podrían haber hecho con CSS grid y flexbox!
De lo manual a lo mecánico
Los tipos móviles se desarrollaron por primera vez en China alrededor del año 1040 d.C., utilizando porcelana para sus caracteres. En Occidente, los tipos móviles de metal surgirían alrededor de 1450, y la publicación de la Biblia de Gutenberg hacia 1455 sería uno de los primeros grandes hitos de la edición.
La naturaleza del trabajo con tipos de metal hizo que las retículas fueran una necesidad.
Las imprentas permitieron la producción en masa de libros y, a diferencia de los textos religiosos hechos a mano de mucho tiempo atrás, las placas de metal que utilizaban garantizaban la uniformidad. La Biblia de Gutenberg presenta su texto en una sencilla disposición de dos columnas.
El perfeccionamiento y la (relativa) asequibilidad de las imprentas, en comparación con la producción manual, llevaron a la impresión de libros de temas no religiosos y a la creación de periódicos. Las retículas cambiaron con los avances en las tecnologías de impresión, haciendo posible realizar diseños complicados con columnas, filas, texto y fotos de tamaños variables.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
Las retículas se vuelven artísticas: la influencia de Piet Mondrian y el movimiento De Stijl
Surgido en los Países Bajos en 1917 y vigente hasta 1931, De Stijl fue un movimiento de arte moderno arraigado tanto en el minimalismo como en la abstracción. La sencillez reemplazó las complejidades del realismo con un enfoque lineal que influyó tanto en el arte como en la arquitectura. Mientras que el Art Déco se caracterizaba por el exceso, De Stijl se trataba de despojar todo hasta llegar a la esencia de la funcionalidad.
Con la ilusión de estabilidad hecha añicos tras la Primera Guerra Mundial, De Stijl ofreció una nueva promesa: la esperanza de que el orden podía restaurarse.
Piet Mondrian cofundó este movimiento junto con Theo van Doesburg. Las pinturas de Mondrian son conocidas por sus cuadrículas de líneas rectas y cuadrados de color, que resultan sencillos pero casi misteriosamente cautivadores.
Siguiendo esta adhesión a la sencillez, trabajó con una paleta de colores básica que incluía amarillo, azul y rojo, además de gris, negro y blanco. Esta ecuación de 3 colores primarios y 3 valores primarios dio lugar a obras basadas en la contención, pero marcadas por una sofisticación experimental.
Los bloques de colores apilados de Mondrian son fáciles de identificar desde lejos y su influencia es igual de evidente en el diseño web moderno. Y con herramientas como CSS grid, crear tus propios diseños para sitios web inspirados en Mondrian es un proceso sencillo.
Comercialismo y la cuadrícula: el marketing en la década de 1940
Tras el fin de la Segunda Guerra Mundial y la derrota de un mal formidable, el optimismo reemplazó al miedo y surgió un nuevo consumismo. La publicidad se aferró a esta exuberancia, junto con un rápido ritmo de expansión económica.
Considerado por muchos como uno de los padres del marketing moderno, Paul Rand implementó estrategias de marketing y un sentido de marca que no se habían utilizado antes. Y las cuadrículas desempeñaron un papel fundamental en esta nueva forma de hacer publicidad.
Las cuadrículas dieron forma a las cajas de jabón, los anuncios en revistas y los comerciales de televisión. Incluso se utilizaron para crear hileras ordenadas de casas en los suburbios emergentes. Las cuadrículas estaban en todas partes, aportando orden y eficiencia a este nuevo consumismo.
Cuadrículas y modernismo
Las décadas de 1940 y 1950 dieron lugar al Movimiento Suizo, que ha moldeado gran parte del diseño gráfico y web. El Movimiento Suizo se liberó de las directrices rígidas, pero las cuadrículas eran lo que flotaba justo debajo de sus diseños, a menudo asimétricos.
Se enfatizaron los componentes más emocionales del diseño. Se prestó especial atención a cómo la tipografía puede dar forma al significado, eliminando la ornamentación de las serifas en favor de fuentes que presentan el texto sin estilizaciones. De esta filosofía utilitaria surgió la fuente universalmente utilizada y a veces despreciada: Helvetica.
Del movimiento de Diseño Suizo surgiría uno de los mayores defensores de la cuadrícula: Emil Ruder, cuyo libro Typographie: A Manual of Design, defiende las bondades de las cuadrículas en un diseño de tres columnas, donde cada una contiene una traducción diferente de su texto.
Joseph Müller-Brockmann fue otro miembro importante del Movimiento Suizo que puso las cuadrículas en primer plano. Su trabajo en carteles, así como sus diseños de libros, estaban alineados mediante cuadrículas, con una estética visual inspirada en el movimiento artístico Bauhaus y descendiente directa de De Stijl.
Liberarse de las cuadrículas con el poder de las computadoras
Antes de las computadoras, la mesa de dibujo de un diseñador gráfico estaba llena de cuchillas X-acto, cemento de caucho y pinzas. El proceso de colocar tipografía y elementos visuales era una experiencia física. Los errores no se podían corregir con un comando de teclado.
La llegada de las computadoras marcó el inicio de un enfoque totalmente nuevo para el diseño. Se podía reemplazar la tipografía, reducir o ampliar los bordes y arrastrar elementos de un diseño a diferentes espacios, todo al instante. Y con esta facilidad surgió un nuevo apetito por la experimentación. Al liberarse de las limitaciones de los medios físicos, el riesgo de probar algo nuevo era mínimo.
La introducción de las computadoras en el diseño dio lugar al movimiento de Diseño Gráfico de California, que surgió en 1975. Este movimiento aportó sensibilidades vanguardistas que solo eran posibles con la ayuda de computadoras. Estas han ayudado a los diseñadores a dar forma a sus visiones creativas con un proceso menos laborioso. Hoy en día, es difícil imaginar un mundo sin su asistencia digital.
Las retículas en el diseño web moderno
Las retículas guían casi todo. Aunque su esencia como marco de líneas verticales y horizontales permanece inalterada, pueden utilizarse de múltiples maneras.
Retículas de línea base: Las retículas sirven para aportar coherencia, y las de línea base proporcionan uniformidad a la alineación vertical de elementos como el texto. Piensa en las páginas de una agenda rayada. Cada línea forma parte de una retícula base mayor que te permite anotar cosas de forma organizada en lugar de crear un desorden disperso y caótico.
En el diseño web, estas líneas base no tienen por qué ser líneas sólidas, sino que suelen ser guías transparentes para alinear elementos.
Retículas de manuscrito: Se trata simplemente de una única columna grande que contiene tanto el texto como las imágenes. Esta entrada de blog que estás leyendo sigue una retícula de manuscrito.
Retículas multicolumna: Son comunes en el diseño web. Estas retículas organizan el contenido en bloques verticales. Están presentes en todas partes, desde los diseños de encabezado estándar de dos columnas hasta los proyectos destacados en un portafolio de diseño.
Retícula modular: Las retículas modulares presentan una división organizada de bloques horizontales, con guías que los dividen verticalmente. Mencionamos antes la Escuela Suiza, y el uso de retículas modulares para alinear elementos visuales en pósteres era una práctica común para ellos.
CSS grid ofrece a los diseñadores web la capacidad de fijar elementos tanto en el eje vertical como en el horizontal de casi cualquier forma que puedan imaginar.
Retículas irregulares: Este estilo subvierte las líneas estrictas de las retículas regulares. Superponer elementos, inclinar objetos en posiciones irregulares y crear formas únicas puede romper la monotonía de estas retículas sin que el diseño se convierta en un desastre caótico.
CSS grid también es una herramienta excelente para aportar un poco de variedad al diseño, haciendo que las retículas irregulares sean fáciles de lograr.
Este ejemplo de la Momentum Conference, creado en Webflow, presenta elementos visuales superpuestos y texto que, aun así, siguen una organización lógica, pero sin estar sujetos a una retícula tradicional.
Las retículas nunca pasarán de moda
Desde la prehistoria hasta el siglo XXI, las retículas han guiado gran parte del diseño. Permiten un enfoque lineal, donde los elementos pueden organizarse fácilmente en una estructura visualmente agradable. Ya sea que sigas un diseño tradicional o lo subviertas para adaptarlo a tu propia sensibilidad artística, el resultado son diseños fáciles de entender y sencillos de navegar.
,_1447_-_Korean_Culture_Museum,_Incheon_Airport,_Seoul,_South_Korea_-_DSC00793.JPG){kind=link}
