¡Precaución, es mucho texto!
Cada elemento de cualquier composición, incluida una página web, tiene un cierto grado de atractivo visual. Cuanto mayor sea este grado, más atención atrae el elemento. El impacto de estas fuerzas también puede extenderse a elementos vecinos, predeterminando el movimiento del ojo del usuario en la página.
Este fenómeno se conoce comúnmente como “peso visual” y la dirección que toma esta fuerza es “dirección visual”. Entender estos conceptos es muy importante si quieres tener jerarquía, fluidez, ritmo, equilibrio y por supuesto conversión en el diseño de tu branding.
El peso físico es una medida de la gravedad, pero los objetos bidimensionales, como las páginas web, no tienen masa y, por tanto, no tienen ningún peso físico. El peso visual es una medida de la fuerza con la que afecta la atención del usuario: cuanto más atrae un elemento la mirada, mayor es su peso visual. El peso visual se deriva del tamaño, el color y la forma. Controlar combinaciones de estas características permite controlar el peso. El rojo llama más la atención que el azul; Es más probable que se noten los elementos grandes que los más pequeños. Como consecuencia, un elemento rojo grande tiene más peso visual que uno azul pequeño.
No existe una forma absoluta de medir con precisión el peso visual de un artículo. Puedes utilizar tu experiencia y opinión para elegir entre varios elementos uno con más peso, o para entender qué puede aumentar el peso de un objeto en particular. Aprende a confiar en tus ojos: las zonas de la composición que más te llaman la atención tienen más peso.
Estas son algunas de las características y una descripción de cómo cambiarlas afectará el peso visual de un elemento:
Tamaño. Los elementos más grandes tienen más peso visual que los más pequeños.
Color. Los colores cálidos tienden a pesar más que los colores fríos, que pasan a un segundo plano. El rojo se considera pesado, mientras que el amarillo es relativamente claro.
Saturación de color. Los elementos más oscuros tienen más peso que los elementos más claros.
Posición. Los elementos que se encuentran en la parte superior de una composición pesan más que los que se encuentran debajo. Los elementos en primer plano tienen más peso que los detalles del fondo.
Textura. Los artículos con textura pesan visualmente más que los artículos sin textura. La textura agrega dimensionalidad, lo que aumenta enormemente la visibilidad del objeto.
Forma. Los artículos con forma regular tienen más peso.
Orientación. Los objetos verticales son más pesados que los horizontales. Los elementos diagonales son los más pesados.
No se puede limitar todo a las características descritas anteriormente. Puede utilizar propiedades adicionales para controlar el peso visual.
Densidad. Cuanto más densa es la disposición de los elementos en un área determinada, más peso tiene el grupo.
Espacio vacio. El espacio vacío no tiene peso visual, por lo que cualquier objeto rodeado de espacio vacío tiene más peso que un objeto similar colocado entre otros elementos.
Interés. Algunas cosas son más interesantes que otras. Cuanto más complejo e interesante sea el elemento, más atención atraerá. También es de gran importancia el interés personal del usuario. Si le apasionan los coches, un coche en el fondo de la ciudad le resultará más interesante que los edificios del fondo, pero si su pasión es la arquitectura, entonces el coche pasará a un segundo plano.
No todas las características contribuyen igualmente al cambio de peso visual. La mayoría de las personas notarán el color de un artículo antes de determinar su forma. Tenga en cuenta que el peso visual es una combinación de las características anteriores.
Veamos cómo el peso visual puede afectar la gestalt de un grupo.
Gestalt es un grupo de principios de percepción visual desarrollados en la década de 1920 por psicólogos alemanes. Los principios de la Gestalt se basan en la teoría de que “un todo organizado se percibe como algo más que la suma de sus partes.
Figura-Fondo. Se pueden utilizar pesos visuales para separar la figura principal y la imagen de fondo. Utilice herramientas que aumenten el peso del elemento para el objeto central e intente aclarar el fondo.
Similitud y contraste. Puede utilizar el peso visual para enfatizar la proximidad de los elementos. Los objetos con el mismo peso visual se perciben como similares.
Centros de gravedad. Los elementos situados en puntos clave de una composición suelen tener más peso.
Experiencia pasada. La experiencia pasada del usuario determina cuánto estará interesado en un elemento particular y, en consecuencia, determina qué tan visualmente pesado es tal o cual objeto para ese usuario.
Si el peso visual caracteriza la fuerza para atraer la atención hacia un lugar en particular, la dirección visual indica con qué eficacia un objeto desvía la atención hacia otro. Piense en ello como la posible dirección de un objeto si todas las imágenes cambiaran repentinamente.
La dirección visual cumple una función similar al peso visual: intenta que notes una parte particular de la composición, pero mientras el peso dice “¡Mira aquí!”, la dirección dice “¡Mira allí!”.
Al igual que con el peso visual, puedes medir la dirección visual de un objeto cambiando sus características:
Forma del elemento. La forma de cada uno de un grupo de elementos es capaz de crear un eje guía que debe tener una dirección común para todo el grupo.
Colocación de elementos. Puede utilizar el peso visual de los elementos para llamar la atención sobre un objeto adyacente.
Elemento. Una flecha, un dedo que señala o una mirada direccional sugieren mirar en una dirección determinada.
Movimiento. Un elemento puede literalmente recorrer todo el diseño y su movimiento tendrá dirección.
Esqueleto estructural. Cada composición tiene un esqueleto estructural, a lo largo de cuyos ejes se dirigen las principales fuerzas visuales.
En su libro Arte y percepción visual: la psicología desde una perspectiva creativa, Rudolf Arnheim propuso la idea de la existencia de un esqueleto estructural en cada composición.
La idea es que cada lienzo tenga una red estructural de fuerzas visuales. Ciertos puntos de una composición atraerán nuestra mirada aunque no haya nada allí.
El centro y las cuatro esquinas del lienzo rectangular actúan como imanes para los ojos. El fuerte imán está en el centro, aunque no es el centro geométrico de la composición. Más bien, se llamará la atención sobre el centro óptico, que está situado justo encima del verdadero centro geométrico. Los puntos ubicados entre la esquina y el centro geométrico tienen mayor poder visual, además los puntos ubicados entre la mitad de cada lado del lienzo y su centro pueden ser referidos a dichos centros visuales.
Puede utilizar un esqueleto estructural colocando objetos clave en los centros visuales, aumentando así el peso visual de esos objetos.
Puedes pensar en la dirección visual como líneas reales o imaginarias que van de un elemento a otro: naturalmente, estas líneas no deberían ser visibles para el usuario.
— Conectividad. Las líneas que conectan los elementos tienen dirección. La mirada crea una línea imaginaria entre el ojo y todo lo que mira.
— Continuación. Este principio se refiere a elementos a lo largo de una línea o curva como si se movieran en la dirección de la línea o curva.
Destino común. Los elementos se tratan como un grupo si se mueven en la misma dirección.
Otro concepto de dirección visual es que cada composición tendrá una dirección dominante, ya sea horizontal, vertical o diagonal.
— Dirección horizontal hace que la composición sea tranquila y estable.
— Dirección vertical añade una sensación de formalidad y equilibrio.
— dirección diagonal sugiere movimiento y acción.
La dirección dominante de la composición establecerá la dirección de la mayoría de los elementos o quizás de algunos elementos clave. La dirección ayudará a establecer el estado de ánimo general de la composición de acuerdo con su significado general.
Es muy posible que la composición no tenga una dirección dominante: por ejemplo, el número de elementos de las filas horizontales y verticales puede ser igual. En este caso, la dirección dominante está determinada por las peculiaridades de la visualización de la composición y la opinión subjetiva del usuario.
El peso visual de un elemento es una medida de cuánto atrae la atención del espectador. Un elemento visualmente pesado atrae mejor la atención. La dirección visual se percibe como la dirección de las fuerzas visuales que actúan sobre el elemento, o la fuerza con la que apunta hacia otros objetos.
Puede controlar estas características de los elementos de la composición utilizando su forma, color y otras propiedades. Además, la ubicación del objeto en relación con otros objetos y el “lienzo” tiene un gran impacto en el peso y la dirección visual.
Compensación visual — la capacidad de igualar el peso visual de un objeto en relación con otros elementos, dependiendo del color de la forma y la ubicación de ese objeto.
El ejemplo allí es realmente trivial y poco interesante.
Si le preguntas a cualquier diseñador: “¿Qué es la compensación óptica?” — él responderá que es cuando se hace un círculo más grande que un cuadrado para que parezca que tienen el mismo tamaño.
Compensación del círculo óptico
Este es un conocimiento básico y cualquier curso para principiantes comienza con él.
Y en la práctica, este principio se aplica con mayor frecuencia como se describe cuando desea combinar algo redondo con algo que no es redondo en el diseño: agregue un ícono al comienzo de la línea o, por ejemplo, alinee el avatar con el bloque de descripción. En tales casos, el elemento redondo se hace un poco más grande y se desplaza un par de píxeles hacia la izquierda para compensar la pérdida óptica de peso.
Pero ¿qué pasaría si este principio se aplicara de forma más amplia? Donde no hay nada redondo, pero un elemento también puede perder peso respecto a otro elemento por igual. Por ejemplo, en formas:
Campo y botón de una línea
Los formularios pueden ser diferentes, pero la mayoría de las veces constan de dos partes igualmente importantes: un conjunto de campos y un bloque con una acción. El formulario más simple es un campo único con un botón.
El campo y el botón tienen la misma altura, el mismo peso y funcionan bien entre sí.
Dos campos y un botón de columna
El formulario puede ser vertical y constar de varios campos y un botón. Como en la autorización, por ejemplo. Aquí también todo es del mismo tamaño y funciona bien.
La forma del rey
Pero cuanto más rico se vuelve el conjunto de campos, más comienza a “devorar” el peso del bloque con la acción. Y si en formato pequeño el peso del botón era igual al conjunto completo de campos, en formato grande su peso pasa a ser igual a un solo campo. Esto debilita la percepción del botón como culminación de la forma.
Esto se ve mejor en el ejemplo real:
Formulario con botón de mayor altura y tamaño total(RUS LANG)
Aquí es bueno recordar el principio de compensación óptica y tomar un camino similar: aumentar el peso del botón aumentando su altura en relación con los campos del formulario.
Sí, esto no es exactamente una compensación óptica. Los requisitos previos son diferentes. Aquí no hay ilusiones ópticas, solo trabajamos con peso visual. Y aunque la solución es la misma (aumento de tamaño), el principio, en aras de la claridad, sería correcto llamarlo “compensación visual”.
Tamaño del botón en la biblioteca de elementos.
Si tienes suerte (o mala suerte) y tu proyecto tiene una biblioteca de elementos, basta con quitarle un botón de un tamaño más grande. Si los campos del formulario son de tamaño S, entonces el botón es M, si los campos son M, entonces el botón es L. El principio es simple.
Si tu proyecto no tiene una biblioteca de elementos, esta es una buena excusa para empezar a construirlo. Sólo con el elemento más básico: el botón. La diferencia de tamaño en altura puede ser de 8 a 16 píxeles, como mejor le parezca.