Armonía horizontal. Es una de esas cosas que parece que solo notas cuando falta. La armonía horizontal es la relación entre los elementos a través de un diseño. Es más que líneas y reglas; También es una rejilla invisible que crea un sentido de lugar para los elementos de diseño.
¿Cómo puedes crear armonía horizontal? Si bien algunas técnicas son más fáciles que otras, no es un concepto abrumador. Solo se necesita un poco de planificación. Al pensar en cosas como una cuadrícula de línea de base, el espacio entre líneas de texto, la ubicación de los elementos y la estética general, la armonía horizontal es solo una parte del proceso de diseño.
Cuadrículas de línea de base
Baseline grids, una herramienta de diseño popular en proyectos impresos, es menos frecuente en el diseño web. La razón es simple: muchos proyectos web (y digitales) presentan una única columna de texto.
La cuadrícula de línea de base es una línea imaginaria en la que se encuentra el tipo. Cada letra del texto descansará en esta cuadrícula para que se alineen varias columnas de tipo. (Esto evita que las columnas tengan un aspecto irregular).
Las cuadrículas de línea de base pueden funcionar para casi cualquier propósito tipográfico y la mayoría del software de diseño incluye herramientas para crear especificaciones de cuadrícula de base. Esto se vuelve un poco más complicado en línea, pero también hay líneas de base de CSS, incluido un buen ejemplo de Smashing Magazine.
La cuadrícula de línea de base solo funciona cuando se aplica a todas las columnas del diseño, donde el tipo comienza y termina en la misma ubicación (generalmente la parte superior e inferior de una página). Además, la cuadrícula de línea de base generalmente se aplica a toda la página en un proyecto digital y la propagación (o páginas opuestas) en proyectos impresos.
Las cuadrículas de línea de base son diferentes a las alturas de línea o las especificaciones principales, principalmente porque una cuadrícula de línea de base determina dónde reposan las letras. La cuadrícula puede obligar a las líneas a escribir para estar más juntas o espaciadas más distantes. (En Adobe InDesign, por ejemplo, una cuadrícula de línea de base anulará el encabezado, lo que obligará al texto a vivir en la cuadrícula apropiada).
Lo bueno de una cuadrícula de base es la limpieza del texto. Cuando todo se alinea de una manera organizada, el resultado es letras que son fáciles de leer y mirar. No hay sentimientos discordantes. Hay una razón por la que los libros, periódicos y revistas (que se basan en varias columnas de texto en una página) han estado haciendo esto durante años.
Insinuación: Establecer una cuadrícula de línea de base
- InDesign: en el menú Editar, seleccione Preferencias, luego Rejillas. Puede establecer un color para la cuadrícula de línea base, donde comienza la cuadrícula (parte superior de la página o margen superior) y el incremento (altura de la cuadrícula). Snap to Guides se aplicará a la cuadrícula de línea de base.
Líder
Líder, la cantidad de espacio entre líneas de tipo, es otra herramienta importante al crear armonía en la página o la pantalla. El texto debe tener una dirección consistente.
Piénselo de esta manera: si el Párrafo 1 es un tipo de 14 puntos con 16 puntos adelante y el Párrafo 2 es un tipo de 14 puntos con 12 puntos adelante, causará problemas al lector. Este cambio es difícil para el ojo y puede dificultar la lectura. Esto es cierto incluso con una sola columna de texto.
Especialmente en proyectos impresos, la combinación de una guía consistente y una cuadrícula de línea de base complementaria son ideales. Este emparejamiento asegurará que el tipo se alinee de columna a columna y tenga una sensación consistente de arriba a abajo.
Mantener el espacio constante
La cantidad de espacio entre los elementos es igual de importante. ¿Hay una línea de espacio entre los párrafos? ¿Qué hay entre el encabezado y el texto principal? ¿O una foto y el texto a su alrededor?
Determine las reglas de espaciado que funcionan con su cuadrícula de línea de base y las principales especificaciones para garantizar que los espacios alrededor de los elementos sean consistentes. Será más fácil crear y mantener la coherencia con estos espacios si también están configurados para trabajar con sus especificaciones de tipo.
Vaya un paso más allá y considere el espacio vertical también: ancho de canal, envolturas de texto y márgenes. Estos espacios también deben ser parte de su esquema de espaciado consistente.
Alinearlo
¿El texto es de 14 puntos? Construye elementos para que coincidan.
Después de que tenga una buena idea del texto en un proyecto, otros elementos entrarán en juego. Estos elementos también deben alinearse en su cuadrícula invisible. El texto, las fotos, las líneas, los botones y cualquier otro elemento de diseño deben funcionar juntos cuando se miran en la página o la pantalla.
Esto puede llevar un poco de planificación. Cuando se trata de imágenes, dibuje ubicaciones y cómo cada una descansará en la cuadrícula horizontal. La parte inferior del marco de la foto debe apoyarse en la cuadrícula de la línea de base con texto y detenerse en alineación con la parte superior de las letras mayúsculas para una armonía perfecta.
Piensa en piezas pequeñas, como botones o elementos de navegación, de la misma manera. Con partes pequeñas, considere las alturas verticales de estos elementos para que coincidan con el texto inicial o un múltiplo de él. (Solo recuerda considerar cualquier espacio adicional que tengas entre líneas).
Pensar en bloques
Si toda esta cuadrícula y líder de línea de base hace girar la cabeza, pensar en una cuadrícula en bloques podría ser más fácil. El papel gráfico de la vieja escuela que usaste en la escuela primaria puede ser el cuaderno de bocetos perfecto para esta aplicación. (El paquete de software Adobe también tiene un modo de cuadrícula que puede aplicar al fondo al dibujar digitalmente). Planifique su proyecto de diseño de modo que cada pieza encaje dentro de un número determinado de bloques.
Por ejemplo, el texto es de dos bloques de altura. Otros elementos serán iguales a los múltiplos de texto, haciendo que las imágenes tengan ocho bloques de alto y cuatro botones de alto. El espaciado entre los elementos es también dos bloques, vertical y horizontalmente. (¿Obtener la imagen?)
Insinuación: Establecer una cuadrícula de documentos
- InDesign: en los menús de InDesign, Edición (en Windows), seleccione Preferencias y luego Rejillas. Puede establecer un color para la cuadrícula, especificar espaciado horizontal y vertical y subdivisiones. La cuadrícula se puede configurar para que aparezca detrás o delante de los objetos en el diseño.
- Photoshop: en el menú Edición de Photoshop (en Windows), seleccione Preferencias, luego Guías, Cuadrícula y sectores. Establezca la especificación para cada línea de cuadrícula, incluido el color, el espaciado y las subdivisiones.
Pensamiento horizontal para proyectos verticales
La armonía horizontal no es solo algo en lo que pensar cuando se trabaja en proyectos que se extienden a lo largo de un espacio largo, puede ser igualmente importante en proyectos orientados verticalmente.
Considere la importancia de la armonía horizontal para un sitio web con características de desplazamiento de paralaje. Cada pantalla? Debe trabajar en armonía horizontal mientras se mueve hacia arriba y hacia abajo. Un sitio web móvil, a menudo visto en orientación vertical, necesita moverse de una manera que tenga sentido.
Lo mismo es cierto para proyectos de impresión más pequeños también. Mira una etiqueta en un envase de bebida. El texto es probable que se establezca en una cuadrícula que envuelve el contenedor.
Conclusión
La armonía horizontal está en todas partes. La clave es que realmente no lo ves. Los proyectos se sentirán bien cuando estén allí, y se sentirán un poco apagados cuando no lo estén.
Como diseñador, es importante pensar en las cuadrículas y la alineación a lo largo del proceso de diseño. El resultado final de un diseño es crear algo que sea legible, utilizable y efectivo. La armonía horizontal puede ayudarte a lograr esto.