El equilibrio en el diseño web

El diseño de una página web incluye el empleo de varias disciplinas, entre las que se encuentra el diseño gráfico. La presentación visual de una página web es una representación gráfica y como tal sigue los lineamientos generales del diseño gráfico. Los elementos componentes de una página web deben ser combinados de forma tal que el objetivo con el que se diseña sea logrado. Cada componente de la página web tiene una jerarquía respecto de los otros, por lo que es necesario buscar la combinación de elementos que haga posible que esta jerarquía se vea resaltada. El diseñador debe lograr que la página tenga la máxima eficiencia comunicativa que sea posible. Esto solo es posible mediante el impacto visual, logrado con la correcta disposición de los elementos.

Para que el mensaje llegue al usuario, todos los elementos deben estar equilibrados. Este equilibrio tiene una serie de reglas básicas que todo diseñador de páginas web y diseñador gráfico debe conocer. Sin embargo, un error frecuente en el diseño es realizar el mismo para luego introducir los componentes, cuando en realidad el diseño debe estar pensado para que los componentes se vean de tal forma que el mensaje llegue en forma correcta al usuario.

Equilibrio de las proporciones

Cada componente de una página web tiene un peso visual, el cual depende de sus atributos, como forma, color, tamaño, etc. Este peso visual, es la proporción. Lo primero que se nos ocurre al hablar de proporción, es el tamaño relativo del objeto en cuestión. Un elemento más grande que otro, tiene una atracción visual superior que el segundo. Pero además, la carga visual de un elemento también depende de otros atributos, como el color. Un objeto de color saturado, tiene un peso visual superior que otro cuyo color tiene una saturación menor.  Las formas tienen también influencia en la proporción de los elementos. Así pues, un elemento de forma irregular tiene mayor atracción visual que un objeto de forma regular.

Todos estos atributos deben guardar una proporción tal que los elementos que se desee resaltar sean más visibles que otros, pero de forma tal que tampoco los elementos secundarios “desaparezcan”. Hay muchas formas de conseguir que las proporciones de los diferentes objetos se adecúen al fin perseguido.

Equilibrio de las escalas

Las proporciones de los diferentes elementos de un diseño tienen una relación entre sí que denominamos escala. Esta escala, que en principio pensamos exclusivamente en relación al tamaño de los objetos, abarca a todos los atributos de los mismos. Esto quiere decir, que deben tenerse en cuenta las escalas de tamaño, de forma, de color. Cada uno de los atributos de un objeto, tiene una dimensión, la cual no es absoluta, sino relativa, ya que depende de los atributos de los demás objetos. Por ejemplo, un cuadrado de 120 pixeles de lado es grande si se encuentra junto a otro de 60 pixeles, pero es chico si se le relaciona con uno de 200 pixeles. Lo mismo sucede con los colores. Un objeto de color amarillo sobre fondo negro es más llamativo que uno de color gris ubicado a su lado; sin embargo, el mismo elemento amarillo, sobre fondo blanco es mucho menos llamativo que un objeto de color rojo ubicado también a su lado.

La escala, en definitiva, es muy importante para relacionar objetos de diferentes proporciones. Todo diseño equilibrado debe estar integrado por elementos que mantienen una cierta relación entre sus proporciones. Un ejemplo práctico lo vemos en el siguiente diseño, donde (solo por tomar la relación existente entre algunos de sus elementos) la escala del encabezado y del menú, tienen una relación tal que la atención fluye rápidamente hacia el primero, pero con una diferencia tal que hace posible que el menú sea visible para los usuarios y dar una buena navegabilidad a la página. El equilibrio de las escalas, en este ejemplo, puede apreciarse en el tamaño, en el color y en las formas.

Agrupación de elementos

Dentro de las reglas del equilibrio de un diseño, debe tenerse muy presente que una de las formas de lograr un mejor equilibrio entre los diferentes elementos, es la agrupación de los mismos. La agrupación, además, consigue otro factor importante en un diseño, que es el orden. La agrupación de elementos es natural en el ser humano, que tiene la tendencia a colocar juntos a objetos afines. Esto, en el diseño de páginas web, tiene como finalidad darle lógica y racionalidad a la ubicación de los diferentes elementos, de forma tal que la comunicación del mensaje sea efectiva.

Los componentes de una página pueden agruparse de acuerdo a varios criterios:

• Por proximidad, la forma más elemental de agrupar los objetos, que consiste en agruparlos de acuerdo a su cercanía física.
• Por semejanza, que consiste en agrupar objetos de acuerdo a su parecido visual.
• Por continuidad, es decir, de acuerdo al significado de los elementos.
• Por simetría, que es agrupar objetos de manera tal que den la sensación de conformar una figura conocida o simétrica.

La agrupación es uno de los equilibrios más sencillos de ver en un diseño web. Es muy común, por ejemplo, ver agrupaciones de imágenes, o que los textos se encuentren en un lugar determinado de la página, los botones de navegación siempre están agrupados en un menú, etc.

Alineación del diseño

Para que la composición no aparezca como caótica, los diferentes elementos y grupos de elementos deben aparecer ordenados de acuerdo al trazado de líneas imaginarias, tanto verticales como horizontales, que se denominan reticulado. La alineación es importante, debido a que cuando se colocan muchos objetos dentro de un diseño, la forma más sencilla de que los usuarios logren ubicarlos e identificarlos es que se encuentren alineados. Esto se ve acentuado por el hecho de que la propia forma de los monitores es rectangular, por lo que el ordenamiento según líneas rectas es algo natural. En la imagen siguiente, vemos una página alineada, tanto vertical como horizontalmente y donde resulta muy sencillo trazar líneas imaginarias sobre las que se encuentran los componentes:

La alineación de los textos, es además, un aspecto importante en la comunicación. Lo usual, siguiendo la tradición escrita, es que los mismos se encuentren alineados a la izquierda, aunque excepcionalmente y debido a ciertas circunstancias, los textos pueden aparecer alineados a la derecha, centrados o justificados, aunque lo recomendable, para facilitar la lectura, es que se emplee la primera de las alineaciones.

Equilibrio de contenidos

Toda página web está integrada por elementos textuales, gráficos y ocasionalmente con contenidos de otros medios. Desde el punto de vista del diseño de una página web, y dado la relevancia de los dos primeros, nos referiremos al equilibrio entre los elementos gráficos y textuales. Los elementos textuales son indispensables, ya que aportan la mayor parte de la información que se desea transmitir. Los elementos gráficos, además de también hacer aportes de información, suministran las sensaciones visuales necesarias para acompasar y resaltar el sentido del mensaje de la web.

El abuso de cualquiera de los dos tipos de elementos es contraproducente, ya que los usuarios necesitan la información por la que llegan a la página, pero también necesitan sentirse atraídos por el lenguaje visual. Por consiguiente, el equilibrio entre estos tipos de componentes de una página, es fundamental.

Jerarquía visual

Una página web equilibrada debe mantener una cierta jerarquización de los contenidos, de forma tal que la vista del usuario sea guiada en forma adecuada a través de los mismos. La jerarquización de los componentes comienza con la ubicación de los mismos. Dado que el sistema de lectura empleado en occidente es de izquierda a derecha y de arriba hacia abajo, existe una tendencia natural en los individuos a recorrer los objetos gráficos en ese orden. Por consiguiente, es natural que el elemento más importante de una página web (su logotipo) se encuentre ubicado en la esquina superior izquierda o muy cerca de ella, seguido hacia la derecha por el título de la página.

La jerarquización de los elementos componentes de una web, puede realizarse también empleando colores y contraste. Todo contenido de una página web debe tener establecida su jerarquía en la misma, empleando para ello cualquier técnica de diseño.