{"id":220,"date":"2018-06-05T17:55:19","date_gmt":"2018-06-05T22:55:19","guid":{"rendered":"http:\/\/agenciamk.com\/blog\/?p=220"},"modified":"2025-03-11T16:04:03","modified_gmt":"2025-03-11T21:04:03","slug":"regla-de-tercios-en-diseno-web","status":"publish","type":"post","link":"https:\/\/www.agenciamk.com\/blog\/regla-de-tercios-en-diseno-web\/","title":{"rendered":"Comprendiendo la Regla de tercios en el Dise\u00f1o Web"},"content":{"rendered":"

\"\"<\/a>En su forma m\u00e1s simple la regla de tercios se refiere a un cuadrante de 3×3 que se ajusta en la parte superior de cualquier imagen. No hay tama\u00f1os espec\u00edficos para los bloques, solo requiere que est\u00e9n igualmente distribuidos. El cuadrante funciona de forma horizontal o vertical y ayuda a determinar c\u00f3mo el ojo sigue una imagen o grupo de im\u00e1genes como por ejemplo un sitio web.<\/p>\n

\u00bfQu\u00e9 es la regla de tercios?<\/h2>\n

La regla tercios ha girado alrededor por cientos de a\u00f1os, con la primera referencia escrita por John Thomas Smith en \u201cRemarks on Rural Scenery\u201d (1797). El autor escribi\u00f3 sobre la filosof\u00eda y la forma en que se refer\u00eda a la pintura y el arte, d\u00e1ndole el nombre \u201cregla de tercios\u201d, una frase que hasta hoy es com\u00fanmente utilizada entre artistas, fot\u00f3grafos y dise\u00f1adores.<\/p>\n

Si bien la regla de tercios puede ser usada intencionalmente en el arte, fotograf\u00eda o dise\u00f1o, es tambi\u00e9n un concepto siempre-presente. Incluso cuando no tienes previsto adaptarse a eso, la regla de tercios existe. Su trabajo consiste en usar su ventaja en el dise\u00f1o.<\/p>\n

C\u00f3mo funciona la regla de tercios en el dise\u00f1o<\/strong><\/h2>\n

\"\"<\/a>
\nEl concepto de la regla del cuadrante en forma de tres te ayuda a entender los lugares sobre una imagen donde una persona est\u00e1 naturalmente distra\u00edda mientras visualiza una imagen o incluso tu sitio web. En teor\u00eda, los mayores puntos llamativos est\u00e1n donde se cruzan las l\u00edneas de la cuadr\u00edcula. \"\"<\/a><\/p>\n

Comprender d\u00f3nde estos puntos claves caen pueden ayudarte a componer mejor una obra de arte o fotograf\u00eda, determinar una cosecha m\u00e1s atractiva e incluso determinar la ubicaci\u00f3n de los elementos en la p\u00e1gina de aterrizaje de tu sitio web. Por lo general, el \u00e1rea que primero llamar\u00e1 la atenci\u00f3n es la intersecci\u00f3n superior de la cuadr\u00edcula izquierda, seguido por la intersecci\u00f3n debajo y luego las secciones transversales correctas de la parte superior e inferior derecha.<\/p>\n

La lecci\u00f3n m\u00e1s grande que proviene de la regla de tercios es que la perfecta simetr\u00eda de dos partes puede no ser la configuraci\u00f3n m\u00e1s atractiva. Conseguir\u00e1s mayor impacto con im\u00e1genes o dise\u00f1os sin ello. (Y recuerda, incluso si tu dise\u00f1o es creado con simetr\u00eda perfecta desde el centro hacia fuera, la regla de tercios seguir\u00e1 aplicando).
\nPuedes trabajar con o en contra de la regla de tercios, pero no puedes eliminarlo.<\/p>\n

La regla de tercios en la Fotograf\u00eda e im\u00e1genes<\/strong><\/h2>\n

Siguiendo la filosof\u00eda de la regla de tercios, las im\u00e1genes que corresponden a regiones \u2018terceras\u2019 son las m\u00e1s agradables y est\u00e1n asociadas con el equilibrio y la armon\u00eda. Cuando el enfoque de una imagen cae en la cuadr\u00edcula imaginaria, tambi\u00e9n puede crear esas asociaciones. Por ejemplo, la ubicaci\u00f3n de un objeto en un tercio de la foto puede implicar movimiento, tal como con el ave de encima (Casi se puede sentir que llegaba de haber volado desde la izquierda y aterriz\u00f3 en la rama).\"\"<\/a><\/p>\n

Hay unas cuantas directrices de la regla de tercios para tener en cuenta mientras trabajas con recorte de im\u00e1genes.<\/p>\n

Mira el horizonte: En las fotos con una l\u00ednea de horizonte (especialmente paisajes), trata de colocar esa l\u00ednea en el tercio superior de la imagen. Eso ayudar\u00e1 a enfocar mejor el resto de im\u00e1genes y a\u00f1adir la sensaci\u00f3n adecuada de d\u00f3nde el cielo est\u00e1 localizado.<\/p>\n

Mira a los ojos: Esto puede ser bastante dif\u00edcil a veces, pero en retratos pensar en alinear los ojos del sujeto en dos de las l\u00edneas de la cuadr\u00edcula de inter\u00e9s. Estas son las \u00e1reas que primero llaman la atenci\u00f3n, por lo que tu espectador conectar\u00e1 inmediatamente con la persona en la foto porque has creado una sensaci\u00f3n de mirar hacia sus ojos.
\n\"\"<\/a>
\nMira el espacio muerto: S\u00e9 consciente de las piezas de objetos en las esquinas de la imagen y el recorte. Tira de la parte de la imagen que realmente quieres que sea exhibido hacia adelante y cerca de una de las l\u00edneas principales de la cuadr\u00edcula.\"\"<\/a><\/p>\n

Regla de tercios en el Dise\u00f1o Web<\/strong><\/h2>\n

\"\"<\/a>Piensa en la ubicaci\u00f3n de elementos de su sitio web en relaci\u00f3n con la regla de tercios. En una resoluci\u00f3n de pantalla com\u00fan de 1.024 p\u00edxeles de ancho por 786 p\u00edxeles de profundidad, cada tercio ser\u00eda de unos 341 p\u00edxeles de ancho por 262 de profundidad.<\/p>\n

Piensa sobre la composici\u00f3n de tu sitio. Es probable que el banner caiga al lado m\u00e1s izquierdo del tercio superior. Gran parte de tu contenido probablemente comience alrededor de la localizaci\u00f3n del tercio superior de la l\u00ednea de la cuadr\u00edcula, con sistema de navegaci\u00f3n por encima de ella.<\/p>\n

Considera la posibilidad de que la publicidad de banner son colocados en varios sitios web de noticias. Ellos tiran a trav\u00e9s del tercio superior de la l\u00ednea de cuadr\u00edcula, como el anuncio y contenido de la p\u00e1gina web de la revista Rolling Stone. \"\"<\/a><\/p>\n

En las p\u00e1ginas de inicio, aplicar la regla de tercios cuando se determina la ubicaci\u00f3n de los elementos clave \u2013banners, medios de comunicaci\u00f3n o \u00edconos de interactividad, publicidad e incluso partes claves de tu contenido\u2013. En las p\u00e1ginas subsiguientes, usa la regla de tercios para ayudarle a determinar d\u00f3nde colocar las im\u00e1genes o ayudar a los lectores centrarse al visitar tu sitio. Piensa cu\u00e1ntos sitios son estructurados as\u00ed; sitios con barras laterales en ambos lados a menudo permite que la p\u00e1gina principal caiga dentro del centro de la \u2018tercera v\u00eda\u2019 del sitio.<\/p>\n

Consideraciones de dise\u00f1o web para la regla de tercios<\/strong><\/h2>\n

\"\"<\/a>
\nSi bien la regla de tercios puede ser una herramienta muy \u00fatil, no es necesario planificar el dise\u00f1o de tu sitio web en torno a ello. Usa la filosof\u00eda como una gu\u00eda o una herramienta para ajustar tu dise\u00f1o durante el proceso de finalizaci\u00f3n. Combina una cuadr\u00edcula imaginaria en un nuevo dise\u00f1o del sitio y considera cambiar la colocaci\u00f3n de los objetos que permanecen cerca a los espacios clave en el cuadrante de la regla de tercios.<\/p>\n

La regla de tercios la puedes aplicar para trabajar con im\u00e1genes en tu sitio web. \u00dasalo para ayudarle mejor con el recorte y escala de im\u00e1genes. Recuerda tener en mente d\u00f3nde el objeto de cada foto corresponde y qu\u00e9 tipo de movimiento o sensaci\u00f3n crea.<\/p>\n

El uso exitoso de la regla de tercios puede crear un sentimiento de equilibrio natural, que a menudo es asim\u00e9trica. Puede ayudar a los dise\u00f1adores que tienden a dise\u00f1ar con una simetr\u00eda perfecta salir de su zona de confort y probar algo nuevo, manteniendo al mismo tiempo un sentido de orden del dise\u00f1o.<\/p>\n

Jugar con el uso de la regla de tercios en distintas formas le trae enfoque a tu sitio. Considera solo tercios verticales (como Twenty8Twelve) u horizontales. \"\"<\/a>Elije un \u2018tercero\u2019 y \u00fasalo como un enfoque a trav\u00e9s de tu sitio. Dise\u00f1a tu homepage mediante la agrupaci\u00f3n de terceras partes tales como Google Ventures, que agrupaba los primeros dos tercios horizontales de la imagen principal y tiene un conjunto de tres im\u00e1genes en cada tercio por debajo.\"\"<\/a><\/p>\n

Si est\u00e1s buscando una Agencia de Dise\u00f1o de p\u00e1ginas web<\/a><\/strong>, que te ayude a aplicar este y otros conceptos para renovar tu website, cont\u00e1ctanos.<\/p>\n

Fuente: codrops.com<\/p>\n","protected":false},"excerpt":{"rendered":"\"\"<\/a>

En su forma m\u00e1s simple la regla de tercios se refiere a un cuadrante de 3×3 que se ajusta en la parte superior de cualquier imagen. No hay tama\u00f1os espec\u00edficos para los bloques, solo requiere que est\u00e9n igualmente distribuidos. El … Sigue leyendo →<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[38],"tags":[],"class_list":["post-220","post","type-post","status-publish","format-standard","hentry","category-diseno-web-2"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2s1Qo-3y","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.agenciamk.com\/blog\/wp-json\/wp\/v2\/posts\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.agenciamk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.agenciamk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.agenciamk.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.agenciamk.com\/blog\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":11,"href":"https:\/\/www.agenciamk.com\/blog\/wp-json\/wp\/v2\/posts\/220\/revisions"}],"predecessor-version":[{"id":512,"href":"https:\/\/www.agenciamk.com\/blog\/wp-json\/wp\/v2\/posts\/220\/revisions\/512"}],"wp:attachment":[{"href":"https:\/\/www.agenciamk.com\/blog\/wp-json\/wp\/v2\/media?parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.agenciamk.com\/blog\/wp-json\/wp\/v2\/categories?post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.agenciamk.com\/blog\/wp-json\/wp\/v2\/tags?post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}