Cómo utilizar la regla de los tercios en el diseño web [Quick Tip]

Para comprender la «regla de los tercios» en lo que respecta al diseño web, comencemos con un ejemplo.

Considere esta imagen de un toro en un campo:

No es muy interesante, ¿verdad? Como centro de la imagen, la imagen del toro se siente un poco blanda y predecible. Estoy dispuesto a apostar que si vieras esta imagen en un sitio web, no te detendría demasiado en ella.

Ahora, considere qué cambia cuando usamos la regla de los tercios para colocar el toro lejos del centro:

Un poco más interesante, ¿verdad?

La regla de los tercios puede ayudar a que sus diseños se sientan menos predecibles y más intrigantes. Y, en última instancia, tiene el poder de captar la atención del espectador durante más tiempo, lo cual es fundamental cuando intentas captar nuevas audiencias y convertir esas audiencias en clientes potenciales para tu marca.

Por supuesto, hay excepciones para cada regla. Quizás decida que sus diseños son más atractivos cuando son simétricos. Aún así, solo puede tomar la decisión intencional para su propio sitio web después de haber explorado sus opciones.

Aquí, aprenderemos cómo usar la regla de los tercios en el diseño y el diseño de la interfaz de usuario para llevar sus imágenes al siguiente nivel.

Cómo utilizar la regla de los tercios en el diseño

En pocas palabras, la regla de los tercios postula que los diseños son más interesantes y visualmente atractivos cuando coloca los objetos principales de su diseño en una de las cuatro intersecciones de una cuadrícula de la regla de los tercios, o en una de las secciones de los tercios.

No es ningún secreto que el arte es más que conjeturas. La geometría, que se remonta a la época romana antigua, siempre ha tenido un lugar en las obras de arte importantes.

Para entender la regla de los tercios, veamos un ejemplo.

La regla de los tercios dibuja dos líneas perpendiculares a una página y dos líneas horizontales a una página, para crear una cuadrícula de nueve cajas.

Esto divide su página en tres secciones de un tercio, independientemente de si está cortando la imagen horizontal o verticalmente:

A continuación, para usar la regla de los tercios en el diseño, simplemente querrá colocar sus objetos fuera del centro colocándolos en una de las secciones de tercios:

… O en uno de los puntos de intersección:

En el ejemplo que se muestra arriba, el punto focal principal, la cima de la montaña, está en el lado izquierdo del centro de la imagen, en el primer tercio de la foto.

Afortunadamente, es bastante fácil usar la regla de los tercios en sus propias imágenes con una herramienta de diseño como Photoshop, que ofrece una función de cuadrícula para que pueda asegurarse de que está utilizando con precisión la regla de los tercios para crear un diseño más armonioso e interesante.

A continuación, veamos cómo puede crear la cuadrícula de la regla de los tercios en Photoshop en cuatro pasos rápidos.

Cómo crear la regla de los tercios en Photoshop

1. Para utilizar la herramienta de la regla de los tercios de Photoshop, simplemente abra una página en blanco en Photoshop y haga clic en «Ver» → «Mostrar» → «Cuadrícula»:

2. A continuación, vaya a «Preferencias» → «Guías, cuadrículas y cortes»:

3. A continuación, elija el color de las líneas de la cuadrícula, junto con la línea continua. Luego, cambie «Gridline Every» a «100 Percent», con subdivisiones de «3». Cuando haya terminado, haga clic en «Aceptar».

4. ¡Y ahí lo tienes! Ahora tiene una cuadrícula de regla de tercios. Para agregar su imagen, simplemente arrastre y suelte la imagen en la cuadrícula en capas existente, amplíela para llenar la cuadrícula y luego mueva su objeto focal hasta que esté en una de las secciones de tercios o en uno de los cuatro puntos de intersección .

Ejemplos de regla de los tercios en el diseño de la interfaz de usuario

Para considerar el poder de la regla de los tercios en el diseño de la interfaz de usuario, echemos un vistazo a algunos ejemplos de sitios web, con un enfoque particular en qué sitios web utilizan la regla de los tercios.

1. Soulful Vibes Co.

Aquí, el diseñador pone el foco principal, en las rocas de cristal y la pulsera de cuentas con un elefante, en las secciones de los tercios izquierdo y derecho, asegurando que el enfoque del visitante esté en el texto central en sí: «No es solo un movimiento, es un estilo de vida.»

El diseñador usa la regla de los tercios para crear una estética pacífica, armoniosa e informal que se ve más abierta y acogedora de lo que sería si ambos objetos estuvieran al frente y al centro de la página, lo que probablemente se sentiría más abarrotado y agitado.

2. HubSpot

HubSpot usa la regla de los tercios para llamar la atención inmediata sobre su eslogan y el CTA «Obtén HubSpot gratis» en la página de inicio, ya que la atención de la mayoría de los visitantes comenzará en el lado izquierdo de tu sitio web. Luego, las imágenes de dibujos animados se colocan en la sección de tercios de la derecha, para equilibrar la página. Esto ayuda a crear un flujo de usuarios, de izquierda a derecha, que sería más difícil de lograr con un diseño simétrico.

3. Museo Frans Hals

Este sitio web del museo de los Países Bajos utiliza la regla de los tercios para llamar la atención sobre la foto de la mujer, ubicada en la sección de los tercios izquierdos. La página es única, atractiva y cohesiva, y utiliza contraimágenes para equilibrar la estructura asimétrica de la página; por ejemplo, mientras que la imagen más grande de la mujer está hacia la izquierda de la pantalla, hay textos e imágenes adicionales a la derecha. para equilibrarlo.

Cuándo romper las reglas (de los tercios)

Es importante tener en cuenta: en diseño y arte, no hay reglas estrictas que deba seguir, y hay excepciones para cada regla o tendencia de diseño.

Una vez que comprenda la regla de los tercios y cómo puede afectar la experiencia de un usuario, puede romper esa regla cuando lo considere oportuno.

Por ejemplo, puede que le resulte más atractivo mantener sus imágenes en el centro de la pantalla, como se muestra en la página de inicio de Tone Dermatology:

Aquí, el enfoque central en la mujer es convincente y audaz, particularmente porque está mirando hacia la izquierda de la pantalla, por lo que sigue siendo una imagen asimétrica (solo ves sus ojos y nariz a la izquierda, y solo ves su cabello en la parte izquierda). derecho).

Este diseño funciona bien para atraer la atención del visitante, y probablemente no habría sido tan poderoso si el diseñador hubiera usado la regla de los tercios para colocar a la mujer hacia el lado izquierdo o derecho de la pantalla.

En última instancia, querrá elegir los elementos de diseño que mejor se adapten a las necesidades de su propia marca. En caso de duda, experimente con ambos diseños más simétricos y regla de los terceros diseños, y considere las pruebas A / B para determinar cuál funciona mejor con su audiencia.