Este principio del diseño web se refiere al equilibrio que guardan los elementos que componen la página. La forma en que se disponen los elementos de la página influye notoriamente en el estilo y el carácter de la página.
Existen tres tipos de balance:
- Simétrico – Este tipo de balance se ve en los casos en que los diferentes elementos componentes de la página web se encuentran dispuestos de acuerdo a alguna de las clases de simetría.
- Asimétrico – Es cuando los elementos componentes se colocan balanceados pero sin seguir ninguna simetría.
- Fuera de balance – En estos casos, los elementos son colocados en forma desbalanceada dentro de la página.
Balance simétrico
Si bien existen muchos tipos de simetría, el diseño web tiene algunas particularidades que hacen poco útiles algunas de ellas. Estas características particulares del diseño web están referidas básicamente a la forma en que se muestran las mismas en los navegadores, lo que hace que los diseñadores web tengan la necesidad de adaptarse a estos requerimiento, adoptando solo aquellos elementos aplicables a este tipo de visualización. El empleo de simetrías proporciona sobriedad, elegancia y claridad a los diseños.
La resolución de pantalla más empleada en la actualidad es de 1024 x 768 píxeles. A estas dimensiones se deben quitar las barras de herramientas, las barras de desplazamiento (scrollbar), etc., lo que hace imposible incluir todo el contenido de una página en este espacio (para esta resolución se diseña con anchos de 960 pixeles). Esto quiere decir que los usuarios de la mayoría de las páginas web se deban desplazar en forma vertical por la misma, así que resulta fácilmente comprensible que emplear una simetría horizontal en la web es bastante difícil.
Características del balance simétrico
Disponer de los elementos de una página web en forma simétrica brinda una sensación de orden. Otra característica importante es que permite que la disposición de estos elementos sea “predecible”, haciendo que el diseñador pueda guiar al visitante por la página en la forma que desee para asegurarse la mejor visibilidad de los elementos más importantes de la misma.
Simetría horizontal
Como está descrito anteriormente, la simetría horizontal es bastante rara en el diseño web. Sin embargo, en algunos casos en que, como en una página principal (home), todo el contenido de la misma puede ser incluida sin necesidad de que el usuario deba emplear las barras de desplazamiento, el diseñador puede basar su creación en la simetría horizontal.
A continuación les mostramos un ejemplo de una página inicial completamente simétrica en el plano horizontal.
En ella vemos que el menú está compuesto por líneas horizontales que abarcan la totalidad del ancho de la página y que el logotipo se encuentra ubicado en el pie de la página y también se encuentra dispuesto de acuerdo a la simetría horizontal del resto de la composición.
Simetría vertical
Al igual que en el caso anterior, es bastante difícil que un diseñador base su creación en la simetría vertical exclusivamente. Sin embargo, se pueden apreciar algunos casos en que excelentes diseños son construidos en base a este tipo de ordenamiento de los contenidos.
Una página web basada en simetría vertical implica que sus contenidos se encuentran distribuidos en dos o más columnas más o menos definidas que ocupan todo el largo de la página. En algunos casos, luego de establecer un encabezado horizontal se emplean columnas para ordenar el contenido. Tal es el caso del siguiente ejemplo, donde puede verse claramente que el contenido principal de la página se encuentra dividido en dos columnas simétricas, debajo de un encabezado horizontal.
Un caso llamativo es el siguiente ejemplo, donde el contenido de la página tiene un encabezado con el logotipo en el centro, lo que permite trazar un eje que dividiría la pagina en dos mitades, mientras que más abajo, las imágenes tienen las mismas dimensiones y permiten dividir la página en tres secciones simétricas en el plano vertical:
Como puede verse, el contenido de la página puede dividirse en secciones con simetrías diferentes, como el caso anterior.
Simetrías vertical y horizontal combinadas
También es posible observar ejemplos de diseños web hechos combinando las simetrías horizontal y vertical, siendo ésta la más común de las simetrías.
Un ejemplo donde el empleo de la combinación de la simetría vertical y la horizontal se ve muy claramente lo tenemos en la siguiente imagen:
Este diseño nos muestra una página dividida en cuadros perfectamente simétricos, tanto en el plano horizontal como en el vertical. Este tipo de diseños se emplean en forma más asidua en los últimos años.
Simetría radial
En algunos casos, los diseñadores optan por otro tipo de simetría para ordenar los componentes de las páginas, como la simetría radial. La disposición de los elementos en este tipo de simetrías es en forma circular en torno a un centro ocupado por una imagen o texto o en forma de espiral. Dado la naturaleza de este tipo de simetrías, solo se emplea en casos en que la página no supere las dimensiones de una pantalla, ya que en caso contrario, gran parte del diseño se pierde.
El siguiente ejemplo pertenece a una captura de pantalla de una página de inicio, donde se puede apreciar claramente el centro ocupado por una imagen, los rayos de sol que marcan nítidamente el diseño circular, y el título, que acompaña la simetría radial con que está diseñada la página.
Balance asimétrico
Con este nombre designamos al tipo de balance en el que los diferentes elementos que componen una página web se encuentran equilibrados o balanceados pero sin seguir un patrón simétrico. Este tipo de balance es uno de los preferidos en la actualidad, ya que otorga gran libertad de creación, pero también constituye un gran desafío para el diseñador, ya que equilibrar elementos sin compensación simétrica es más difícil al no contar con el apoyo de elementos que balanceen el diseño por contraposición.
Sin embargo, a pesar de los retos que este sistema de equilibrio plantea, permite al diseñador colocar los componentes de una página en sitios más adecuados para dirigir el ojo del visitante hacia los puntos de la página que más le interese mostrar, cumpliendo de esta forma con otro de los requisitos que todo buen diseño debe cumplir.
En la siguiente imagen podemos ver un diseño en el que, si bien cuenta con una estructura geométrica definida, no se cumple ninguna de las simetrías.
Fuera de balance
Yendo aún más lejos en la libertad de diseño se encuentran las páginas fuera de balance o sin equilibrio. Esto se hace en forma deliberada, buscando el impacto visual. Es un verdadero desafío lograr que una página que no tiene balance o equilibrio se vea bien, siendo un concepto muy avanzado en el diseño y que requiere gran experiencia por parte del diseñador web.
Un ejemplo de página sin balance es el siguiente, donde el creador ha decidido romper el equilibrio tanto horizontal como vertical, consiguiendo un efecto informal y abstracto muy llamativo.
Conclusión
Cada uno de los métodos de balancear o no una página web es válido. El diseñador debe tener en cuenta el tipo de página web que está creando para elegir si su página será balanceada o no, si será simétrica o no. No existen reglas definidas en ninguna clase de creación, por lo que sólo nuestra capacidad de imaginación puede ser el límite. Algunos ejemplos de excelentes diseños pueden verse en la siguiente página y también en este sitio.