Diseño de cuadrícula primero Cómo crear ritmo y armonía verticales

Cuando escuchas grid, ¿qué es lo primero que se te ocurre? Para la mayoría de los diseñadores, a menudo se trata de un concepto horizontal con columnas en el lienzo. Esto es especialmente cierto cuando se piensa en proyectos web y de diseño digital.

Pero ¿qué pasa con las rejillas verticales? Es igual de importante crear un flujo arriba y abajo de la página también. Y hay varias maneras de hacer esto con los sistemas de red.

¿Por qué usar una rejilla vertical?

Si aún no está pensando en las rejillas verticales en sus proyectos de diseño, es posible que se pregunte por qué esto es importante. Una cuadrícula vertical ayuda a lograr el ritmo vertical y la armonía en la página.

La cuadrícula ayudará a establecer y establecer reglas para el diseño, ya sea impreso o digital. Esta estructura facilita el diseño del dibujo y proporciona pautas para el espaciado, la colocación de elementos y el tamaño del texto y otros objetos en el lienzo. Una cuadrícula vertical también crea un patrón y flujo rítmico para un sitio web a medida que los usuarios se desplazan. (Esto puede ser especialmente importante en dispositivos más pequeños.)

El efecto general es un diseño que, si lo trazas, se ve con flujo. Los elementos están bien espaciados, las transiciones son fáciles de ver y entender, y cada parte diferente del diseño se siente determinada y parte del plan.

Solo mira la estructura de alambre arriba. Puede dibujar líneas en el boceto para que cada elemento se alinee en el mismo plano. Este flujo visual es exactamente lo que quieres lograr.

Grillas para texto

Una cuadrícula vertical es especialmente importante cuando se trata de texto. Se puede utilizar de varias maneras para crear un flujo en la copia. Todo se reduce a su cuadrícula de base.

La cuadrícula de línea de base es un conjunto imaginario de líneas horizontales igualmente espaciadas (piense en el papel rayado que usó en la escuela primaria) al que se alinea el texto. La parte inferior (línea de base) de las letras descansa en estas líneas, de modo que existe un espaciado igual entre las líneas de texto y que las columnas de texto también se alinean entre sí.

Aquí hay un par de aplicaciones:

  • Cree dos columnas y mantenga su tipo en la línea de base.
  • Usa las matemáticas para alinear todo tipo, sin importar el tamaño a la escala de base.

Pero como lo haces? Comienza con un poco de "tipografía matemática". (El concepto es prácticamente el mismo para proyectos impresos o digitales).

  • Elija la fuente y el tamaño del texto del cuerpo.
  • Establecer las líneas de cuadrícula o la cantidad de espacio entre las líneas de texto.
  • Utilice esa misma proporción para otros espacios en el diseño.
  • También puede utilizar múltiplos de la cuadrícula de línea de base para los elementos. Entonces, si el texto del cuerpo es de 16 puntos, el texto más grande puede ser de tamaño dos veces la altura de la línea.

Esta matemática de cuadrícula de referencia también hace algo más. Le ayuda a crear una jerarquía tipográfica porque cada nuevo nivel de texto se apila en proporción a otros niveles de texto.

Rejillas para pantallas o paneles

Las cuadrículas verticales son una de las herramientas esenciales en el diseño página por página, como los sitios web con funciones de desplazamiento de paralaje. Cada página debe tener el mismo tamaño y la misma sensación para que cada página se sienta como una parte continua de la misma historia y estética.

La mayoría de los diseñadores hacen esto con color o un toque de animación para hacer que las pantallas se ajusten? en su lugar con cada pergamino. Cuando los elementos están alineados en perfecta orientación vertical, cada pantalla se puede ver de una vez y no está a la mitad, la mitad está fuera de la pantalla. Esta cuadrícula vertical crea una armonía adecuada y contribuye a una legibilidad adecuada y una experiencia de usuario más deseable.

El marco para este estilo de diseño depende de un buen flujo vertical. Los elementos deben posicionarse de manera similar a medida que el usuario se desplaza. El tipo debe tener un formato de columna similar y el tamaño y el espaciado de las letras y los elementos deben ser coherentes de pantalla a pantalla.

Estas pequeñas señales son el hilo que mantiene al usuario enfocado y crea una comprensión visual y fluye de una parte de información a la siguiente.

Grillas para tarjetas

El diseño estilo tarjeta es uno de los elementos más populares y de tendencia del año y funciona gracias a una cuadrícula vertical. La cuadrícula vertical lo ayuda a crear una tarjeta que tiene una sensación distinta, un espacio adecuado y un espacio cómodo para múltiples elementos en un solo contenedor.

Piense en todos los lugares para usar una cuadrícula vertical con una tarjeta:

  • Espaciado entre tarjetas en un diseño. (Una tarjeta por pantalla en dispositivos móviles).
  • Espaciado de borde interno para la tarjeta entre elementos como imágenes, texto o botones.
  • Dimensionamiento para cada elemento.
  • Jerarquía y dimensionamiento del texto.

Grids para E-Commerce

Las cuadrículas verticales (y horizontales) son una opción popular para los sitios web de comercio electrónico debido al flujo organizativo distinto. Los artículos se pueden colocar uno al lado del otro para que los usuarios puedan comparar y tomar decisiones antes de realizar una compra.

Mire de cerca y probablemente encontrará que el resto del marco del sitio web también seguirá este mismo ritmo vertical. El uso sutil de la red es cómodo y hará que los compradores se sientan cómodos, confíen en el diseño gracias a una buena organización y, con suerte, hagan una compra.

Grillas para la organización general

Solo porque está usando una cuadrícula, su diseño no tiene que tener una apariencia de mampostería o cuadrícula. Usa la cuadrícula en múltiples y mitades para crear interesantes combinaciones de elementos que caen en armonía.

Y siéntase libre de romper la red de vez en cuando. A veces terminará en una situación en la que el múltiplo de la cuadrícula simplemente no se ve bien, especialmente cuando se trata de escribir ascendentes o descendientes que faltan. Está bien falsearlo un poco entonces. Recuerde, incluso si está utilizando una cuadrícula y parece gracioso, interrumpirá la armonía y el flujo. Realice esas correcciones visuales y ajustes según sea necesario.

Conclusión

Entonces, ¿por qué el ritmo vertical y una cuadrícula son tan importantes? Cuando se trata de texto, ayuda a evitar que un usuario se canse al leer. Para otros elementos crea un sentido distinto de armonía y flujo.

A las personas les gusta la organización por naturaleza y desean que los diseños sean fáciles de entender de un vistazo. Un buen sistema de cuadrícula puede ayudarlo a lograrlo con facilidad. Una vez que se establece la cuadrícula, es más fácil imaginar las ubicaciones de elementos, tamaños y formas, ya que puede ajustarlas al marco que ya ha dibujado.

Fuente de la imagen: baldiri.