Cómo Mejorar tus Diseños con la Regla de los Tercios

Cuando estamos creando algo, nos puede surgir una pregunta: ¿qué es lo que hace bueno a un diseño? ¿Cómo podemos saber si nuestros diseños van a funcionar? Hace unas semanas estuvimos hablando sobre algunos principios básicos para mejorar nuestros diseños. Y es que si seguíamos algunas de las pautas que os mostrábamos en ese texto, al menos teníamos asegurados cierta armonía y sentido de la composición en nuestras creaciones. Y sobre esas bases, se crean diferentes reglas a la hora de diseñar. Siendo una de las más importantes la Regla de Tercios.

Esta regla es una de las más básicas dentro de la composición fotográfica. Aunque perfectamente la podemos aplicar a otros campos, como son el cine o, lo que más nos va a interesar, el diseño gráfico y el diseño web. Seas o no un amante de la fotografía, seguro que has oído hablar de esta regla, pero puedes que no tengas totalmente claro en que consiste y como funciona. Por lo que, antes de pasar a ver como podemos aplicarla a nuestro mundo, vamos a ver realmente que es.

Cómo funciona la Regla de Tercios

La regla de tercios no es más que una rejilla que superponemos a nuestro lienzo en blanco, y donde magnificamos ciertos puntos de interés. Es una aproximación a la proporción áurea, que se basa en la distribución del espacio dentro de una imagen, generando una mayor atracción respecto al centro de interés.

Para crear esta rejilla, solo tenemos que dividir nuestra imagen en tres franjas horizontales de igual anchura, y tres franjas verticales de igual anchura. Los puntos de intersección de las lineas de separación de estás franjas son los llamados puntos de interés o puntos fuertes. En estos puntos es donde tendremos que situar los elementos importantes de nuestro diseño. O aquellos elementos que queramos que sean donde primero se fije nuestro espectador.
puntos atencion ojo regla tres tercios
Situando los elementos de interés en los puntos fuertes, evitamos que nuestros diseño sea tan estático. Los dotamos de cierto movimiento y sentido de complejidad, sin que parezca todo demasiado recargado. Además de crear una imagen visualmente más placentera.

Por si misma, la regla de los tercios no nos va a proporcionar mágicamente un equilibrio en nuestro diseño. Pero al hacer uso de este principio, es fácil usar esta tendencia hacia un punto focal natural para ayudar a informar al espectador del equilibrio en el diseño. Pero, ¿que ocurre si tenemos no un punto de interés, sino dos? Pues lo ideal es situar estos dos elementos en dos puntos fuertes opuestos. Es decir, uno en la parte superior derecha y otro en la inferior izquierda. O uno en la superior izquierda y otro en la inferior derecha. Vamos a ver el uso de esto dentro del mundo cinematográfico.

Ejemplo de uso de la Regla de Tercios

Sobre esto último, veamos un ejemplo perfecto en una escena sacada de la película Blade Runner 2049, y que nos servirá para poner en valor a su director de fotografía, Roger Deakins.

regla tercios composicion blade runner 2049
Blade Runner 2049: composición de una escena

En la escena aparecen dos personajes. Y si superponemos la rejilla de la que hemos estado hablando, vemos como cada uno de ellos se posicionan casi de forma perfecta en dos puntos de interés opuestos. Roger Deakins es totalmente consciente de cuales son los puntos importantes a mostrar en la escena y que el espectador, al ver la película, tiene que localizar a los personajes en el primer golpe de vista. Y esto lo consigue aplicando a rajatabla la regla de tercios.

Seguro que a partir de ahora, cuando veas una película, empiezas a notar donde se colocan los personajes o ciertos elementos, según la importancia que tengan. Lo que antes era algo que percibías de una forma natural y casi inconsciente, ahora no podrás dejar de verlo. Y empezarás a dar valor a una buena composición, y a los sentimientos y mensajes que puedes llegar a dar con ella.

Pero también podemos darle un pequeño giro a la regla de tercios, y no usar de forma totalmente explicita los puntos de interés. Las lineas que separan las franjas horizontales y verticales también son muy importantes. Y se pueden utilizar para marcar elementos dinámicos y estáticos. Dándoles importancia sobre el resto de la imagen. Veamos otro ejemplo.

escena once upon a time in the west horizonte

En esta conocida escena de la película Once Upon a Time in the West, vemos como el horizonte se coloca casi de forma milimétrica en la linea horizontal que forma el primer tercio. Quizás pueda parecer algo arbitraria la colocación del horizonte en ese punto, o algo más bajo o más alto. En absoluto. Por eso, te recomiendo que eches un vistazo a esta entrevista a Steven Spielberg, en la que habla sobre el posicionamiento del horizonte, recordando la primera vez que conoció a John Ford.

Crea Interés Visual en tus Diseños

Y es que, el motivo último del uso de la regla de tercios es crear un interés en tus diseños, y que no se pierda el mensaje que quieres llegar a dar. Imaginemos que estás creando una ilustración, como algunas de las que ofrecemos en Silo Creativo. Y que estás poniendo especial énfasis y esfuerzo en un elemento, como pueda ser un logotipo, una imagen o un texto. Simplemente por posicionarlo en un lugar incorrecto, puede pasar desapercibido dentro de la totalidad de la imagen. Todo nuestro trabajo habrá sido en vano.

Hemos visto hasta ahora como funciona la regla de tercios en el mundo de la fotografía y el cine. Por lo que vamos a ir a lo que nos interesa. Como podemos usarla en el mundo del diseño gráfico y el diseño web.

Regla de Tercios en el Diseño Gráfico y el Diseño Web

Si estás trabajando en el mundo del diseño gráfico, quizás el uso de la regla de tercios es mucho más sencilla. Es casi como hacer una fotografía. Solo que tenemos un control absoluto sobre la escena cuando estamos diseñando, y podemos construirla pensando en donde van a situarse cada uno de sus elementos.

Pero si estamos diseñando una web, ¿como podemos aplicar esta regla? Pues prácticamente de la misma forma. Al final la pantalla de nuestros dispositivos, tengan el tamaño que tengan, porque ya tenemos que pensar siempre en un diseño responsive, son un marco donde colocar una escena. Y nuestra escena no es ni más ni menos que nuestra web. Y como venimos haciendo hasta ahora, que mejor forma que mostrar un ejemplo.

Por un motivo u otro, estamos mencionando últimamente mucho la web de Slack. Si hace pocos días fue porque está construida con CSS Grid, ahora es por su composición.

slack web tercios

Porque lo primero que tenemos claro al verla es que tiene dos partes bien diferenciadas. Una a la derecha, donde hay una ilustración. Otra a la izquierda, donde aparecen los textos. Y ya que hablamos de textos, nunca está de más recordar la importancia que tiene una correcta estructura de los textos en nuestra web. Es algo que muchas veces olvidamos, pero que dice mucho de nuestra imagen online.

Volviendo a la composición, la composición no se para en esa dualidad. Si superponemos nuestra rejilla de la regla de tercios, vemos como el slogan principal de Slack se sitúa justo en la primera línea horizontal, y llega hasta el punto de interés superior derecho. El diseñador de esta web sabe perfectamente que, en un primer vistazo, el usuario debe leer dicho slogan. No debe perderse entre el resto de la web. Lo coloca estratégicamente en ese punto. Y de forma natural, nuestros ojos se redirigen a ese punto. Perfecto, un trabajo magistralmente realizado.

Este tipo de composiciones, como la regla de tercios, junto a muchas otras, debemos de tenerlas interiorizadas cuando estemos diseñando. Y al final, las haremos de forma natural, casi sin pensarlas. Porque un mal diseño salta a la vista de forma muy evidente. Un buen diseño pasa completamente desapercibido, ya que el usuario o espectador lo usa casi sin darse cuenta, de forma natural. Lo interioriza. Eso significa que está funcionando. Y con la regla de tercios, hacemos que las partes importantes de nuestros diseños se muestren en los puntos en los que sabemos que van a ser observados

Comentarios (7)

  1. ¿Se cumple la regla de los tercios en formato móvil?. Teniendo en cuenta que en móvil la pantalla es vertical no horizontal.

    1. Por supuesto que se cumple! Lo bueno de esta regla es que funciona sea cual sea el formato de la imagen: apaisada, cuadrada o vertical.

      Puedes hacer tus propias pruebas cuando hagas alguna fotografía desde el movil. En algunos modelos incluso te permiten superponer la rejilla de la regla de tercios, para que mejores la composición de tus fotografías.

      Y por supuesto, todo esto es aplicable al diseño web. Puedes situar textos e imágenes en los puntos fuertes o las lineas de separación de las franjas, para enfatizarlos.

      Un saludo, y gracias por comentar!

  2. Hola, Alfonso.

    Muy interesante este dato que aportas en esta entrada. Nunca pensé que existiese esta clase de calibración (¿se podría decir?) a la hora de diseñar y sus beneficios. Claro, lo de la proporción áurea no lo ignoraba, pero nunca había intentado ver el cuadro desde otro ángulo. Gracias por el dato, lo empezaré a emplear.

    ¡Saludos!

    1. Hola Jason!

      Un placer que te haya gustado. Posiblemente la regla de tercios sea una de las composiciones más sencillas de implementar en nuestros diseño una vez sabemos como funciona. Y de las que mejor resultado da!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *