¿Alguna vez ha mirado un diseño, una fotografía o incluso una obra de arte y lo encontró inmensamente agradable a la vista?
A menudo no es solo la calidad de las imágenes, el objeto de las fotos o incluso los colores en ellas. Pero la mayoría de las veces, es una buena composición y ubicación estratégica de elementos para hacerlo más atractivo a la vista.
Esta técnica de diseño es probablemente el truco más antiguo del libro y se conoce como la regla de los tercios en el diseño, aunque varias carreras de arte utilizan este principio para hacer que su trabajo sea atractivo para la mirada humana.
Si alguna vez asististe a una escuela de arte, hiciste un curso de diseño gráfico o web, o tomaste cursos de fotografía, debes conocer bien el principio de la regla de los tercios en el diseño gráfico.
¿Qué es la regla de los tercios?
La regla de los tercios en el diseño es un tipo de composición o diseño en el que una foto, una obra de arte, una presentación de diseño o una página web se divide en partes iguales en una cuadrícula imaginaria (o literal para principiantes) de 3×3 de nueve segmentos.
En una situación ideal, el tema de su diseño se coloca estratégicamente en los cuatro puntos de interés (puntos de intersección), pero se puede cambiar según la visión del diseñador.
Este uso de una cuadrícula de 3×3 para dividir la hoja hipotética en 9 columnas con 3 líneas verticales y 3 horizontales crea suficiente tensión para aportar una dinámica divertida a tu pieza y retener el movimiento del ojo humano, manteniéndolo constantemente atento.
Aunque este principio se conoce como la regla de los tercios, debe tratarlo más como una guía que como una regla estricta. Pero muchos diseñadores confían en la regla del tercer método para ayudarlos a mantener el marco equilibrado, simétrico y proporcionado.
El patrón de cuadrícula para la regla de los tercios se basa en un elemento de diseño muy antiguo conocido como la proporción áurea. La proporción áurea es una proporción geométrica que garantiza una bella proporcionalidad dondequiera que se aplique.
El ejemplo más común de la proporción áurea que conocemos es el de las pirámides de Egipto, el Partenón de Atenas y muchas catedrales e iglesias góticas.
La proporción áurea se aplica principalmente a los rectángulos, lo que significa que es perfecta para nuestros teléfonos, tabletas y pantallas de escritorio. Esta proporción áurea crea una distribución perfecta cuando se aplica a cualquier rectángulo y se puede utilizar para el diseño web como guía para la colocación de elementos. Funciona como una base efectiva desde donde aparecen las líneas verticales y horizontales de la cuadrícula.
¿Cómo se usa la regla de los tercios en el diseño?
La regla de los tercios se utiliza en el diseño aprovechando las intersecciones de la cuadrícula, también conocidas como puntos óptimos, que son la mejor guía para la colocación de objetos/logotipos/textos. Esto se debe a que cuando el ojo cae en una pantalla, hoja o imagen, se está moviendo inconsciente y constantemente sobre la página.
Al entrenar su ojo y su mente de diseño para colocar sus elementos clave en estos puntos clave, se asegura de que su usuario se concentre en el punto focal previsto establecido por usted como diseñador.
No importa si esta cuadrícula se coloca en formato vertical u horizontal, las mismas reglas se aplican a ambos siempre que tenga 9 líneas que se cruzan y una cuadrícula de 3×3.
Ya sea que desee convertirse en diseñador web, fotógrafo, arquitecto o cualquier artista, la regla de los tercios será su amigo cercano.
Regla de los tercios en diseño web
El diseño web tiene que ver con atraer a la audiencia, narrar su historia y hacer un punto con su declaración mientras mantiene el diseño general libre de grupos.
Este tipo de diseño generalmente se logra mejor mediante el uso de la regla de los tercios en lugar de la simetría centralizada. Esto se debe a que, en un diseño centrado en el centro, la sensación de simetría es fuerte pero también bastante rígida. Mientras que, la regla de los tercios, invita a la mirada a recorrer lentamente todo el diseño asimilando los elementos uno por uno.
En esta imagen, el objeto (el edificio) ha sido centralizado para lograr un fuerte sentido de simetría. Aunque bastante hermosa, esta imagen se siente muerta, vacía y estancada. No hay lugar para que el ojo se mueva porque el centro de la foto retiene un fuerte enfoque.
Por otro lado, esta imagen se siente más dinámica y cuanto más la recorre con la mirada, más detalles tiende a encontrar. Este es un ejemplo clásico de creación de marcos dinámicos en fotografía, diseño web o diseño gráfico utilizando la regla de los tercios.
La regla de los tercios en el diseño web es importante y eficaz. Toma todas las conjeturas y las dificultades de crear una composición y un diseño dinámicos al brindarle una cuadrícula probada y comprobada para trabajar.
Esto es genial porque una vez que tienes una plantilla base con la que trabajar, puedes concentrar toda tu energía en tu diseño y contenido. Los “puntos dulces” en la regla de los tercios se pueden usar para colocar texto o imágenes, sí, pero también se pueden usar como guías para hacer una declaración calculada en su sitio web.
El punto de intersección superior izquierdo se vuelve extremadamente importante en el diseño web o gráficos porque las personas tienden a escanear la página del sitio web en lo que se conoce como un patrón Z (de izquierda a derecha y luego de arriba a abajo) o un patrón F (de arriba a abajo). Por lo tanto, la esquina superior izquierda obtiene la vista de usuario máxima como se muestra en la imagen de arriba.
Puede usar la regla de los tercios en el diseño y colocar el mensaje importante como un llamado a la acción en uno de los puntos clave que es la esquina superior izquierda.
El resto de los elementos principales también se pueden colocar en otras intersecciones para crear una imagen hermosa, equilibrada y dinámica que impulsa al ojo a moverse y asimilar la información proporcionada con facilidad.
Ejemplos de diseño web de la regla de los tercios
Por ejemplo, en este diseño web, el foco principal está en los zapatos. Cuando percibes esta imagen al principio, tus ojos se fijan inmediatamente en la llamada a la acción ubicada en uno de los puntos dulces superiores a la derecha. El enfoque de la llamada a la acción se mejora mediante el uso de texto contrastante y tipografía en negrita.
Además, el botón de exploración que lo lleva al sitio en detalle es lo siguiente que se coloca en el punto de intersección para hacer una declaración.
Este excelente ejemplo de diseño de página web que usa la regla de los tercios es una prueba de que se toman las decisiones más simples para crear las imágenes más fuertes.
Esta regla se puede utilizar con los principios y elementos de diseño como el color, la forma, el tamaño, el contraste, la jerarquía y la tipografía, para crear una yuxtaposición entre los elementos de la página web para un diseño impecable, potente y hermoso.
El mismo enfoque se puede tomar para diseñar una página web para teléfonos, hacer presentaciones o en el campo del diseño gráfico.
Por ejemplo, en esta imagen, las infografías de los SOP se han colocado en cada punto de intersección. Esto se debe a que la ayuda visual es mucho más importante para enviar un mensaje al público y, por lo tanto, se les da el lugar principal.
Dentro de estas infografías, la más importante, “Use una máscara facial en todo momento”, se ha colocado en la esquina superior izquierda donde el ojo se mueve durante el período más largo.
Estos son algunos excelentes ejemplos de diseño gráfico simple pero poderoso creado mediante el uso efectivo de la regla de los tercios.
Entonces, si usted es un novato, un profesional o un estudiante que intenta aprender formas de crear diseños web poderosos, aprenda de los precedentes y vea cómo los maestros antes que usted han usado esta cuadrícula simple para su beneficio. ¡No querrás crear un mal diseño de sitio web!
La conclusión: use la regla de los tercios en el diseño
La regla de los tercios ha estado ayudando a los diseñadores durante más de 100 años y continúa haciéndolo.
Todo lo relacionado con el diseño web y gráfico se basa en la composición y el diseño. La composición es tan crucial para el diseño web que incluso las imágenes más atractivas y el texto más llamativo no funcionarán juntos si la composición general no sigue una guía, cuadrícula o plantilla.
Si está buscando un diseño simple, limpio pero fuerte, el uso de la regla de los tercios en el diseño gráfico no solo lo guiará sobre dónde colocar las imágenes, el texto o el logotipo, sino que también le permitirá ver y determinar el espacio negativo.
El espacio negativo es el espacio de “respiración” alrededor de las imágenes y el texto en una composición donde no se coloca texto, imagen o patrón. Establecer el espacio negativo en un diseño web puede aumentar el factor de legibilidad y crear una experiencia de usuario agradable.
Hay múltiples formas de usar esta regla en el diseño web y gráfico y cuanto más experimente con ella, mejor podrá medir la ubicación adecuada de los elementos en una página web.
Artículos relacionados
