¿Cómo romper la grilla y no morir en el intento?
Las grillas nos permiten organizar los elementos dentro de una página. Sin embargo, a veces es necesario incorporar elementos que resultan disruptivos para esa rigurosidad. Analizamos las distintas posibilidades para romper con esa estructura.
Una buena forma de ejemplificar cómo usamos una grilla es imaginar las estanterías de un almacén. En él, un vendedor ordena sus productos en un sistema organizado de repisas y estantes. Si llevamos esa imagen a lo digital, los productos se ubican sobre un sistema de columnas denominado grilla. En algunos casos esta grilla es más visible que en otros. Sin embargo la tendencia es que esa estructura siempre está presente.
A diferencia del mundo real, los objetos del ambiente digital son escalables, móviles e incluso deformables. Según el ancho de pantalla, los elementos pueden cambiar de tamaños, posición y forma. Esto otorga flexibilidad y dinamismo a la página.
Sin embargo, a pesar de lo útil y necesario que es el uso de una grilla, en ocasiones nuestros diseños tienden a verse demasiado estructurados y regulares. Esto puede dificultar también la creación de espacios para la innovación.
¿Tienes un proyecto que necesita alejarse de la rigidez natural de la grilla de 12 columnas? ¿Tu marca necesita un diseño más transgresor? En este artículo revisaremos algunos consejos que te ayudarán a romper la grilla y no morir en el intento 😉
Juega con los altos de las imágenes
La forma más simple de romper la rigidez de una grilla es dejando una variable libre. El el siguiente ejemplo, aparece una galería donde todas las imágenes comparten el mismo ancho. Sin embargo, sus altos varían aleatoriamente de una a otra. Al haber elementos de diferente altura, el descalce se produce sólo verticalmente, generando un ritmo más interesante y menos monótono.
Juega con los anchos de las imágenes
El ejemplo expuesto a continuación es similar al anterior. La diferencia es que en este caso la variable en libertad ya no es el alto de las imágenes, sino su ancho. En esta página, la variable “ancho” está mucho más controlada que en el ejemplo anterior, ya que las imágenes grandes tienen el doble del ancho de las imágenes más pequeñas.
Usa fondos transparentes para las imágenes
Este recurso te permitirá jugar con las formas de las imágenes. Por ejemplo, las imágenes del sitio de Apple poseen fondos transparentes lo que permite hacer desaparecer los límites de los contenedores dejando en libertad los perfiles redondeados de sus productos. Lo mismo sucede en Network Osaka, donde las imágenes no poseen fondo, haciendo aparecer los bordes irregulares de los objetos. Puede ser una muy buena opción para hacer desaparecer la grilla y otorgar más libertad al diseño.
Ubica elementos “fuera del contenedor principal”
Otra práctica útil es simular el descalce mediante el posicionamiento de elementos que parecieran no respetar el ancho del contenedor principal. En el ejemplo siguiente se observa como las imágenes se escapan del ancho del cuerpo de texto. Esto redibuja el blanco de la página generando un juego de formas más lúdico.
Juega con la superposición de elementos
Esta práctica permite romper la rigidez del diseño. Mediante la superposición, los elementos presentes en la pantalla se ubican unos sobre otros, pero permitiendo verlos a todos de manera adecuada, sin interrumpir la información contenida en ellos.
Utiliza formas diagonales que transgredan la grilla
Otra muy buena forma de romper la rigidez de una grilla es incluyendo elementos diagonales en el diseño. Usar imágenes de fondo (SVG o PNG) puede ser una buena opción para aplicarlas como recurso gráfico en la página.
Usa colores de fondo para algunos elementos de línea
Al ser elementos in-line, es decir que se comportan como línea, sus límites son irregulares, generando un efecto de cortes escalonados. Al ubicarse sobre fondos o imágenes de otro color, aparecen recortes que quiebran la simetría de la página.
Utiliza los estados de hover
Si ninguna de las opciones anteriores te convence porque consideras que son muy arriesgadas, otra opción es utilizar los estados de hover. El principal beneficio de esta práctica es que en primera instancia todo se ve regular. Sin embargo, al posicionar el mouse sobre los elementos, estos cambian de tamaño o forma escapándose de la rigurosidad de la grilla.
No todo es romper la grilla
Si bien este listado explora una serie de opciones que permiten romper la ortogonalidad y rigidez de nuestros diseños, no es siempre necesario. Hay proyectos donde la asimetría, y el descalce de elementos no representan la identidad de la marca.
En estos casos es mejor mantenerse fiel a las prácticas tradicionales y no invertir tiempo en generar propuestas innovadoras que se alejen de aquellos principios identitarios.
Otro aspecto a considerar es que estas prácticas son muy atractivas visualmente. Sin embargo, tienen sentido sólo cuando están aplicadas de manera controlada. Si abusamos de estos recursos, podemos incluso llegar a perjudicar la usabilidad y navegabilidad de nuestro sitio, por lo que la experiencia de nuestros usuarios no será óptima.
Acerca del Autor
Agregar un comentario