s√°bado, abril 20, 2024
No menu items!
InicioBlogsC√≥mo utilizar la regla de los tercios en el dise√Īo web

C√≥mo utilizar la regla de los tercios en el dise√Īo web [Quick Tip]

Para entender el ‚Äú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.

Descargar ahora: más de 150 plantillas de creación de contenido [Free Kit]

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.

ūüĒ• Leer:  C√≥mo solucionar el error al presionar una tecla en Macbook

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:

ejemplo de cuadrícula de la regla de los tercios

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:

la sección de los tercios izquierdo y derecho en una cuadrícula de la regla de los tercios

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

los puntos de intersección en una cuadrícula de la regla de los tercios

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 ‚ÄúVista‚ÄĚ ‚Üí ‚ÄúShow‚ÄĚ ‚Üí ‚ÄúRed‚ÄĚ:

creando la regla de la cuadr√≠cula de tercios en Photoshop.  Vaya a mostrar> cuadr√≠cula primero.‚ÄĚ src =‚ÄĚhttps://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-1.png?width=624&name=how% 20to% 20use% 20the% 20regla% 20of% 20thirds% 20in% 20design-1.png‚ÄĚ estilo =‚ÄĚmargen izquierdo: 0.00px;‚ÄĚ title =‚ÄĚ‚ÄĚ  ancho =‚ÄĚ624‚Ä≥ cargando =‚ÄĚperezoso‚ÄĚ srcset =‚ÄĚhttps://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-1.png?width=312&name=how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 312w, https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/how%20to%20use%20the % 20rule% 20of% 20thirds% 20in% 20design-1.png? Width = 624 & name = how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 624w, https: //blog.hubspot. com / hs-fs / hubfs / Google% 20Drive% 20Integration / how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png? width = 936 & name = how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 936w, https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in % 20design-1.png? Width = 1248 & name = c√≥mo% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 1248w, https://blog.hubspot.com/hs-fs/hubfs/ Google% 20Drive% 20Integration / how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png? Width = 1560 & name = how% 20to% 2  0use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 1560w, https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule % 20of% 20thirds% 20in% 20design-1.png? Width = 1872 & name = how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 1872w‚ÄĚ tama√Īos =‚ÄĚ(ancho m√°ximo: 624px) 100vw, 624px‚ÄĚ></p>
<p><strong>2. A continuaci√≥n, vaya a ‚ÄúPreferencias‚ÄĚ ‚Üí ‚ÄúGu√≠as, cuadr√≠culas y rebanadas‚ÄĚ:</strong></p>
<p><img alt= gu√≠as, cuadr√≠cula y sectores.‚ÄĚ src =‚ÄĚhttps://blog.hubspot.com/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-Apr-16-2021-06-59-02-03- PM.png‚ÄĚ estilo =‚ÄĚmargen izquierdo: autom√°tico; margen derecho: autom√°tico; bloqueo de pantalla;‚ÄĚ title =‚ÄĚ‚ÄĚ cargando =‚ÄĚperezoso‚ÄĚ>

3. A continuaci√≥n, elija el color de las l√≠neas de la cuadr√≠cula, junto con la l√≠nea continua. Entonces, cambia ‚ÄúL√≠nea de cuadr√≠cula Cada‚ÄĚ para ‚Äú100 por ciento‚ÄĚ, con subdivisiones de ‚Äú3‚ÄĚ. Cuando haya terminado, haga clic en ‚ÄúOK‚ÄĚ.

ūüĒ• Leer:  6 pasos pr√°cticos para crear una estrategia de contenidos para la web

guías, cuadrículas, cortes en Photoshop para usar la regla de la copia de los tercios4. ¡Y ahí lo tienes! Ahora tiene una cuadrícula de la regla de los 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 .

Una cuadrícula completa de la regla de los tercios en Photoshop con una imagen transpuesta encima.

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.

La p√°gina de inicio de Soulful Vibes Co., un ejemplo de la regla de los tercios en el dise√Īo web

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 tranquila, 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

La p√°gina de inicio de HubSpot, un ejemplo de la regla de los tercios en el dise√Īo web

HubSpot usa la regla de los tercios para llamar la atenci√≥n de inmediato sobre su eslogan y ‚ÄúObt√©n HubSpot gratis‚ÄĚ CTA en la p√°gina de inicio, ya que la atenci√≥n de la mayor√≠a de los visitantes comenzar√° en el lado izquierdo de su 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.

ūüĒ• Leer:  ¬ŅC√≥mo trabajar Nord Vpn?

3. Museo Frans Hals

La p√°gina de inicio del Museo Frans Hal, un ejemplo de la regla de los tercios en el dise√Īo web

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:

La página de inicio de Tone Dermatology, un ejemplo de cuándo no desea usar la regla de los tercios (se ve mejor cuando es simétrica en este caso).

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 el lado izquierdo). Derecha).

Este dise√Īo funciona bien para atraer la atenci√≥n del visitante, y probablemente no hubiera 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 la regla de los dise√Īos m√°s sim√©tricos de los terceros dise√Īos y considere las pruebas A / B para determinar cu√°l funciona mejor con su audiencia.

plantillas de contenido

Recomendamos

Populares