Romper la cuadrícula sin romper el diseño

La simetría es segura. Es cómodo, no amenazante y estéticamente agradable. También puede resultar muy aburrido. El uso de «equilibrio asimétrico» puede hacer que las cosas sean más interesantes sin dejar de adherirse a una cuadrícula para mantener las cosas ordenadas. En diseño, como en tantas otras cosas, cuanto mayores son los riesgos, mayores son las recompensas potenciales.

La simetría se ha considerado durante mucho tiempo algo bueno precisamente porque es estéticamente agradable y no desafía a la vista. La palabra simetría se deriva de componentes griegos que se traducen como «con medida»; la simetría se trata de proporción y equilibrio, semejanza cualitativa en oposición a igualdad idéntica. La asimetría sería, por tanto, un desequilibrio o una proporción, un desnivel.

Sin embargo, en un contexto visual, la mayoría de nosotros, incluso si no podemos recordar haber tomado lecciones básicas de geometría (sin importar lo que había en ellas) pensamos en la simetría con una definición más restringida.

-Diccionario Collins

Un ejemplo muy famoso de simetría casi perfecta son las tarjetas de prueba de Rorschach. Su simetría bilateral fue un aspecto deliberado e importante de su apariencia: Hermann Rorschach afirmó que muchos pacientes rechazaban las imágenes asimétricas. Si bien las razones de esto pueden ser un área de estudio interesante en sí misma, es un artículo completamente diferente. Todo lo que necesitamos saber es: Simetría cómoda; La asimetría no es tan cómoda.

El equilibrio asimétrico, en un contexto de diseño visual, es donde dos o más elementos a cada lado de un plano son diferentes pero tienen el mismo peso visual. Un ejemplo simple sería una imagen en un lado con un bloque de texto en el otro, dimensionado y diseñado para equilibrarse entre sí.

Las dos herramientas que utilizamos para crear simetría y equilibrio asimétrico en un diseño son la cuadrícula y nuestro ojo. La cuadrícula, como la conocemos, es en gran medida una invención de mediados del siglo XX, pero de la misma manera que la gravedad ya existía mucho antes de que una manzana cayera sobre la cabeza de Isaac Newton, por lo que podemos ver evidencia de un diseño basado en cuadrículas en algunos de los más antiguos que han sobrevivido. manuscritos que tenemos: Los Rollos del Mar Muerto están escritos en columnas uniformes con márgenes y encabezamientos regulares; el cuidado puesto en la ubicación de la ilustración y el texto en los manuscritos medievales tempranos, como el Libro de Kells del siglo VIII, indica el uso de una cuadrícula.

La cuadrícula es la base del diseño gráfico moderno, y lo ha sido durante siglos de una forma u otra, mucho antes de que se acuñara el término diseño gráfico. La cuadrícula asegura el equilibrio en un diseño al dividir la ‘página’ en secciones iguales o proporcionales.

Si bien la cuadrícula es objetiva, dividiendo el espacio en función de proporciones matemáticas exactas, el ojo humano es subjetivo. Hay algunas pautas o reglas que se aplican a la gran mayoría, como la longitud de línea de x caracteres según el tamaño del dispositivo, el contraste de color legible, todo en mayúsculas es un poco agresivo, etc. Pero cómo se ve y se recibe un diseño en particular puede variar mucho.

Estas variaciones van desde las grandes (como los diferentes significados de los colores en todo el mundo) hasta las variaciones individuales del gusto personal.

Aquí es donde un diseñador necesita tener confianza; El coraje para reconocer que no a todos les va a encantar cada diseño que haces, y hacerlo de todos modos porque funciona. El conocimiento y la experiencia ayudan, comprender por qué algo no funciona significa que comprende cómo solucionarlo.

A veces, aunque sepa que un elemento está posicionado correctamente, o que algún interlineado es proporcionalmente preciso de acuerdo con su cuadrícula, de alguna manera se ve mal. Así que lo arreglas a ojo. Haces ajustes hasta que se vea bien, hasta que se sienta bien.

Nuestra respuesta inmediata al diseño es emocional, las respuestas intelectuales y analíticas siguen después. Por lo tanto, debemos recordar que la cuadrícula es una herramienta que nos ayuda, pero no tenemos que estar limitados por ella.

Entonces, ¿cómo podemos romper la cuadrícula, sin dejar de mantener un diseño coherente?

Usando mampostería

Probablemente la técnica más utilizada es un diseño de mampostería, como la popularizada por Pinterest. La página está dividida en columnas regulares a lo largo del plano horizontal, pero los bloques de contenido dentro de esas columnas tienen diferentes alturas. A veces, las columnas pueden tener un ancho doble o incluso triple, o un elemento individual puede ocupar dos o más anchos de columna, pero siempre será divisible por el ancho de una sola columna.

Esta técnica se puede aplicar al revés, como en bloques de contenido de diferentes anchos dispuestos en filas de altura regular, pero se hace más comúnmente como columnas pares. Por supuesto, un diseño de mampostería puede ser completamente regular. Si el plano vertical está dividido en filas de igual altura y la altura de cada bloque de contenido es un múltiplo de la altura de esa fila, entonces tiene un diseño de mampostería que se adhiere a la cuadrícula.

Es habitual que el espaciado vertical entre elementos sea siempre el mismo y coincida con el espaciado horizontal entre columnas. Si sus bloques de contenido contienen texto, asegurarse de que la altura del bloque sea consistente con su cuadrícula de línea de base puede ayudar con la coherencia visual.

Alliance Graphique Internationale

Alliance Graphique Internationale es un ejemplo clásico de un diseño de mampostería. Las imágenes tienen el mismo ancho, pero diferentes alturas, mientras que los márgenes verticales entre las imágenes coinciden con los márgenes de las columnas. Todas las imágenes llenan el ancho de una sola columna, lo que las hace muy receptivas. Un toque adicional es que las imágenes se cargan de forma aleatoria a medida que se desplaza hacia abajo.

L’ÉLOI

L’ÉLOIEl diseño tiene un contenido de doble ancho y utiliza un tamaño de canalón más grande, lo que aumenta la impresión de aleatoriedad. El mayor espacio entre elementos enfatiza la diferencia en sus alturas y posición vertical.

Grafik

GrafikEl diseño lleva las cosas un poco más lejos de nuevo. Al igual que los dos ejemplos anteriores, la página se divide en columnas iguales, y el número de columnas depende del ancho de la ventana gráfica. Pero no hay un espaciado horizontal o vertical definido entre los elementos, y las imágenes no tienen el tamaño suficiente para llenar un ancho de columna completo. Los anchos de columna son los mismos, pero el espacio horizontal entre los elementos de cada columna depende del tamaño de los elementos y del tamaño de la ventana del navegador. El resultado se siente interesante y aleatorio, mientras que al mismo tiempo tiene un orden tranquilizador del que somos conscientes subconscientemente.

Además, al pasar el cursor sobre una imagen, aparece el título del artículo y un extracto, que en muchos casos se superpone a las imágenes adyacentes.

Patrón irregular repetido

Otra técnica consiste en crear un patrón repetido de elementos colocados de forma irregular. El ojo humano se siente atraído por los patrones y nuestro cerebro tiene una tendencia natural a reconocer los patrones que nos rodean. Instintivamente buscamos patrones porque su previsibilidad nos hace sentir cómodos.

Tom Dixon

Tom DixonEl diseño agrupa varios elementos de diferentes tamaños, con diferentes espacios horizontales y verticales entre ellos. La disposición exacta varía según el tamaño de la pantalla, ya que las imágenes se escalan a diferentes velocidades. Este ‘sub’ diseño se repite con más contenido. Nos da el interés visual creado por el espaciado irregular y la desalineación, pero lo combina con la simetría tranquilizadora de un patrón repetitivo.

¡Mira mamá, (casi) sin cuadrícula!

Por supuesto, puede aplicar retrospectivamente una cuadrícula a casi cualquier diseño. E incluso aquellos diseños que no parecen estar basados ​​en cuadrículas, casi siempre hacen uso de una cuadrícula subyacente, especialmente por su tipografía. Sin embargo, a medida que crece el espacio en blanco alrededor de los elementos, la cuadrícula se vuelve cada vez menos dominante visualmente.

Eliminar por completo un diseño basado en cuadrículas es arriesgado, pero puede funcionar en las manos adecuadas. Mantener las cosas al mínimo y limpias es una opción más fácil para evitar la geometría de la cuadrícula. Este tipo de diseño también funciona mejor con todas las imágenes o al menos predominantemente con imágenes.

Estancia

Estancia empareja una imagen con un título y un subtítulo. Hay un patrón leve en el que las imágenes alternan entre la ubicación izquierda y derecha. Pero las imágenes son de diferentes tamaños y proporciones, y la ubicación exacta varía de una imagen a otra. No hay columnas definidas y el espacio vertical entre elementos varía.

El tamaño de las imágenes significa que no se ven más de dos en la ventana a la vez. Es un diseño de sensación muy limpio y espacioso y el posicionamiento irregular de las imágenes centra la atención en cada una de ellas.

Oveja negra

Porque las imágenes en Oveja negraLos diseños son todos de un tamaño similar, bastante pequeño, y están relacionados con el mismo tema. Se pueden agrupar más estrechamente, en algunos lugares incluso superpuestos. Las superposiciones se compensan con los espacios más grandes en otros lugares.

Fotografía Hollie Fernando

Para Cartera de Hollie Fernando, las imágenes más pequeñas se colocan más juntas, mientras que las más grandes tienen más espacio a su alrededor. Al igual que con los dos ejemplos anteriores, las imágenes aquí se eligen y agrupan cuidadosamente. La curación de contenido siempre es importante para cualquier sitio, pero es una parte vital de un diseño sin cuadrícula exitoso.