00-Principios-de-Diseño-de-Páginas-Web-Peso-Visual-y-Dirección

Cada elemento de una página web ejerce una fuerza visual que atrae la vista del visitante. Mientras más fuerza, más atracción sentirá el visitante. Estas fuerzas también parecen actuar en otros elementos que imparten una dirección visual a sus movimientos potenciales y sugieren lo siguiente que debes ver.

A esta fuerza se le conocer como «peso visual», y la dirección percibida de las fuerzas visuales es «dirección visual». Ambos son conceptos importantes de entender si quieres crear jerarquía, flujo, ritmo y balance en tu composición de página web.

Peso visual

El peso visual es una medida de fuerza que la gravedad ejerce en un objeto, pero dos objetos dimensionales (como elementos de una página web) no tienen masa, por lo tanto, no tienen ningún peso físico. El peso visual es una medida de la fuerza que un elemento ejerce en el ojo. Dos objetos dimensionales pueden llamar la atención. Más elementos atractivos, más peso visual. Por ejemplo, contrastar dos elementos, haciendo que uno sea más grande que el otro, hace claro que los elementos son diferentes.

Controlas el peso visual cuando controlas la combinación de las características líneas abajo. El rojo tiende a atraer más las miradas que el azul, y los elementos grandes más que los pequeños. Un objeto grande y rojo tiene más carga visual que un objeto pequeño y azul.

La suma de estas características o características primitivas es lo que determina el peso visual de un elemento. No es ninguna característica sino la combinación de estas lo que determina el peso visual de un elemento. Algunas combinaciones de características atraerán más la vista que otras. Para crear elementos de distintos pesos visuales, tendrías que usar diferentes combinaciones de características primitivas.

¿Cómo medir el peso visual?

Cuando nos referimos al diseño de páginas web, no existe una forma, que yo sepa, para medir el peso visual de un elemento de diseño. Tienes que usar tu experiencia y juicio para determinar qué elementos tienen mayor o menor peso. Primero desarrolla tu visión y luego confía en ella. Las áreas de una composición que atraen tu mirada son aquellas que tiene un mayor peso visual. Aprende a confiar en tu visión.

Esto no significa que tienes que probar las cosas al azar y ver qué es lo que más y menos atrae tu vista. Por ejemplo, puedes aislar cada característica para saber que algo más grande pesa más que algo pequeño. Tu vista te ayudará en la combinación de características.

Afortunadamente, otras personas han aislado y probado estas características. Abajo te presentamos algunas de las características que puedes cambiar en cualquier elemento y una descripción de cómo, al cambiarlos, puedes incrementar o reducir el peso visual.

Empecemos con las características primitivas:

  • Tamaño
    Los elementos más grandes tienen mayor peso visual que los elementos pequeños.
  • Color
    Los colores cálidos avanzan hacia el primer plano y tienden a cargar más peso que los colores fríos, que residen mejor en el segundo plano. El rojo es considerado como el color más pesado; el amarillo, el menos pesado.
  • Valor
    Los elementos oscuros tienen más peso visual que aquellos más livianos
  • Ubicación
    Se percibe que los elementos ubicados en la parte superior de la composición son más pesados que los elementos ubicados en la parte inferior de la composición. Mientras más lejos del centro o área dominante de una composición, mayor el peso visual de un elemento. Los elementos en el primer plano pesan más que los elementos en el segundo plano.
  • Textura
    Los elementos con textura parecen ser más pesados que aquellos sin textura. Esta característica hace de un elemento tridimensional, que brinda una apariencia de mesa y peso físico.
  • Forma
    Los objetos con una forma regular parecen ser más pesados que los que tienen forma irregular. La irregularidad brinda la impresión de que la masa ha sido removida de una forma regular.
  • Orientación
    Los objetos verticales parecen ser más pesados que los horizontales. Los diagonales tienen mayor peso.

No tienes que limitarte a las características primitivas de arriba. Puedes añadir características adicionales para controlar el peso visual.

  • Densidad
    Colocar más elementos en un espacio en particular incrementa el peso visual de dicho espacio. El visitante percibirá un elemento combinado más grande o más oscuro como opuesto a varios elementos pequeños y livianos.
  • Espacio blanco local
    El espacio blanco parece no tener peso visual porque es visto como un espacio vacío. Cualquier objeto ubicado ahí parecerá más pesado.
  • Interés intrínseco
    Algunas cosas son más interesante que otras. Mientras más complejo un objeto, más interés atraerá. Tus propios intereses también juegan un rol. Si tienes más interés en autos que aviones, entonces una imagen de un auto llamará más tu atención que la imagen de un avión.
  • Profundidad
    Una profundidad de campo más grande brinda un mayor peso visual en un elemento, al parecer por el contraste entre las áreas con enfoque y sin enfoque.
  • Saturación
    Los colores saturados parecer ser más pesados que aquellos no saturados.
  • Peso físico percibido
    Sabemos que una casa pesa más que un zapato. La imagen de una casa pesará más que la de un zapato porque se espera que la casa pese más.

En un artículo previo, hablamos sobre el contraste y la similitud, y mencioné que el contraste llama más la atención hacia un elemento. En otras palabras, un elemento que contrasta con lo que está a su alrededor parecerá más pesado visualmente. Por ejemplo, en una página web, los círculos parecen ser más pesados que los rectángulos porque la mayoría de las páginas web son rectangulares.

No todas las características contribuyen de igual manera en el peso visual. La mayoría de las personas notan el color de un elemento antes que la forma, lo que sugiere que el color aporta más en el peso. También tienes que considerar las singularidades de una composición, porque los elementos contrastantes parecen más pesados que los elementos con los que contrastan. Los elementos específicos de una composición determinarán lo que contrasta y lo que no.

Recuerda que el peso visual es una combinación de los atributos mencionados líneas arriba. Mientras que los elementos grandes llevan más peso que los pequeños, un pequeño punto negro alrededor de un generoso fondo blanco en ubicado en la parte superior de una página web parecerá pesar más que un objeto más grande, pero irregular, de un color frío ubicado en la parte inferior de la página.

Peso visual y Gestalt

Una de las ideas detrás de este artículo es resaltar cómo los principios de Gestalt contribuyen en los principios de diseño.

  • Figura-fondo
    Los pesos visuales pueden ser usados para separar ambos al brindar más peso a la figura que al fondo.
  • Proximidad
    El espacio entre los elementos lleva a diferentes cantidades de espacio blanco y diferentes densidades de los objetos dentro de dicho espacio blanco.
  • Similitud y contraste
    Puedes usar el peso visual para señalar cualquiera. El contraste te dará mayor peso visual. Los elementos con peso visual similar por naturaleza muestran similitud.
  • Punto focal
    Los puntos de atracción en una composición son los puntos focales. Cargan más peso que otros elementos.
  • Experiencia pasada
    La experiencia del espectador contribuye en cuánto al interés intrínseco se piensa que los elementos tienen.

Dirección visual

Si el peso visual se trata de atraer la mirada a un lugar específico, la dirección visual se trata de llevar la mirada hacia la siguiente ubicación. La dirección visual es la dirección percibida por las fuerzas visuales. Mírala como la dirección que esperarías que un elemento tome si se moviese.

Tiene una función similar al peso visual en que trata de que notes ciertas partes de una composición. Ya sea que el peso visual grite «¡Mírame», la dirección visual te dice «¡Mira hacia allá!».

Al igual que con el peso visual, puedes modificar las características de un elemento para sugerir diferentes direcciones, aunque existen menos características en comparación con el peso visual.

  • Forma de un elemento
    La forma de un elemento puede crear un eje y este eje puede sugerir una dirección. El eje principal es, por lo general, visto como un camino paralelo a la dirección visual de un elemento.
  • Ubicación de los elementos
    El peso visual es una fuerza que puede aparecer para atraer o repeler un elemento cercano. Esta fuerza se moverá en dirección que conecte ambos elementos.
  • Tema del elemento
    Una flecha, un dedo apuntado o una mirada sugiere ver hacia cierta dirección.
  • Movimiento
    Un elemento puede, literalmente, moverse a través de tu diseño, y su movimiento tendrá una dirección.
  • Esqueleto estructural
    Cada composición tiene un esqueleto estructural, con fuerzas que correrán naturalmente a través de diferentes ejes. Tal vez eso necesite un poco más de explicación.

Esqueleto estructural

En el libro Art and Visual Perception: A Psychology of the Creative Eye, el autor, Rudolf Arnheim, propuso la idea de un esqueleto estructural detrás de cada formato de lienzo.

La idea es que cada formato de lienzo tenga un red estructural de fuerzas que la recorra. Sin importar que no haya elementos en él, nuestro ojo se verá atraído a ciertas partes porque esta red de fuerzas que se muestra abajo.

01-Principios-de-Diseño-de-Páginas-Web-Peso-Visual-y-Dirección

El centro y las cuatro esquinas de un formato de lienzo rectangular actúan como imanes para el ojo. El imán más fuerte es el centro, menos la figura geométrica del centro. Más bien, el centro que atrae la mirada es el centro óptico, y se ubica solo encima del verdadero centro geométrico.

Los ejes van de esquina a esquina, y los puntos a lo largo de los ejes que están entre el centro y las ejes que están a medio camino también llaman la atención. Estos puntos a medio camino pueden estar conectados con líneas verticales y horizontales, lo que crea ejes adicionales de fuerza visual.

Considera que, en la ausencia de diseño, la mirada de espectador estará atraída hacia ciertos puntos en el esqueleto estructural del Arnheim, y que la mirada se moverá de punto a punto siguiendo la dirección de los distintos ejes.

Puedes hacer uso de esta red estructural al colocar elementos en lugares donde atraerían la mirada naturalmente, haciendo que tengan mayor fuerza.

Dirección visual y Gestalt

Puedes considerar la dirección como líneas reales o imaginarias que resalta un elemento del otro o que conecta diferentes elementos. Las líneas no tienen que ser visibles.

  • Conexión uniforme
    Las líneas que conectan elementos tienen dirección. La mirada crea una línea imaginaria entre el ojo y que este mira.
  • Continuación
    Este principio relaciona elementos colocados a lo largo de una línea o curva, como si se moviesen en dirección a la línea o curva.
  • Destino común
    Los elementos que parecen tener un destino común son aquellos que se mueven o parecen moverse en la misma dirección.
  • Paralelismo
    Para que los elementos se vean paralelos, sus ejes internos (los mismo que imparten dirección) tienen que ser establecidos.

Dirección general de una composición

Otro concepto de dirección visual es que toda composición parecerá tener una dirección dominante, ya sea horizontal, vertical o diagonal.

  • Una dirección horizontal hace que la composición parece tranquila y estable.
  • Una dirección vertical añade un sentido de formalidad, alerta y balance.
  • Una dirección diagonal sugiere movimiento y acción.

La dirección dominante de una composición será establecida por la dirección que toma la mayoría de los elementos o algunos elementos clave. La dirección ayudará a establecer un ánimo general, de acuerdo con el significado general atribuido a diferentes tipos de líneas.

Es posible que una composición no tenga una dirección dominante. El número de elementos horizontales y verticales puede ser iguales. Por ejemplo, en este caso, el espectador puede decidir qué dirección es la dominante.

Ejemplos

Para lo siguiente ejemplos, escogí algunas capturas de pantalla de páginas y compartiré algunos pensamientos sobre cómo veo el peso visual distribuido en cada uno. Tal vez tu percepción sea distinta, eso está bien.

Diferentes ojos pueden sentirse atraídos por diferentes cosas. Nuevamente, sé que no existe un modo de medir el peso visual de un elemento. Además. dos personas pueden dirigir sus miradas a dos diferentes áreas de una composición porque tienen intereses distintos. Se espera un poco de subjetividad.

Una forma fácil de saber qué elementos tienen el mayor peso es usar la prueba de vista. Cierra tus ojos un poco hasta que algunos elementos desaparezcan. Aquellos elementos que queden tienen más peso visual que aquellos que desaparecen.

Bureau

Nota: la captura de pantalla de Bureau fue tomada con mi navegador que es más ancho que 1280 pixeles. Algo menos y el diseño hubiese colapsado a una sola columna en vez de dos, como puedes ver.

02-Principios-de-Diseño-de-Páginas-Web-Peso-Visual-y-Dirección

El artículo de Bureau que se muestra arriba es casi todo texto. El encabezado principal lleva la mayoría del peso visual. Es la pieza más grande del texto y tiene un poco de espacio en blanco alrededor de él. Es discutiblemente la información más importante que alguien que llega a dicha página vería, así que tiene sentido que tenga peso visual.

Los enlaces tienen algo de peso por su contaste con el texto alrededor de ellos, aunque el color frío reduce el peso, en mi opinión.

El elemento con menos peso visual es el texto en la columna derecha. Esto tiene sentido porque se supone que se brinda enfoque al artículo y no a lo que está en la barra lateral.

Toma nota de la pequeña porción roja en la parte superior de la columna. Es un enlace a la página de inicio del sitio web. Así de pequeño como lo ves, el rojo brinda a texto algo de peso adicional, ayudándolo a resaltar del resto de texto de la columna. Todo en la imagen parece más grande cuando miras la página web directamente, así que el texto rojo no es tan pequeño como lo ves aquí.

Cuando realizas la prueba de vista, toda la columna derecha desaparece y te quedas con el encabezado principal encima del artículo y un bloque largo de texto detrás de él.

La dirección principal de la composición es vertical porque son dos columnas largas debajo de la página. La diferencia en el color de fondo entre las columnas crea una línea vertical que te guía hacia la parte inferior de la página y añade la dirección vertical de la composición.

Create Digital Media

Cuando la página de inicio de Create Digital Media carga, los coloridos elementos se animan en un solo lugar, llamando mucho la atención hacia sí mismos. Aun si te pierdes la animación, es probable que veas estos elementos como los que llevan el mayor peso visual debido a los saturados colores rosado, amarillo y azul. Estos elementos ocupan el mismo espacio, crean una área densa en el medio del espacio vacío.

Nota: Entre la redacción y publicación de este artículo, Create Digital Media cerró sus puertas.

03-Principios-de-Diseño-de-Páginas-Web-Peso-Visual-y-Dirección

Los gráficos de la parte inferior son los siguientes elementos con el mayor peso. Son oscuros, grandes y complejos en forma. Separan tu mirada hacia tres secciones que contienen los siguientes elementos visualmente más prominentes: la sección encabezados.

El encabezado principal de la página es grande y oscuro comparado con el siguiente texto debajo de él. Para mí, los otros elementos que resaltan, debido a su alto peso visual, son el nombre de la compañía en la parte superior y el logo en la parte inferior.

Con la prueba de vista, las formas y texto con color y los gráficos en la parte inferior quedan luego de que los demás elementos se haya dispersado. El encabezado principal desaparece para mí, aunque aún puedo verlo. También noto el logo en la esquina inferior izquierda, pero desaparece mucho más rápido que el gráfico cerca a él.

En esta imagen, creo que la dirección principal es horizontal. Las líneas corren horizontalmente al igual que lo hace el encabezado principal y la navegación. Otro elemento visualmente prominente, el texto resaltado, también es horizontal.

Las tres tuercas podrían ser considerados como un solo triángulo, aunque con curvas, pero estableciendo direcciones diagonales. Son los únicos diagonales de la página web.

Javier Marta

Son tres los elementos que se consideran como los que tienen el mayor peso visual en la página web Javier Marta. Los gráficos, los separadores verdes entre las secciones y los íconos de menú en la parte superior de la llamada a la acción.

04-Principios-de-Diseño-de-Páginas-Web-Peso-Visual-y-Dirección

  • Gráficos
    Son grandes, oscuros y rodeados de espacio blanco. Cada gráficos tiene su propio interés intrínseco.
  • Separadores verdes
    Tienen color, son grandes como los gráficos y están rodeados de espacio blanco.
  • Íconos de menú
    Son oscuros, grandes y, nuevamente, están rodeados de espacio blanco.

Para mí, el logo de Javier tiene menos peso visual que los íconos de menú alrededor de él, aunque sigue siendo prominente. Lleva más peso que el texto, pero no mucho como los íconos de menú. Tal vez no estés de acuerdo conmigo.

La prueba de vista hace que los íconos del menú y el logo se mezclen en una sola unidad. Los gráficos y los separadores siguen siendo visualmente prominentes y el texto sigue siendo visto como bloques grandes. Puedes seguir viendo todo mientras se desvanece, incluso si no puedes descifrar lo que dice.

En mi pantalla, solo en encabezado y la sección «El Evento» son visibles; brinda una dirección horizontal a la página. Sin embargo, las cuatro secciones en total están en la página. Cuando se ven todas las secciones de una sola vez, el alineamiento de los separadores verdes aportan una dirección vertical a la composición. Por supuesto, ver todo el formato de lienzo de una sola vez hace que la dirección cambie de horizontal a vertical.

Me pregunto si los dos gráficos de la captura de pantalla arriba serían mejor en lugares opuestos. En el gráfico superior, la cámara apunta hacia la parte derecha, donde va mi mirada. Hubiese sido mejor ser guiado por el texto.

En el gráfico inferior, el paraguas de la mujer apunta hacia la parte derecha, pero ella camina hacia el lado contrario, donde yo tiendo a mirar. Ambos gráficos podrían funcionar mejor si su dirección fuese guiada hacia el texto en vez de lejos de él.

Stanford Arts

La imagen en la parte superior de la página de inicio de Stanford Arts tiene el mayor peso visual. Es el elemento más grande la página y, siendo una imagen, tiene mucho interés intrínseco. También se ubica en la parte superior de la composición. Abarca la mayor parte de mi pantalla.

05-Principios-de-Diseño-de-Páginas-Web-Peso-Visual-y-Dirección

Nota: Esta página web rota las imágenes en la parte superior de la página. Probablemente no veas esta imagen si visitas la página web y, por ello, tu percepción del peso visual puede diferir de la mía.

Considero que las imágenes en los contenedores rectangulares son los siguientes elementos con mayor peso. Luego de ellas están los bloque rojos que conforman en encabezado y el pie de página.

Cuando realizado la prueba de vista, todos los elementos se ven más largos de lo que espero. Los elementos tienen una buena combinación en cuanto al contaste claro-oscuro, que los ayuda a resaltar.

El diseño también es interesante por su dirección visual. Los diagonales son los más dominantes y captura la atención (debido a que la mayoría de las páginas web no tienen una dirección diagonal prominente).

En particular, esta imagen que obtuve en la captura de pantalla arriba también ofrece algo de diagonal, aunque con un poco de curvas en partes y creado por una línea movible conformada por personas.

La mujer (en la parte derecha del triángulo) y el fotógrafo (en el centro de la figura) tienen una dirección hacia la derecha. Hubiese sido mejor que la mujer mire hacia adentro y mover la cámara hacia la izquierda, de modo que también apunte hacia adentro.

Es garantizado que las imágenes cambien cuando colocas el puntero del mouse en cualquier enlace de los diferentes bloques. Aun así, estas tienden a apuntar hacia fuera en vez de hacia adentro.

Conclusión

El peso visual de un elemento se mide por cuánto este atrae la mirada del visitante. Un elemento visualmente pesado llamará la atención del ojo.

La dirección visual es la dirección percibida de fuerza que actúa sobre los elementos. La dirección es una señal para que la mirada se mueva hacia otro lado.

Muchas características intrínsecas pueden ser modificadas para hacer que un elemento sea más pesado o más liviano. Se puede usar algunas para establecer una dirección visual. El formato de lienzo también puede hacer esto.

Como podrás ver, el diseño de una página web es algo muy complejo y que requiere de profesionales capaces de poner en acción conceptos comos los mencionados en este artículo. Si deseas diseñar o rediseñar tu página web, Staff Creativa es la solución. ¡Contáctanos!

Traducido y adaptado de Smashing Magazine. Si encuentras un artículo interesante en idioma inglés sobre Diseño Web, Redes Sociales, Imagen Corporativa o Programación, háznoslo saber en los comentarios y nuestro equipo considerará su traducción y publicación.

Deja una respuesta