Diseño de primera cuadrícula: cómo crear ritmo y armonía verticales
Cuando escuchas grilla, ¿qué es lo primero que te viene a la mente? Para la mayoría de los diseñadores, a menudo es un concepto de base 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 hacia arriba y hacia abajo de la página también. Y hay varias maneras de hacer esto con los sistemas de cuadrícula.
Explore los elementos de Envato
¿Por qué usar una cuadrícula vertical?
Si aún no está pensando en las cuadrículas 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 hace que el diseño sea más fácil de dibujar 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 rítmico y un flujo 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 dibuja con estilo de estructura metálica tiene un aspecto con flujo. Los elementos están bien espaciados, las transiciones son fáciles de ver y comprender y cada parte diferente del diseño tiene un propósito y es 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.
Cuadrículas para texto
Una cuadrícula vertical es especialmente importante cuando se trata de texto. Se puede usar de varias maneras para crear flujo en copia. Todo se reduce a su cuadrícula de referencia.
La cuadrícula de referencia es un conjunto imaginario de líneas horizontales igualmente espaciadas (piense en el papel reglado que utilizó en la escuela primaria) con el que se alinea el texto. La parte inferior (línea de base) de las letras descansa sobre estas líneas para que haya un espacio igual entre las líneas de texto y que las columnas de texto también se alineen entre sí.
Aquí hay un par de aplicaciones:
- Cree dos columnas y mantenga su tipo en la línea de base.
- Use las matemáticas para alinear todo tipo, independientemente del tamaño de la escala de referencia.
Pero como lo haces? Comienza con un poco de "matemática tipográfica". (El concepto es prácticamente el mismo para proyectos impresos o digitales).
- Elija la fuente y el tamaño del texto del cuerpo.
- Establezca las líneas de la cuadrícula o la cantidad de espacio entre líneas de texto.
- Use esa misma proporción para otros espacios en el diseño.
- También puede usar múltiplos de la cuadrícula de referencia para los elementos. Entonces, si el texto de su cuerpo es de 16 puntos, el texto más grande puede tener un tamaño de dos veces la altura de la línea.
Esta cuadrícula matemática de referencia también hace algo más. Le ayuda a crear una jerarquía de tipografía 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 de 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 tener la misma sensación para que cada nueva página parezca 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 "encajen" en su lugar con cada desplazamiento. Cuando los elementos se alinean en una orientación vertical perfecta, cada pantalla se puede ver de una vez y no está medio encendida, sino fuera de la pantalla. Esta cuadrícula vertical crea una armonía adecuada y contribuye a la legibilidad adecuada y a una experiencia de usuario más deseable.
El marco para este estilo de diseño depende de un buen flujo vertical. Los elementos deben colocarse de manera similar a la que se desplaza el usuario. El tipo debe tener un formato de columna similar y el tamaño y el espaciado de las letras y los elementos deben ser consistentes de pantalla en pantalla.
Estas pequeñas señales son el hilo que mantiene al usuario enfocado y crea comprensión visual y fluye de una porción de información a la siguiente.
Rejillas para tarjetas
El diseño estilo tarjeta es uno de los elementos más populares y de tendencia del año y funcionan gracias a una cuadrícula vertical. La cuadrícula vertical le 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).
- Intervalo de borde interno para la tarjeta entre elementos como imágenes, texto o botones.
- Dimensionamiento para cada elemento.
- Jerarquía de texto y dimensionamiento.
Rejillas para comercio electrónico
Las cuadrículas verticales (y horizontales) son una opción popular para los sitios web de comercio electrónico debido al flujo organizativo distintivo. 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 cuadrícula 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 esperemos que hagan una compra.
Cuadrículas para la organización general
Solo porque está utilizando una cuadrícula, su diseño no tiene que tener una apariencia de mampostería o basada en la cuadrícula. Use la cuadrícula en múltiples y mitades para crear combinaciones interesantes de elementos que caen en armonía.
Y siéntase libre de romper la red de vez en cuando. A veces terminarás en una situación en la que la cuadrícula múltiple simplemente no se ve bien, particularmente cuando se trata de escribir ascendentes o descendientes faltantes. Está bien para evitarlo un poco entonces. Recuerde, incluso si está utilizando una cuadrícula y se ve divertido, interrumpirá la armonía y el flujo. Realice esas correcciones y ajustes visuales según sea necesario.
Conclusión
Entonces, ¿por qué es tan importante el ritmo vertical y una cuadrícula? Cuando se trata de texto, ayuda a evitar que un usuario se canse mientras lee. Para otros elementos, crea un sentido distintivo de armonía y flujo.
A las personas les gusta la organización por naturaleza y quieren 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, las ubicaciones de los elementos, los tamaños y las formas son más fáciles de imaginar porque puede ajustarlos al marco que ya ha esbozado.
Fuente de la imagen: baldiri.
