La aplicación de la regla de los tercios de Diseño Web


Este es un tema fascinante que siempre no consigue discute en el ámbito del diseño web.
Los fotógrafos son probablemente familiar con la regla de los tercios relacionados con la composición de la foto. Pero, ¿cómo pueden interactuar los diseñadores utilizan la regla de los tercios para crear diseños digitales interesantes?

En este post quiero explicar la regla de los tercios y compartir algunos consejos sobre la aplicación de la regla en un diseño de página web. No todo el mundo va a encontrar esta útil y es a menudo mejor quedarse con un regimiento que agiliza el proceso. Sin embargo, la regla de los tercios es un concepto tan básico que es definitivamente vale la pena aprender acerca de cómo funciona y cómo se aplica a diseños de página web

¿Por qué las fracciones?

Usted puede preguntarse por qué el 3-way split es una buena idea? Y ¿de dónde viene esta incluso vienen de todos modos? Bien se le alegra saber que no hay un montón de matemáticas involucradas - por lo menos no con la aplicación práctica absoluta. Podríamos sentarnos alrededor del círculo club de matemáticas y hablar de la magia de los números de Fibonacci, pero eso no es realmente necesario.

La regla de los tercios proviene de arte tradicional, especialmente la fotografía, donde una pieza de trabajo se puede dividir en 9 incluso plazas. Esto se hace con dos vertical y dos líneas horizontales corte a través de la composición. La norma establece que los elementos llamativos deben estar alineados cerca de las intersecciones de estas líneas de los resultados más impactantes

Usted puede encontrar un gran ejemplo en este post sobre el DMD. Aquí es donde el arte se convierte en realidad artístico-fartsy porque la idea de la asimetría suele ser más interesante que la simetría. Pero a veces una foto con un poco de simetría puede ser interesante - la regla de los tercios desempeña un pequeño papel en esto.

La meta ideal es capturar algo de una manera única que llama la atención en una parte de la fotografía. Usted quiere que la desigualdad, porque esto obliga a algunos elementos a aparecer más significativos que otros (incluso si es sólo la fotografía inteligente).

Ahora llegamos a la cuestión de diseño de páginas web. Bueno, eso no fue formulada como una pregunta ... Entonces, ¿cómo la regla de los tercios se relacionan con el diseño web? Se refiere en la misma manera que lo haría llamar la atención sobre ciertas partes de una fotografía, también puede hacer que la gente se centró en piezas importantes de un sitio web.




Entender La Rejilla

Esta técnica se divide en 9 cuadrados con 4 puntos de intersección cruciales. La mayoría de los usuarios se han sabido para escanear sitios web en un patrón F o Z. Así el ojo seguirá en el patrón de la letra F o Z de arriba a abajo. La esquina superior izquierda de una página web es una de las primeras áreas para captar la atención.



Esto también significa que el punto de intersección superior izquierda debe caer sobre o cerca de una parte importante de la página. El punto de intersección no necesita estar en la cima de un vínculo o una foto (aunque podría ser). Debería ser más como un marcador para distinguir una pieza importante de la disposición. Por ejemplo, el título de la página podría alinear en algún lugar cerca de la primera línea horizontal y debajo de esto usted puede tener una presentación de fotos.

Si intenta salir de esta técnica Recomendaría tomar una captura de pantalla por encima de la tapa en su navegador. Si sólo dispone de una cosecha diseño maqueta las dimensiones exactas de una pantalla típica del monitor y usar eso como una captura de pantalla. Maquetas completas de sitios web no presentan los resultados más útiles porque son a menudo mucho más alto que anchos. Asimismo, la regla de los tercios está destinada a ser un concepto UX, no un principio de diseño completo.

Cuando un usuario primero aterriza en su página web que sólo estamos viendo los elementos de la interfaz situadas encima de la tapa. Este principio se utiliza para analizar el lienzo y determinar las secciones de la página que dibuja naturalmente la atención. Utilice correctamente y es posible que encuentre la cuadrícula de 3 × 3 es una experiencia gratamente esclarecedor.

Hacer no Tweaks diseños

Ahora que entendemos más acerca de la utilización de esta norma en el diseño web que quiero hacer un punto muy importante. La regla de los tercios no se supone que es una estructura de rejilla para la construcción de diseños impecables. En su lugar lo utilizan como una herramienta para probar o ajustar un diseño existente.

Hay un montón de sistemas de redes gratuitas disponibles para ayudarle a planear una estructura metálica diseño completo o maqueta a partir de cero. La regla de los tercios debería comportarse más como un principio rector al momento de pagar el diseño. Usted puede optar por ajustar la barra de navegación para ser más alto o más bajo, mueva el logo más cerca o más lejos de una intersección.




Afortunadamente, usted puede probar esta ideología con casi cualquier pieza de software. Photoshop es mi preferencia, pero incluso alternativas libres como GIMP tiene suficiente funcionalidad para crear una cuadrícula sencilla en la parte superior de un diseño de pantalla. Es, definitivamente, mejor simplemente crear algo primero - cualquier cosa que usted siente mueve un proyecto en la dirección correcta.

Entonces una vez que usted tiene un primer borrador probarlo con la regla de los tercios. Ver donde los elementos caen y donde se cruzan la página. Con el tiempo usted comenzará a notar este efecto en otros sitios web y que va a ayudar a reconocer dónde aplicar las mismas características en sus propios diseños.

Simetría de manipulación

Hay algunos casos en los elementos de la página simétricos pueden ser útiles. Pero si esto fuera la regla, entonces el arte sería bastante soso. De hecho, la asimetría es muy común en las pinturas y de la fotografía, donde una foto muestra más tierra que el cielo, o tiene un objeto más cerca de un lado que del otro. Parece desequilibrada todavía esta discordia es exactamente lo que nos llama la atención.

Cuando se trata de diseño de diseño que podría considerar este principio muy similar. Si el encabezado de la página utiliza una imagen de héroe grande esto puede tomar hasta 2/3 de toda la red. Del mismo modo es posible colocar texto de cabecera de gran tamaño más pequeño por encima de texto del título para un efecto de contraste. El significado implícito de este diseño dice que el texto del encabezado es muy importante y debe ser reconocido por primera vez - y si es interesante lo suficiente al lector también puede considerar el texto secundario.



Ten en cuenta también la colocación y el tamaño de las fotografías en una página. La regla de los tercios, no siempre se trata de la composición completa. Usted puede tratar de colocar la rejilla sobre el contenido principal de ver donde todas las líneas de arriba. Esto puede ser útil para analizar los tamaños de párrafo y altura de la línea en relación con las cabeceras y las imágenes.

Este principio se relaciona directamente con el equilibrio y la simetría que son los dos conceptos de buen diseño. Ambos diseñadores de impresión y web necesitan equilibrio adecuado - sin embargo esto no siempre equivale a la simetría. No tenga miedo de jugar y hacer algunos diseños a tope fea. La forma más rápida de aprender es cometer errores horribles y posteriormente corregirlos.

Consideraciones finales

Al igual que con la mayoría de las formas artísticas de expresión realmente no hay reglas. Las reglas son muy útiles para alguien que sigue dominando la nave y esto ciertamente se aplica a la regla de los tercios en el diseño web. Una vez que usted comprende plenamente el propósito de esta "regla" que va a hacer apariciones en su trabajo subconsciente. Esto es cuando usted comienza a acercarse a la maestría y es por lo general alrededor de este punto cuando todas las reglas se vuelven como una segunda naturaleza. A continuación, puede empezar a romper las reglas a propósito!

Espero que este post puede dilucidar algunos de los usos comunes de la regla de los tercios en el diseño web. Tenga en cuenta que usted no tiene que seguir estas directrices si no ayudan a diseñar grandes interfaces. Sin embargo, muchos diseñadores han tenido éxito con esta regla de la metodología tercios por lo que vale la pena probar en su propio flujo de trabajo.