El equilibrio visual y la armonía son conceptos que van ligados en el diseño gráfico. Es un poco difícil explicarlo pues no el equilibrio no necesariamente implica inmovilidad. El equilibrio es necesario en toda composición, aunque suene como una palabra que se asocie usualmente a elementos estáticos y tal vez podrías pensar que en el campo del diseño una palabra como “equilibrio” no tiene cabida, pues necesariamente implica una composición aburrida. Pero el equilibrio visual es lo que hace tu composición sea agradable a la vista de la audiencia.
En el diseño web puede ser incluso un poco más complicado lograr cierto sentido de equilibrio visual pues lidias con muchos elementos al mismo tiempo. En este artículo aclaremos los dos tipos de equilibrios visuales fundamentales y te damos algunas pautas para lograrlo.
Equilibrio visual simétrico
La simetría se asocia a la estabilidad. Es lo que obtenemos, por ejemplo, al dividir la letra “X” en dos partes, trazando una línea horizontal imaginaria que pase por su eje. Tanto el lado derecho como izquierdo son iguales y es por ello que se podría identificar a esta letra como simétrica. Cabe destacar que la línea no necesariamente tiene que ser horizontal, también puede ser vertical.
Para lograr simetría en tu diseño web lo que debes hacer es colocar elementos similares en cada lado del eje central, a una distancia igual. Para ello puedes colocar una línea imaginaria en el centro y comenzar a colocar los elementos a partir de esa línea. Los elementos pueden ser imágenes, párrafos de texto e incluso una fotografía con un texto de apoyo. De hecho, una layout simétrica es fácil de encontrar en el diseño web pues se considera un diseño que es agradable a la vista. Debido a su significado sobre la estabilidad y equilibrio es perfecto para empresas como bancos o aseguradoras. Si empiezas con medidas, es bastante sencillo comenzar a diseñar de manera simétrica, aunque eso sí, te llevará tiempo pues tendrás que hacerlo con medidas exactas. Tendrás que ser bastante paciente si deseas realizar diseños simétricos, especialmente si es tu primera vez diseñando.
Equilibrio visual asimétrico
La asimetría, por otro lado, se asocia con el movimiento y dinamismo. Se suele emplear en composiciones, aunque se usa más en gráficos que en layouts completas de web. El balance asimétrico se logra cuando se colocan los elementos “diferentes” en el principio de la página. No es necesario que se coloquen en la parte superior, pero sí es importante que sean visibles desde que la página se carga, es decir, que se encuentren visibles en el primer pantallazo.
Poner el elemento principal en el lado izquierdo o derecho es una opción para destacarlo y puede llegar a ser más dinámico que una composición con balance simétrico. Debido al impacto visual que tiene este tipo de balance es recomendable usarlo en las ocasiones adecuadas, por ejemplo en páginas de destino, la frase principal puede estar alineada a los lados y ser más visible.
Ingredientes de un diseño web equilibrado
Al tener la layout y estructura del la web, hay otros detalles que tener cuenta para crear un sitio web que sea sencillo de navegar y donde haya cierto sentido de armonía y balance. Te mencionamos los elementos principales:
Colores
Una buena paleta de colores emplea de 2 a 3 colores. No es que sea imposible crear una paleta de colores armónica con más colores, es sólo que es más complicado y se pueden perder de vista el diseño de marca. El diseño de sitio siempre debe estar alineado con el diseño de marca.
En líneas generales, 2 o 3 colores es estándar para hacer una combinación exitosa, pero si tu diseño de marca emplea muchos colores e incluso posee logos dinámicos, entonces podrías plantear emplear más colores. Siempre realizar pruebas y verifica que el contraste entre fondo y forma sea el adecuado.
Espacios en blanco
Esta herramienta es valiosa para los diseñadores pues permite dar descanso visual. No sólo eso, gracias a los espacios en blanco podemos destacar elementos y agruparlos. El espacio en blanco permite, también, organizar y ordenar elementos, haciéndolos más visibles y dando un aspecto más simple y limpio al sitio.
Con la popularización del minimalismo, el espacio en blanco se ha convertido en las herramienta principal de muchos diseñadores, que se han vuelto hábiles en el uso del mismo. Así es, se podría decir que el espacio en blanco “arma de doble filo”, pues si lo empleas más de lo cuenta el sitio puede llegar a verse vacío. Sin duda alguna, el minimalismo es un arte difícil de dominar.
Imágenes y fotografías
Un elemento esencial en todo diseño web, las fotografías sirven para captar la atención del usuario e incluso ayudar a ilustrar un punto de vista. Por ejemplo, si se hablan de los beneficios de un producto es mucho más efectivo colocar iconos o gráficos que ilustren cuál es el beneficio en cuestión.
Ahora, trabajar con imágenes puede ser complicado también pues deben ir acorde al estilo de tu sitio web, así que si eliges fotografías de banco de fotos, asegúrate de buscar y filtrar cuidadosamente tu búsqueda. Otro punto a tener en cuenta es que las imágenes deben estar optimizadas para web (en formato JPEG) y no pesar demasiado para que no afecten el tiempo de carga.
Tamaño de los elementos
El tamaño de tus elementos te ayuda a destacar alguno de ellos y dirigir la visión de tu audiencia. Aunque no es la única estrategia para destacar elementos es una de las más comunes y efectivas. El tamaño ayuda al usuario a determinar el orden de importancia de los elementos, es decir, la jerarquía de los mismos. Nuevamente, no es la única forma de determinar jerarquía pues, por ejemplo, puedo crear 2 botones en 2 recuadros iguales, pero destacar uno de ellos mediante color o tipografía o estilo de botón.
También es importante asignar el mismo tamaño a los elementos que forman parte de un conjunto. Entonces, hay que ser cuidadoso al trabajar con el tamaño de los elementos, no es complicado, pero sí un trabajo que requiere mucha paciencia y, por supuesto, uso de una cuadrícula para hacer tus medidas más exactas.
Posición de elementos
La localización de los elementos, al igual que el tamaño, es importante al momento de establecer un balance en tu composición. Hay que tener en cuenta los hábitos de lectura de la audiencia, que en la gran mayoría de los casos, sigue un patrón de Z, es decir, se inicia en la parte superior izquierda y se va moviendo de manera horizontal, ya que los usuarios están acostumbrados a leer un libro de esa manera e intentan traducir ese hábito a la web.
Pero no sólo debes tener en cuenta el tamaño y la posición de los objetos, sino también las formas, los colores y otros detalles pues cada uno de ellos tiene propiedades y características distintas que pueden ayudarte al posicionar los elementos.
