Guía sobre Grid no Design

Aprende qué es y cómo una cuadrícula puede ayudarte en tu proceso creativo

Guía en cuadrícula

¡Si! Td bele?

Hoy vamos a hablar de Grids. Este artículo es un verdadero Guía sobre cuadrículas en diseño.

Cuadrículas que son elementos clave en el diseño. Los usamos para casi todo, desde una tarjeta de visita hasta la creación de un sitio web. Grid es el esqueleto de nuestros proyectos ayudando en la creación, y debido a que tiene tanta importancia no pude evitar hablar de ellos aquí en el Jefe, ¿verdad?

En este artículo voy a hablar de la cuadrícula de una manera más amplia y que sirve como pro "en línea como pro gráfico". Mi idea no es dictar ninguna regla, sino mostrar las principales posibilidades que tenemos, ¿hermano?

Y antes de comenzar con el contenido, quiero aprovechar la oportunidad para hacerles saber que estamos abiertos para nuestro curso de Fundamentos de Diseño Visual. El curso Fundamentos del Diseño Visual se centra en los fundamentos, conceptos y principios del Diseño Visual. Haga clic en el siguiente enlace y aprenda sobre nuestro curso.

⭐️Curso de Fundamentos del Diseño Visual⭐️
Más información ➡ https://www.fundamentosdodesign.com.br

Curso de conceptos básicos de diseño visual

Dicho esto, entonces vamos a empezar!!

En este artículo encontrarás:

Un poco de historia de las cuadrículas

El uso de cuadrículas es muy antiguo, hay casos de organización a través de esquemas rectangulares desde los manuscritos. Seguro que Grids es más antiguo que el propio diseño gráfico.

grid2big

En las primeras impresiones también encontramos cuadrículas definidas. Y también es posible encontrar el término cuadrículas en el arte, la arquitectura y la Gestalt.

Pero las redes ganaron más fuerza incluso después de la revolución industrial a través de estudios como los de Theo van Doesburg DeJan Tschicholden el libro La nueva tipografía(1928), y el movimiento racional de la Bauhaus.

Durante la Segunda Guerra Mundial, la suiza neutral recibió a muchos refugiados intelectuales, incluyendo nombres de diseño como el de la Jan Tschichold es Herbert Bayer. Y es que este grupo de artistas y diseñadores han ayudado a formalizar y promover el uso de la herramienta que se ha convertido en un icono del diseño y movimiento suizo principalmente con sus famosos carteles hasta el día de hoy.

Y toda esta racionalidad influyó en el diseño gráfico que a partir de la década de 1960 se abate en las cuadrículas.

josefmuellerbrockman11

Qué es una cuadrícula

La cuadrícula es un elemento técnico-formal formado por un conjunto de líneas auxiliares en vertical y horizontal, o rectángulos, que proporcionan una estructura para la construcción de nuestras piezas de comunicación visual, gráfica o web, ayudando en la ordenación, distribución, alineación y dimensión de los elementos gráficos (imágenes, textos, formas).

La función principal de grid es organizar la información dentro de una estructura. Ayuda al diseñador a mantener un patrón, una consistencia visual del diseño en todas sus pantallas, ya sea web o gráfica.

La anatomía de una cuadrícula

Cada parte de una cuadrícula tiene un nombre, una función, así que ahora echemos un vistazo a los elementos que componen una cuadrícula. Vamos, ¿de aquí?

márgenes

Estos son los espacios negativos (en blanco) entre el límite de la página (borde) y el principio del Contenido. Los márgenes enmarcan el contenido, ayudan en el tema del manejo (cuando se trata de lo impreso), dan "aliento" a los textos e imágenes proporcionando también resto de los ojos, además de servir como espacio para la información secundaria.

margen

guías horizontales

Son las alineaciones horizontales. Las pistas rompen el espacio horizontalmente. Se utilizan para guiar los ojos en la lectura y también para crear diferentes comienzos, pausas, áreas de respiración (en blanco) para textos e imágenes.

líneas

columnas

Son estructuras verticales que crean divisiones horizontales, delimitan el espacio a ocupar por el contenido entre los márgenes. El ancho y la cantidad de las columnas es indeterminado, depende del diseño y de lo que el diseñador defina como el mejor.

columna

Módulos

Son unidades formadas por la unión de la columna con la línea de base.

modulos

Zonas espaciales

Son conjuntos de módulos, que forman una unidad.

zonas espaciales

Canalones

Son los espacios en blanco de separación entre columnas y filas.

canalones

Marcadores

Son elementos secundarios ubicados en el exterior (margen), como encabezados, nombres de sección, paginación, etc.

marcador

La importancia de usar una cuadrícula

El uso de un sistema de cuadrícula le permite diseñar más fácilmente, simplemente, en la organización de los elementos gráficos de la pieza, ya sea un sitio web o un póster.

Grid es todo bueno, porque:

Podemos determinar más fácilmente el flujo de lectura que queremos que tenga nuestro lector.

nos ayuda a diseñar en proporciones armoniosas equilibrando los pesos de los elementos gráficos de la maquetación.

Permite crear piezas más efectivas.

Ayuda a colocar los elementos con mayor precisión.

Pero David, ¿va a limitar mi creatividad?

¡¡¡No!!! Relájate, Galucho, no hay nada que ver al respecto.
Grid ha sido utilizado durante muchos años por los mejores diseñadores del mundo.

Es una herramienta de apoyo que nos ayuda en la construcción, posicionamiento de elementos, etc.

La cuadrícula no es limitante, al contrario, nos ayuda a disponer mejor de nuestro diseño.  Como ya dije en el artículo sobre Gestalt (vea aquí) es importante saber utilizar con la parsimonia diversos factores como el contraste, la repetición, la pnición, etc. ¿No es porque estás usando una cuadrícula que necesita dejar todo "alineado a la izquierda", saka?

Será una guía, pero un diseñador creativo sabrá cómo "romper la regla" para lograr su objetivo de comunicación.

Grid no es limitante para nada, ya sea un sitio web o un proyecto gráfico, solo sabe cómo usarlo y "romperlo" cuando lo necesites. romper las reglas cuando lo necesite.

MULLER-BROCKMANN-musica-viva-poster-verde

Cómo crear una cuadrícula

Primero necesitas saber cuál será el soporte: Qué tamaño de página, qué orientación, qué limitaciones. (usted puede mira más sobre esto aquí).

¿También necesita saber qué contenido se diagramará y para qué será escaso?

¿Es el texto de una revista o es una portada de libro? ¿Es un sitio de portafolio de un fotógrafo con varias imágenes grandes o un portal de noticias con más texto que imágenes?

A partir de ahí será posible definir la mejor manera de organizar el contenido a través de la ayuda de la Cuadrícula.

Hay varias maneras de crear cuadrículas, e Indesign y Photoshop (a través de GuíaGuía) hacerlo automáticamente.

Para la web hay muchas cuadrículas listas (la mayoría enfocadas en la creación de sitios web) como labr.blurb.comRejilla modular, Gridpak , Bootstrap responsive grid PSD.

E incluso cuadrículas para crear el icono IOS: Plantillas de iconos de aplicaciones gratuitas, Plantilla de icono de iOS 7, Directrices de los iconos de iOS.

Y puede y debe crear su cuadrícula dependiendo del diseño. Hay varias maneras de hacerlo.

Tenemos las famosas Grids de VillardyJan Tschichold .

Canon de Van de Graaf en book design.svg

Pero un consejo útil y que sirve a casi todos los casos es utilizar una cuadrícula modular a través de la Proporción áurea (un día sigo escribiendo sobre hehe). Hay otras maneras de lograr esta relación, pero la forma más rápida es dividir su diseño en 3 partes iguales usando la regla de los tercios y encontrar los cuatro puntos dorados en el diseño.

Y luego subdivido estos rectángulos para encontrar más puntos, subpuntos, y así ganamos innumerables posibilidades.

grid-tercos

Tipos de cuadrículas

Hay varias maneras de usar cuadrículas. Te mostraré a continuación los modelos más comunes.

cuadrícula de una columna

Por lo general, se utiliza para textos grandes, corridas y continuas, como libros, informes, etc. Tiene una estructura más simple y está formado básicamente por un solo bloque de texto.

cuadrícula-una-columna

cuadrícula de dos columnas

Esta cuadrícula es más flexible que una columna y se utiliza normalmente para contener un gran volumen de texto.

cuadrícula-dos-columnas

Se puede utilizar para mostrar solo un texto independiente o texto separado por las columnas. Se puede arreglar con columnas de anchos idénticos o diferentes.  En este caso, normalmente para mantener la proporción, la más ancha es el doble del ancho de la columna estrecha.

cuadrícula-dos-columnas-2

Cuadrícula de varias columnas

Nos da más flexibilidad que los anteriores. También se utiliza para grandes cantidades de contenido y puede utilizar columnas de anchos variables. Sitios web, periódicos, revistas, mesas, etc.; utilice este tipo de cuadrícula mucho.

rejilla-mutiplass-colunas

Cuadrícula modular

Esta cuadrícula utiliza columnas verticales más varias guías horizontales.

Generalmente se utiliza en proyectos más complejos, como periódicos, gráficos, etc. Los módulos proporcionan un mayor control del contenido y espacios más pequeños.

modular de rejilla

Cuadrícula jerárquica

La cuadrícula jerárquica consta de zonas jerárquicas, como su nombre lo dice, y divide las pantallas, ya sea impresas o en línea, horizontalmente.

Es prácticamente una cuadrícula de columnas horizontales con diferentes anchos.

cuadrícula-hieraquico

Los sitios de Internet utilizan mucho este tipo de cuadrícula debido a la estructura habitual y también al contenido dinámico y el cambio de tamaño que se produce debido a los diferentes tipos de pantalla.

Pero no es solo para webs, esta cuadrícula se adapta a los requerimientos del proyecto, por lo que también podemos utilizarlas en libros, revistas, carteles, etc.

Cómo usar una cuadrícula

Hay varios tipos de técnicas para la diagramación.  Te mostraré los más aplicados en el mercado.  Todos vemos en nuestra vida cotidiana principalmente en revistas, periódicos, anuncios y folletos.  Pero con el avance de la tecnología y el diseño web, también es posible aplicarlos prácticamente todos en interfaces web, por supuesto con algunos matices hehehe.

¿Vamos a ver?

Técnica "L"

Ampliamente utilizado en diversos medios de comunicación, principalmente en revistas y periódicos. En esta técnica el posicionamiento de la mancha de texto, en relación a la imagen termina creando el formato de la letra L.

La letra L se puede utilizar en ambos lados y al revés.

l l (2)

Técnica "U"

La ruta por la que fluye el texto, en relación con la imagen termina creando
la forma de la letra U.

u (2)tu

Técnica "T"

También tenemos la estructura de la letra T. Ayuda a dar sentido a la continuidad.

t

T (2)

Técnica "H"

También tenemos una estructura hecha con la letra H. Podemos usar tanto la mayúscula como la pequeña H.

h

h (2)

Técnica "I"

En la estructura de la letra I creamos una o más columnas. Es muy dinámico y puede dar más espacio a las imágenes y a veces incluso algo de elegancia al diseño.

yo

yo (2)

Técnica de soporte

La estructura de soporte es más monótona y podemos colocar el texto tanto encima como debajo de la imagen. Aunque un poco "pobre", la web funciona bien, especialmente en blogs y sitios con mucho texto.

Soporte

Áreas de respiración y ritmo de lectura

Tenemos que prestar atención a las áreas de respiración que son las áreas blancas del diseño que sirven para que sea más ligero, limpio y menos agotador. A veces, con sólo añadir un área de respiración se puede modificar completamente una parte. Solo sabe cómo usarlo de manera consistente.

aliento

Y también debemos prestar atención al ritmo de lectura. Mira el primer ejemplo ya que es confuso saber dónde seguir la lectura:

ritmo de lectura

En este otro caso es mucho más fácil saber a dónde ir, ¿verdad?

ritmo de lectura correcto

Es el Diseñador quien determina el ritmo y dirige la lectura, hacia donde quiere que siga el lector.

Video - Cuadrículas en diseño - ¿Qué es la diagramación? ¿Qué son grids design?

A continuación os dejo un vídeo que grabé para mi curso Diseñador web PRO en cuadrículas y diagramación. En ella hablo tanto de grids para proyectos digitales como de gráficos.

Consideraciones finales

Como podemos ver un sistema de cuadrícula es una herramienta que ayuda, y muchos diseñadores organizan la información de una manera coherente y armoniosa.

Utilizar una cuadrícula es sin duda algo muy ventajoso, y de ninguna manera perjudicará su creación, al contrario, ayudará a que tus ideas se pongan más claramente y tu proyecto sea más estructurado.

Todo esto que hemos visto hasta este post sigue siendo poco en comparación con la gran cantidad de cosas que tienes que estudiar y hablar de Grids.

Así que sigue estudiando allí, así que voy a seguir adelante desde aquí, ¿de acuerdo?

Y tú, ¿usas cuadrículas en tu diseño? Comentario a continuación!

Fuerte abrazo.

Hasta luego.

Referencias:

Libro: Crea cuadrículas - 100 Fundamentos de diseño

http://blog.popupdesign.com.br/perguntas-frequentes-sobre-grids/

http://99designs.com/designer-blog/2013/03/26/history-of-the-grid-part-2/

http://www.graphics.com/article-old/brief-history-grids

David Arty

Hola soy David Arty, fundador desde el blog Jefe de Diseño.
Soy de São Paulo, Brasil. Trabajo con diseño, principalmente con diseño web, desde 2009. Intento transformar ideas locas y complejas en piezas simples, atractivas y funcionales.


También publicado en Medio.