15 razones por las que una cuadrícula mejorará nuestros diseños

cuadricula_diseno_utilidad

Como diseñadores siempre buscamos un orden, y no por vanidad, sino para organizar los elementos de una manera sencilla, para que nosotros mismos u otros amantes del diseño, puedan tener acceso a nuestro trabajo, y les sea más fácil el poder manipular los elementos.

Todo esto con el fin de que en la agencia, se muevan mucho más fácil los diseños en los departamentos correspondientes.

Nuevamente la escuela de diseño Canva, comparte con nosotros un articulo, en el que resume cuales son las ventajas de utilizar un diseño basado en una cuadrícula.

En la caja de herramientas de los diseñadores gráficos, las cuadrículas son consideradas como uno de los elementos básicos fundamentales.

Pero ¿por qué es esto?, ¿Por qué unas pocas líneas que forman una cuadrícula sobre el lienzo son tan importante para un proyecto de diseño?. Cada diseñador tiene su propia razón de por qué las cuadriculas son importantes para ellos, pero en definitiva, ayuda a estructurar el diseño, de una manera que de otra forma sería difícil, lento y problemático.

Así que, si quieres profundizar en el mundo de los diseños basados en cuadriculas, vamos a hablar de 15 razones por las que simplemente añadiendo el uso de una rejilla a nuestro repertorio, podemos mejorar significativamente nuestros diseños.

01. Las cuadriculas mantienen el contenido Organizado

Uno de los principales usos de una cuadrícula es mantener los elementos alineados, ordenados, ademas el diseño de la página limpio y ordenado.

Esto se debe a que las cuadriculas fomentan la alineación, que en realidad es una perfecta descripción de su principal trabajo. Mediante el establecimiento de un sistema de red, se está creando una estructura de sistema en sí mismo, para alinear los elementos, y al hacer esto, se puede crear por sí mismo una disposición ordenada, limpia y organizada.

Por ejemplo lo puedes comprobar en estos diseños basados en cuadriculas, creados por Christine Wisnieski de Twist Creative y cómo se alinea perfectamente cada elemento para formar un resultado final limpio.

01-organizado

Cuando se utiliza una cuadrícula, podemos imaginarnos la alineación de cada uno de sus elementos. Sus tipografías, imágenes, gráficos o cualquier otro elemento. Comience con una idea aproximada de lo que estás buscando lograr y construya una red para adaptarlo.

02. Hará su trabajo más rápido

En un mundo en el que siempre estamos buscando como hacer las cosas más rápidas y mejor, la palabra «eficiencia mejorada» es música para los oídos de muchas personas, por lo que este punto debe sonar como una sinfonía.

Las cuadriculas o grids pueden acelerar y mejorar en gran medida el tiempo de diseño, ya que pueden actuar como una guía, que indica dónde está la mejor manera de colocar, posicionar y escalar elementos. En lugar de colocar al azar elementos hasta encontrar una composición de aspecto decente, una rejilla debe ayudar como una guía hacia la búsqueda de una solución natural.

Como dice el diseñador Troy Templeman, «(Grids) aceleran el proceso de diseño, ayudando a que los diseñadores decidan donde debe ser colocado el contenido, en lugar de en que podría ser colocado.»

Piense en la cuadricula como la construcción de una casa, es una de las primeras cosas que se colocan, y desde allí se utilizan para construir sobre ella.

03. Su Tipografía se lo agradecerá

Es así de simple, las rejillas y las tipografías son dos elementos de diseño, que muy felizmente van de la mano. Una rejilla fuerte puede ayudar a que los diseños de tipografías pesadas aparezcan más ordenados, más organizados, y puede ayudar a mejorar la legibilidad y el cuerpo del texto.

Una forma de cuadrículas ayudan a mejorar la legibilidad de su tipografía, es a través de algo que se llama la «baseline grid(En español sería algo como cuadrícula base)». Estas son filas horizontales estrechas que se ejecutan a través de su diseño, en las que cada línea se adecua a la tipografía, un poco como los renglones en un cuaderno. Lo que hacen estas líneas de la cuadrícula es ayudar a alinear los cuerpos tipográficos para que cada uno se sienta en el mismo nivel.

03-tipografia

Este es un diseño bien alineado con una cuadricula de base.

Mientras que muchas personas pueden no darse cuenta, específicamente si no alinean cada línea de su tipografía, subconscientemente uno se da cuenta de que su diseño parece más desordenado, sobretodo si lo comparas con uno que realmente ha sido bien alineado. En resumen, es un pequeño cambio con grandes resultados.

03-tipografia2

Este es un diseño que muestra como al no estar alineado todo se ve muy desorganizado.

He aquí un ejemplo de una cuadrícula base en acción. Observe cómo cada línea está perfectamente alineada entre sí, creando un efecto tipográfico limpio y ordenado.

03-tipografia03

Esta es una cuadricula base en acción.

04. Colaborar con otros diseñadores será mucho más fácil

¿Alguna vez se tiene que trabajar con otros diseñadores? Si es así, las cuadriculas podrían ser la respuesta a aliviar algo de la tensión y la frustración de la falta de comunicación.

Como se mencionó anteriormente, las rejillas ayudan en muchas formas a dar una estructura subyacente a su diseño y proporcionar una guía en cuanto a donde ciertos elementos deben ser colocados. Por lo tanto, si tienes una rejilla sólida creada en el diseño y un nuevo diseñador lo toma, ellos (con suerte) podrán ver cómo has configurarlo y cuál es nuestra intención de colocar elementos.

Por ejemplo, piensa en si estuviera trabajando en un diseño como el que mostramos continuación, y necesitas a otro diseñador para que escriba sobre el documento, y coloque un tercer párrafo para la tipografía.

04-colaboraciones

Gracias al sistema de cuadricula, hay menos posibilidades de que no vayan a colocar y alinear correctamente. Además, habrá menos preguntas innecesarias como «¿Qué anchura debe tener la columna?. ¿Hasta qué punto debo ponerlo?», Porque todas las respuestas ya están contestadas por la cuadricula.

Al trabajar con otros diseñadores, establecer un sistema de red que se explique por sí mismo, a su vez que se adapte al producto final. No utilice trece columnas si todo lo que necesita son tres. Mantenga la rejilla funcional y útil.

05. Equilibrar su diseño se conseguirá con mucho más facilidad

La belleza de las cuadriculas radica en que son consistentes e incluyen los elementos, por lo que cuando se divide su diseño desde arriba en una cierta cantidad de columnas, se comenzará con un diseño simétrico. Desde aquí, debería ser mucho más fácil juzgar qué lado de su diseño está dominando al otro.

Echa un vistazo al diseño de estos sitios web creados por Maan Ali y cómo se evitan diseños desequilibradas utilizando una cuadrícula fuertemente simétrica, y bloques de tamaño uniforme con la información y las imágenes.

05-balance

Del mismo modo, este diseño de Braulio Amado utiliza una cuadrícula de tres columnas con un gráfico centralizado para mantener el diseño simétrico, perfectamente equilibrado. A pesar de que el diseño es bastante fuerte y puede ser fácilmente considerado abrumador, la rejilla perfectamente alineada y perfectamente equilibrada mantiene el diseño fresco, no desordenado.

05-balance2

06. Ayudarás al Multi-Diseño de páginas cohesivas

Las cuadriculas son la salvación para los diseños de varias páginas. Mediante el establecimiento de una fuerte rejilla para su diseño, esa misma rejilla será transferible de página en página y de diseño en diseño, por lo que es mucho más fácil mantener cohesividad a lo largo de sus diseños.

Piense en un sitio web, como Rolling Stone ,la forma en que tiene muchas páginas diferentes con distintas estructuras, composiciones de contenido. ¿Cómo se hace para que cada página funcione de la mejor manera posible, manteniendo un diseño coherente y consistente a través de cada uno?.

Echa un vistazo a la imagen de abajo, que compara una página de música de Rolling Stone con su página principal. Mediante el uso de una estructura de rejilla de cuatro columnas en el diseño de sitios web, cada página se ve coherente, limpia y familiar, pero hay espacios distintos para la revista Rolling Stone que tienen diferente función en cada página, y aún así el resultado es muy coherente.

06-multipagina

Un uso común de las cuadriculas en los diseños de varias páginas, es para los manuales tales como guías de estilo. Como se trata de estos instructivos utilizados con fines educativos, que deben mantenerse linealmente diseñados, ¡por lo que se necesita emplear un sistema de red!. Echa un vistazo a esta guía de estilo de Bosphoru por Mike Collinge y nota el uso constante de la cuadricula.

06-multipagina2

06-multipagina3

07. Las cuadriculas mejorarán su jerarquía Visual

Una suposición común sobre el diseño basado en cuadricula, es que el uso de una rejilla significa dividir cada elemento de su diseño, en bloques de igual tamaño, que harían una anulación casi por completo.

Todos sabemos lo importante que es la jerarquía de un diseño, y una rejilla puede ayudar a acelerar ese proceso jerárquico para usted, hacerlo más fácil.

En primer lugar, echemos un vistazo al diseño web. La siguiente imagen es de la página web de la NASA. La NASA utiliza una fuerte red de cuatro columnas en su diseño de sitios web, y se las arreglan para comunicar la jerarquía estirando las imágenes más importantes a través de más de una columna o fila.

Observe cómo la historia principal «Halloween Skies to Include Dead Comet Flyby» utiliza más de dos columnas y dos filas por lo que es la parte que más llama la atención del diseño del sitio. Otras historias importantes, también se estiran sobre varias columnas, atrayendo la atención hacia los mismas.

07-jerarquia

En la impresión funciona de manera muy similar. Mediante el uso de una rejilla de la base de su diseño, puede llamar la atención hacia ciertos elementos, escalándolos, esto le permite llegar a extenderse a través de varias columnas. Este ejemplo de abajo creado por David Tang hace precisamente eso, atrae la atención sobre algunos puntos como el número 23 y 30, mediante el uso de la escala ademas la rejilla de alineación.

07-jerarquia2

08. Diga adiós a los Layouts desordenados

Las cuadriculas son una herramienta fantástica para librar su diseño del temido efecto desordenado, sobre todo cuando no tienes intención de generar desorden. Se hace mediante el empleo y la utilización de los márgenes.

Los márgenes son, por definiciones muy básica, el espacio alrededor del diseño. En términos generales, entre más ajustados sean nuestros márgenes, más tensos y más desordenados se verán nuestros diseños, pero en cuanto más abramos los márgenes, se verán más limpios.

Echa un vistazo al siguiente diagrama, los márgenes están marcados por el color gris oscuro.

08-margenes

Así, mediante el uso de una rejilla, se suelen utilizar también los márgenes, lo que ayudará a mantener su diseño mucho más abierto y limpio.

Otra forma de utilizar las cuadriculas para ayudar a evitar el desorden, es mediante el fomento de la utilización de las canaletas. Canalones son los espacios entre las columnas de la cuadrícula. Estos son ajustables, pero cada uno debe permanecer constantemente del mismo tamaño, con el fin de mantener su rejilla funcional.

08-margenes2

Echemos un vistazo a un diseño que emplea ambas funciones de la red para lograr un resultado efectivo. Este fondo de pantalla creado por Aisle One destaca su uso de cunetas, márgenes y llama la atención por lo efectivamente que se han utilizado.

08-margenes3

09. Da la bienvenida a los diseños más agradables

Una de las principales razones de una gran cantidad de diseñadores (artistas, fotógrafos, etc.) para utilizar una cuadricula como base en sus trabajos, es porque se piensa, que es una forma de ayudar a guiar un diseño matemáticamente, para hacerlo más agradable. Déjame explicar.

Hay algunas maneras en que las cuadriculas pueden para hacer sus diseños más agradables, una de las que más comúnmente(más fácil), se utiliza es «la regla de los tercios». Es posible que hayas oído hablar de esta norma en la relación con la fotografía, pero los fundamentos de esta teoría es dividir su diseño en una serie de líneas, incluso horizontales y verticales, siempre que esas líneas se cruzan(marcados por debajo de los círculos) se considera que es un punto focal, y un punto agradable para colocar elementos en su diseño.

09-ley_de_tercios

Como se mencionó anteriormente, esta teoría se utiliza mucho en la fotografía, hasta el punto que muchos fotógrafos encuadran deliberadamente fotos, para que los centros de coordinación se sientan en estos puntos.

09-ley_de_tercios_2

Utiliza la regla de los tercios en tu próximo diseño y ve si encuentras tus diseños más agradable a la vista. Todo lo que tienes que hacer es dividir tu página en tres secciones incluso horizontal y verticalmente, y luego usar estas guías prácticas para construir tu diseño.

10. Puedes romper la cuadrícula para un mayor impacto

Cumplir con una cuadricula recién formada asegurará un diseño limpio, organizado, y muy bien alineado a la mano, pero de vez en cuando deliberadamente rompemos esa red, para dar a ese diseño limpio un efecto único, llamativo.

Echa un vistazo a este diseño propagación por 99U, que utiliza una rejilla ordenada de tres simple, columna, pero rompe esa linealidad limpia, ejecutando una llamativa diagonal amarilla, sobre toda la extensión de la página. Este desprecio por la red establecida, crea un diseño memorable y eficaz que realmente pone a punto el mensaje de «Piensa diferente».

10-romper_cuadricula

Al romper la red, también se puede dibujar un enfoque hacia ciertos elementos. Echa un vistazo a este diseño de sitio web para Big Cartel, que mantiene las cosas prolijamente alineadas en la cuadricula con algunas excepciones.

Al tener algunas partes del diseño que sobresalen de la red y rompen las fuertes líneas verticales, el diseño se marcha, el ojo es atraído por esos elementos.

10-romper_cuadricula2

11. Las cuadriculas son muy flexibles

¿Preocupado de que una cuadricula no se adapte a su diseño? No temas, como todas las rejillas son herramientas altamente funcionales, flexibles y pueden adaptarse a sus diseños cambiantes.

Al crear una red, tienes la opción de colocar tantas columnas como quieras, que es lo que hace que las redes flexibles. Echa un vistazo al diagrama siguiente, que demuestra lo diferente que es una cuadrícula de una columna al compararla con una cuadrícula de dos o tres columnas.

11-flexible1

Por supuesto, las cuadriculas comúnmente pueden tener hasta 13 columnas, dependiendo de las necesidades del diseñador y el diseño. Por ejemplo, el diseño que mostramos continuación, utiliza una imagen en toda página mas una tipografía muy simple, por lo que el sistema de red de una columna, que se utiliza, es perfecto.

11-flexible-2

Considerando el diseño de la disposición utilizada por The Design Surgery, con trece columnas en cada página, los artículos son generalmente un poco más extensos y hay imágenes que necesitan ser colocadas en varios puntos.

11-flexible-3

Ten en cuenta que en el diseño, el número de columnas es totalmente hecho por el diseñador, pero para lograr que sea más flexible el diseño tendrá más columnas, entre menos tenga, será más simple y menos flexible.

12. Las cuadriculas pueden ayudar a las diagonales

Si estás buscando presentar el diseño desde un ángulo diferente (en sentido literal), las cuadriculas tienen también una solución.

Las rejillas pueden trabajar con la misma eficacia en un eje diagonal como en horizontal o vertical.

Echa un vistazo a este diseño del cartel de Andrew Ackroyd, que capta mucho la atención al colocar la tipografía, los gráficos a lo largo de una cuadrícula diagonal, creando un efecto adecuadamente moderno y elegante.

12-diagonal-1

Las rejillas diagonales también pueden hacer maravillas para los diseños de imágenes pesadas. Echa un vistazo a este diseño por Karen Hoffstetter y cómo se usan marcos diagonal construidos para imágenes.

12-diagonal-2

Vale la pena una nota que este diseño utiliza evidentemente tanto una rejilla horizontal/vertical, así como una cuadrícula diagonal para mantener las cosas muy bien alineadas y bien organizadas.

13. Se pueden utilizar en cualquier lugar

Mientras que las cuadriculas se ejemplifican con mayor frecuencia en revistas y diseños editoriales, estos no son los únicos medios para que las redes se puedan aplicar. De hecho, pueden ser utilizadas a lo largo de casi cualquier medio de diseño.

Una gran cantidad de logos famosos se basa en sistemas de red, tales como el logotipo Braun que se muestra a continuación. Como se puede ver, mediante el uso de una rejilla para construir el logotipo, cada letra se mantuvo consistente, limpia, y fuertemente construida, lo que resulta en un logotipo icónico.

13-useencualquierparte-1

Las rejillas también se pueden usar a lo largo de la ilustración. Echa un vistazo a esta impresionante ilustración metrópoli literaria por Dean Gorissen y tenga en cuenta lo limpio y afilado que se encuentra cada ángulo, que es lo que en gran medida sugiere que esta ilustración se ha creado usando algo parecido a una cuadrícula diagonal.

13-useencualquierparte-2

Así que, cualquiera que sea su soporte, una red puede ser inmensamente útil. Mientras que pueden no funcionar para cada estilo y cada diseñador, sin duda pueden funcionar para muchos, así que considere la posibilidad de una rejilla para su próximo proyecto.

14. Las rejillas pueden animar el espacio en blanco

¿Está buscando profundizar en el mundo de los diseños de espacio en blanco-pesado? Las rejillas pueden ayudar con eso también.

Cuando has dividido un diseño hasta en su cantidad deseada de columnas, coloque los elementos necesarios, pero mantener algunas filas y columnas vacías, déjalos simplemente que ocupen los espacios en blanco.

Echa un vistazo a este diseño de João Oliveira, que utiliza una gran cantidad de espacio en blanco por áreas que la cuadricula simplemente no llena. Esto da lugar a la vez a un diseño elegante, abierto y sofisticado, así como un diseño funcional minimalista, que va directo al grano con poco o ningún desorden o elementos innecesarios.

14-espacioenblanco-1

Una función similar se ve en este diseño del cartel creado por Mehmet Gozetlik. Al alinear la tipografía y las imágenes de la columna central única, dejando las columnas exteriores vacías, el diseñador crea un diseño muy bien equilibrado, centralizado, visualmente efectivo en este cartel.

14-espacioenblanco-2

15. Sus espectadores se lo agradecerán

Como si no hicieran lo suficiente ya, las cuadriculas también pueden ayudar a su tipografía, fomentando a que sea mucho más fácil de leer en los diseños tipográficos.

Te darás cuenta, que el ojo es muy exigente con longitudes de línea para cuerpos tipográficos. Si las líneas son demasiado largas, se vuelven más difíciles de leer, y si son demasiado cortas parecen demasiado revueltas, rotas para sumergirnos en ellas.

En términos generales, la longitud de la línea de oro para la tipografía es un mínimo de seis palabras por línea y un promedio aproximado de unos 50 a 65 caracteres (incluyendo espacios) en cada línea.

15-viewers-1

Mediante el uso de las cuadriculas, los diseños con mucho texto y pesados, se convierte en algo mucho más fácil y rápido de hacer. Y, a través de columnas, tienes una guía mucho más fuerte en sus longitudes de línea.

Esta es una razón por la qué los periódicos dependen tan fuertemente de diseños basados en la cuadriculas, que les ayudan a construir columnas para mucho texto, de una forma más rápida y más fácil, por lo que su contenido se vuelve más digerible y fácil de leer.

Para el lector: Y que este empiece a hacer diseños con cuadriculas

Tanto si eres un fan de las cuadriculas o no, no hay duda de lo útil que realmente pueden llegar a ser en los diseños, no es ninguna sorpresa que el uso de ellas se remonta al siglo 13.

Las cuadriculas tienen tantos usos, desde ayudar a alinear y balancear sus diseños, para ayudarle a lograr efectos espectaculares, como la tipografía diagonal. Son realmente mucho más que sólo algunas líneas en una página, son estructura, guía, y dan forma a su diseño, de una manera que le ayudará a alcanzar su resultado final deseado.

¿Haz hecho uso de las cuadriculas en tus diseños? Si es así, ¿tienes algún consejo para compartir, para cualquier diseñador que está empezando con ellas? ¡Comparte tus pensamientos en los comentarios!.