cuadrículas de diseño

Los diseñadores tienen una gran cantidad de herramientas a su haber cuando comienzan un nuevo diseño. La tipografía, los colores y la composición son los componentes básicos del buen diseño. Pero hay una herramienta que a veces pasa desapercibida: las cuadrículas. Las cuadrículas son la columna vertebral de todos los diseños, infografías y presentaciones.

Al comenzar un diseño, la mayoría de los diseñadores usan algún tipo de cuadrícula para organizar los elementos. Esta práctica ayuda a mantener un equilibrio de página a página o de diapositiva a diapositiva. El diseño de diseño implica el uso de una cuadrícula o un grupo de cuadrículas, dependiendo de lo que se necesite lograr. Lo creas o no, las cuadrículas también existen para ayudarte a romper las reglas.

Veamos todos los tipos de cuadrículas que existen en este kit de herramientas de diseño de diseño, comenzando con la anatomía de las cuadrículas para que pueda comprenderlas mejor.

Diseño: las partes de una cuadrícula

La anatomía de una cuadrícula se compone de varias partes. No todas las partes están presentes en todas las cuadrículas; depende del tipo de cuadrícula. Aquí veremos las partes más importantes de una cuadrícula.

Es posible que reconozca muchos de estos términos de los programas de creación de documentos como Microsoft Word, Google Docs o Pages. El aspecto de su documento está definido por estas secciones de una cuadrícula, incluidos los márgenes, el encabezado, el pie de página y los números de página.

Formato

El formato es el área completa donde se presentará el diseño final. En el diseño de impresión, el formato es la página y en el diseño web el formato es la ventana del navegador.

diseño de formato tipos de diseño de grilla

Margen

Los márgenes son los espacios vacíos entre los bordes del formato y el contenido. El tamaño de los márgenes es lo que le da al contenido una forma general, generalmente un rectángulo.

diseño de margen tipos de diseño de grilla

Listo?Cree contenido visual de aspecto profesional con esta herramienta de bricolaje.

Líneas de flujo

Las líneas de flujo son líneas horizontales que separan las diferentes secciones de una cuadrícula en bandas paralelas. Ayudan al lector a seguir el contenido del diseño. Las líneas de flujo también crean puntos de detención o bordes para los elementos que se colocarán. Algunas líneas de flujo se llaman líneas colgantes y otras se llaman líneas de base.

Módulos

Los módulos son los bloques de construcción de cualquier cuadrícula. Son los espacios creados entre las líneas de flujo y las líneas verticales. Grupos verticales de módulos juntos crean columnas. Los grupos horizontales crean filas.

diseño del módulo tipos de diseño de grilla

Zonas Espaciales o Regiones

Los grupos de módulos adyacentes en áreas verticales y horizontales crean zonas o regiones espaciales. Una región vertical puede contener un bloque de texto, una región horizontal puede contener un video. Las regiones pueden organizarse proporcionalmente o usarse para crear zonas superpuestas.

zonas espaciales regiones diseño diseño tipos de grilla

Columnas

Las columnas son zonas espaciales verticales o regiones que se ajustan completamente desde el margen superior al inferior.

diseño de columnas tipos de diseño de grilla

Filas

Las filas son zonas espaciales horizontales que se ajustan completamente del margen izquierdo al derecho.

diseño de filas tipos de diseño de grilla

Canaletas

Los espacios entre filas y columnas se llaman canales. Estos siempre deben ser iguales entre columnas o filas, para mantener un equilibrio visual.

diseño de canalones tipos de diseño de grilla

Marcadores

Los marcadores son áreas dentro del encabezado o pie de página que marcan el lugar exacto donde se coloca la información repetida de una página a otra.

diseño de marcadores tipos de diseño de grilla

Tipos de cuadrículas

Las cuadrículas de diseño se utilizan para proyectos de diseño que tienen tan solo una página o cientos. Estos son el tipo de cuadrículas que organizan elementos dentro de un espacio. Los documentos de Word, por ejemplo, tienen una cuadrícula, simplemente no siempre son visibles. Las cuadrículas de diseño ayudan a los diseñadores a posicionar el texto y las imágenes de manera coherente y fácil de seguir.

La mayoría de los editores de diseño, en línea o no, tienen una herramienta llamada «ajustar a la cuadrícula». Estas son líneas azules o rojas que aparecen cuando los elementos se mueven dentro del diseño. Permiten que los diseñadores sepan cuándo se alinean los bordes según la cuadrícula o cuándo está centrada. Los editores de diseño más complejos mostrarán la distancia entre los elementos para que puedan posicionarse proporcionalmente.

Todas las cuadrículas de diseño pueden diseñarse de dos maneras: simétricas o asimétricas. Las cuadrículas simétricas siguen una línea central. Los márgenes verticales son iguales entre sí, al igual que los horizontales. Las columnas en un diseño simétrico también tienen el mismo ancho. En un diseño asimétrico, tanto los márgenes como las columnas pueden ser diferentes entre sí. Es importante buscar siempre el equilibrio cuando se utiliza un diseño asimétrico.

Veamos cinco tipos de cuadrículas de diseño; manuscrito, columna, línea de base, modular y jerárquico.

  • Las cuadrículas manuscritas se utilizan en documentos, libros electrónicos, pdf y presentaciones con mucho texto.
  • Las cuadrículas de columnas se utilizan para que las revistas organicen el contenido en columnas para que sea más fácil de leer.
  • Las cuadrículas de referencia son un poco más técnicas y se definen por la línea en la que se encuentra el texto. Esta cuadrícula crea un buen ritmo de lectura para cualquier diseño con mucho texto.
  • Las cuadrículas modulares son como un tablero de ajedrez que puede mostrar muchas cosas para facilitar el acceso.
  • Las cuadrículas jerárquicas se utilizan principalmente en sitios web, organizando el contenido según su importancia.

Cuadrícula de manuscritos

Un documento de Word o una plantilla de presentación siempre tendrá una cuadrícula manuscrita. A veces, estas cuadrículas son invisibles, aunque pueden activarse para aparecer en editores de documentos como Word. Las cuadrículas de manuscrito en un documento de texto separan el encabezado, el pie de página y el espacio en los bordes (márgenes). El diseño del manuscrito crea un rectángulo dentro de la página (formato), como un cuadro delimitador para el texto.

diseño de cuadrícula manuscrita tipos de grilla

Manuscript Grid es la base de todas las revistas, periódicos, libros electrónicos y todos los diseños basados ​​en texto. El diseño de la cuadrícula del manuscrito se configura en la primera página. El resto de las páginas seguirán las mismas medidas. Es una buena práctica mantener la cuadrícula del manuscrito consistente dentro del diseño de un documento. Incluso si hay elementos que salen del borde, como una forma o una fotografía, la cuadrícula seguirá ahí para ayudar a mantener un buen equilibrio para todo el diseño.

manuscrito simétrico diseño de cuadrícula tipos de diseño de grilla

Listo?Use la función de ajuste a la cuadrícula en esta herramienta de contenido visual de bricolaje.

Rejilla de columna

Las cuadrículas de columnas se utilizan para organizar elementos en columnas. Las revistas usan cuadrículas de columnas para colocar el texto en secciones fáciles de leer. Algunos libros de texto académicos también los usan. Las cuadrículas de columnas también se usan dentro de sitios web, como en periódicos o blogs en línea.

Las cuadrículas de columnas pueden tener tan solo dos columnas o hasta seis o más, pero eso no es muy común.

El texto y las imágenes en una cuadrícula de columna se colocan siguiendo las líneas verticales y las líneas de flujo que conforman las columnas. Las imágenes se pueden colocar dentro de una columna, o en dos o más para crear un diseño visual diferente. El espacio entre columnas (canales) debe ser proporcional y consistente en todo el documento.

Una cuadrícula de columna simétrica tiene todas las columnas del mismo ancho, mientras que una cuadrícula asimétrica tendrá algunas columnas proporcionalmente más delgadas o más anchas que otras.

Los periódicos impresos generalmente usan una cuadrícula de columnas simétricas para organizar sus historias.

diseño de cuadrícula de columna tipos de diseño de grilla

Un gran ejemplo de una cuadrícula de columna asimétrica es el diseño general de una publicación de blog (debajo del encabezado). Si observa la siguiente publicación de blog de este ejemplo , puede ver fácilmente que está compuesta por dos columnas de diferentes anchos: el contenido de la publicación de blog y la barra lateral.

image: https://visme.co/blog/wp-content/uploads/2018/03/How-Grids-Can-Help-You-Create-Professional-Looking-Designs-Column-Grid-website.png

columna cuadrícula ejemplos diseño diseño tipos de cuadrículas

El siguiente ejemplo de revista usa una cuadrícula de tres columnas con anchuras proporcionales. El título y los subtítulos ocupan el espacio de las tres columnas, mientras que parte del texto resaltado ocupa el espacio de dos columnas.

tres columnas ejemplos de cuadrícula diseño tipos de diseño de cuadrículas

diseño de cuadrícula de columna tipos de diseño de cuadrículas

columna cuadrícula ejemplos diseño diseño tipos de cuadrículas

Rejilla modular

Una cuadrícula modular es similar a una cuadrícula de columnas en que tiene columnas, pero también tiene filas. Este tipo de cuadrícula se utiliza cuando hay más elementos para organizar y una cuadrícula de columna no es suficiente. Los periódicos usan columnas y cuadrículas modulares para organizar las historias de manera cómoda y fácil de leer. Las rejillas modulares tienen módulos de igual tamaño. Esto hace que sea más fácil «romper las reglas» y usar las zonas espaciales de diferentes maneras.

diseño de cuadrícula modular tipos de diseño de cuadrículas sistema de cuadrícula de diseño de cuadrícula

Las cuadrículas modulares también son excelentes para diseñar formularios, gráficos y horarios. También se usan mucho en sitios web de comercio electrónico. La página de inicio de su teléfono que muestra todas las aplicaciones tiene una cuadrícula modular. Instagram también usa una cuadrícula modular para mostrar tu feed.

Ejemplos de cuadrícula modular de iPhone Tipos de diseño de diseño de cuadrículas Sistema de cuadrícula de diseño de cuadrícula

Cuadrícula de referencia

Una línea de base es la línea donde se encuentra el texto. Liderar es el espacio entre líneas de base. Se puede aplicar una cuadrícula de referencia a cualquiera de las cuadrículas mencionadas anteriormente. El uso de una cuadrícula de referencia dará un ritmo fluido al texto. También le dará a los títulos y subtítulos un espacio proporcional en relación con el texto del cuerpo, haciéndolos más agradables para el lector.

diseño de cuadrícula de referencia tipos de diseño de cuadrículas

Hay una cuadrícula de referencia en algo que usó mucho durante la escuela y que todavía podría estar usando ahora. Los cuadernos forrados tienen una cuadrícula de referencia. No es de extrañar que los maestros siempre quisieran que escribiéramos en papel de cuaderno en lugar de papel blanco. Mantuvo un buen ritmo en nuestras tareas escritas. A menos que, por supuesto, nuestra letra fuera muy pequeña o muy grande, y luego el ritmo se fue por la puerta.

Si observa detenidamente este papel de cuaderno escrito, verá que también tiene una cuadrícula de documentos que crea márgenes. Las cuadrículas se encuentran prácticamente en todas partes donde se presentan el texto y las imágenes. ¿Por qué no te desafías a encontrarlos?

diseño de cuadrícula de línea de base de papel de cuaderno tipos de diseño de cuadrículas

Rejillas Jerárquicas

Las cuadrículas jerárquicas se utilizan principalmente en diseño web. El propósito de un diseño de cuadrícula jerárquica es organizar los elementos en orden de importancia. Todavía se llama una cuadrícula porque los módulos todavía se configuran dentro de una cuadrícula manuscrita medida.

Se puede configurar una cuadrícula jerárquica de estilo libre o con una cuadrícula modular como guía. Tener el conocimiento para establecer una cuadrícula jerárquica equilibrada sin una cuadrícula modular guía, lleva años de práctica.

Esta es la razón por la cual los diseñadores crean plantillas de sitios web para que los no diseñadores simplemente coloquen su información. Incluso los diseñadores experimentados usan plantillas ya construidas para ahorrar un tiempo precioso.

En su traslado a las plataformas digitales, los periódicos pasaron de las cuadrículas de columnas simétricas habituales a las cuadrículas jerárquicas con columnas dentro de las zonas espaciales.

diseño de cuadrícula jerárquica tipos de diseño de cuadrículas

Un poco de historia del diseño Trivia

Antes de la era de las computadoras, las cuadrículas de diseño se dibujaban en maquetas con bolígrafo azul. Cada línea de la cuadrícula tenía que medirse y dibujarse a mano con reglas en T. Si los diseñadores quisieran usar una cuadrícula estándar, podrían usar plantillas de cuadrícula impresas en tinta azul que se colocaron debajo de papel de calco grueso.

El diseñador luego configuró su diseño en la parte superior. Las imágenes se dibujaron como rectángulos o cuadrados con dos líneas entrecruzadas de esquina a esquina. Los editores de diseño basados ​​en computadora reflejan las prácticas de diseño de cuadrícula de diseño de hace años. Se usó tinta azul porque no apareció en las películas preimpresas.

¿Cómo usan la jerarquía los diseñadores en el diseño web?

La jerarquía es una condición en la que los elementos se configuran en orden de importancia. La palabra proviene del concepto de realeza: el rey y la reina son primero, luego el príncipe y la princesa, luego los duques y demás. Los diseñadores web usan la jerarquía para asegurarse de que la información más importante se vea primero. El llamado a la acción y los avisos especiales son los primeros en destacarse.

Depende del tipo de sitio web que se está diseñando. Por ejemplo, una revista o blog en línea podría usar un diseño jerárquico en su página de inicio, mostrando artículos en diferentes tamaños. Usando titulares en diferentes tamaños de fuente también. Los sitios web de comercio electrónico utilizan páginas de destino que tienen una o dos llamadas a la acción y esas deben ser las más notables.

Las cuadrículas jerárquicas son las más desapercibidas de todas. Su propósito es llamar la atención sobre elementos específicos y lo hacen sin que el espectador sepa que se ha hecho a propósito. ¡Un buen diseño jerárquico puede obtener mejores conversiones!

Listo?Cree contenido visual de aspecto profesional con esta herramienta de bricolaje.

Rejillas de composición

La regla de los tercios

Esta es una cuadrícula de composición que separa cualquier espacio en una cuadrícula de nueve espacios iguales. Este sistema de cuadrícula puede ser vertical u horizontal, pero los nueve espacios siempre tienen que ser exactamente del mismo tamaño. Los elementos en el diseño se posicionan de dos maneras.

Los puntos de enfoque se colocan de acuerdo con el lugar donde se cruzan las líneas desde la parte superior izquierda, superior derecha, inferior izquierda y luego inferior derecha. Otros elementos importantes, generalmente el texto del cuerpo, se colocan dentro de los espacios creados por las líneas de intersección.

Se cree que The Rule of Thirds crea una composición agradable para el espectador. Al seguir la cuadrícula de la Regla de los tercios, se asegura de que su diseño sea equilibrado y proporcional. Se utiliza en diseño gráfico y también en fotografía.

image: https://visme.co/blog/wp-content/uploads/2018/03/How-Grids-Can-Help-You-Create-Professional-Looking-Designs-Rule-of-Thirds.png

composición cuadrículas regla de tercios diseño tipos de diseño de cuadrículas

Fuente de imagen

La proporción áurea

La proporción áurea también se llama espiral de oro o media dorada. Es un fenómeno de composición que se encuentra en la naturaleza y que también se aplica al diseño. Muchos logotipos famosos se crearon usando la Proporción Dorada y también se usa muy comúnmente en fotografía.

La proporción áurea está estrechamente relacionada con la secuencia de Fibonacci. Esta ecuación matemática rige la medición del Rectángulo Dorado, una forma que está perfectamente equilibrada. El uso de la proporción áurea o un grupo de rectángulos dorados en sus diseños seguirá la antigua composición de la naturaleza.

secuencia de Fibonacci diseño de proporción áurea tipos de diseño de cuadrículas

Rejillas Compuestas

Cuando los diseñadores usan cuadrículas, no siempre se adhieren a lo básico. Mezclar cuadrículas es una forma común de hacer que el diseño del diseño sea más creativo y atractivo. Un documento de varias páginas seguirá las mismas medidas de la cuadrícula del manuscrito pero tendrá diferentes cuadrículas para diferentes partes de los formatos.

Observe cómo se ve el diseño de una revista cuando las páginas se abren y se configuran una al lado de la otra. Observe los espacios que mantienen la misma proporción de página a página y los otros que son diferentes en cada página. El uso de cuadrículas compuestas de una manera creativa hará que sus diseños sean más agradables. ¡Este dominio requiere mucha práctica!

rejillas compuestas

Este ejemplo del diseño página por página de una plantilla de revista completa de Graphic River es un gran ejemplo de una cuadrícula compuesta. Cada página es diferente pero cada página mantiene una grilla básica. Puede notarlo en el pie de página y en el número de página y en el centrado de las columnas y elementos.

Elegir la cuadrícula correcta para el diseño de diseño

Elegir la mejor cuadrícula dependerá de qué tipo de diseño va a trabajar. Los diseños con mucho texto necesitan cuadrículas de diseño. Los diseños con muchas composiciones abstractas de color y forma funcionan mejor con la regla de los tercios o la media dorada. Si está contratando un diseñador, ¡confíe en su diseñador!


One Thought on “Tipos de cuadrículas para crear diseños profesionales”

Comments are closed.